jQuery与jQuery选择器及练习

Posted 2021-08-27 星河梦~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery与jQuery选择器及练习相关的知识，希望对你有一定的参考价值。

jQuery

概念

jQuery：是javascript的一个库。

它对JavaScript的相关操作进行了封装：

遍历html文档、操作DOM、事件处理、Ajax等

书写代码也比JavaScript原来的写法简便许多。

使用方式

（1）引入jQuery库：

<script src="jquery.js"></script>

这里的jQuery文件可以在jQuery官网上自行下载文件。

（2）编写jQuery的入口函数：

$(docunent).ready(function(){
	js代码
})

也可以简写为：

$(function(){
	js代码
})

注意：'$'代表jQuery。

jQuery选择器

优点

（1）简洁的写法

例如：$('#id')

（2）完善的时间处理机制

jQuery获取网页中的元素即使不存在也不会报错。

基本选择器

id选择器：#id
类选择器：.class
标签名选择器：
*：匹配所有元素

例如：

<p id="xy">西安</p>
<div class="dv">江南</div>
<div>云南</div>

var flag={
    'color':'red',
    'fontSize':'35px',
    'backgroundColor':'pink',
    'width':'200px',
    'height':'100px'
}
$(function(){
    $('#xy').css('color','red')   //id选择器

    $('.dv').css(flag)    //类选择器
    var arr=$('div')   //标签选择器
    console.log(arr)
})

基本过滤选择器

Element:first ：选取第一个元素
Element:last : 选取最后一个元素
Element:not(selector)：去除所有与给定选择器匹配的元素
Element:even ：选取所有索引为偶数的元素，索引从0开始
Element:odd ：选取所有索引为奇数的元素，索引从0开始
Element:eq(index)：选取索引等于index的元素，索引从0开始
Element:gt(index)：选取索引大于index的元素，索引从0开始
Element:lt(index) ：选取索引小于index的元素，索引从0开始
header ：选取索引的标题标签

例如：

为指定的元素设置css样式

<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div>
<div>红楼梦</div>

$(function(){
   $('p:first').css('backgroundColor','#bbffaa')   //第一个p标签

   $('div:last').css('color','#bbffaa')   //最后一个div的标签

   $('p:not("#nj")').css('color','red')   //将所有id不是nj的p标签的文字变为红色

   $('tbody>tr:even').css('backgroundColor','#bbffaa')  //选择tbody下所有索引为偶数的行(tr),索引从0开始

   $('tbody>tr:odd').css('backgroundColor','#ccc')  //索引为奇数的

   $('tbody>tr:eq(3)').css('color','red')    //索引为3的一行（第四行）文字颜色变为红色

   $('div:gt(2)').css('color','blue')

   $('div:lt(3)').css('fontSize','35px')

属性过滤选择器

Element[attribute]：选取拥有此属性的选择器
Element[attribute=value]：选取指定属性值为value的元素
Element[attribute!=value]：选取指定属性值不等于value的元素
Element[attribute^=value]：选取指定属性值以value开始的元素
Element[attribute$=value]：选取指定属性值以value结束的元素
Element[attribute*=value]：选取指定属性值中含有value的元素

例如：

<p id="bbff">*********</p>
<p id="bbee">^^^^^^^^^</p>
<p id="abc">*********</p>

$(function(){
    $('label[for]').css('color','red')   //选取拥有for属性的label标签

    $('input[type="password"]').css('color','red')   //选取type="password"的input标签
    $('input[type!="password"]').css('color','blue')  //选取type不等于"password"的input标签
    $("p[id^='bb']").css('backgroundColor','#bbffaa') //选取id以bb开头的p标签

    $("p[id$='c']").css('backgroundColor','pink')    //选取id以c结尾的p标签

    $("p[id*='b']").css('fontSize','35px')          //选取id中包含b的p标签
})