JQ2 常规选择器

/ 0评 / 0
一.简单选择器

在使用jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的CSS 规则。CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象。随后,我们就可以对这个获取到的DOM 节点进行行为操作了。

#box {      //使用ID 选择器的CSS 规则

    color:red;    //将ID 为box 的元素字体颜色变红

}

在jQuery 选择器里,使用如下的方式获取同样的结果:

$('#box').css('color', 'red'); //获取DOM 节点对象,并添加行为

                                   简单选择器

选择器 CSS模式(样式) jQuery 模式  描述
元素名 div {} $('div') 获取所有div 元素的DOM 对象
ID #box {} $('#box') 获取一个ID 为box 元素的DOM 对象
类(class) .box{} $('.box') 获取所有class 为box 的所有DOM 对象

$(function () {

    $('div').css('color', 'red'); //元素选择器,返回多个元素

    $('#box').css('color', 'red'); //ID 选择器,返回单个元素

    $('.box').css('color', 'red'); //类(class)选择器,返回多个元素

});

为了证明ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采用jQuery 核心自带的一个属性length 或size()方法来查看返回的元素个数。

$(function () {

   alert($('div').size());

   alert($('#box').size()); 

   alert($('.box').size()); 

同理,你也可以直接使用jQuery 核心属性来操作:

   alert($('#box').length);

 });

警告:有个问题特别要注意,ID 在页面只允许出现一次,如果出现多个相同ID就会出现失明

$('#box').css('color', 'red'); //只有第一个ID 变红,后面两个失明(颜色未变)

jQuery 选择器的写法与CSS 选择器十分类似,只不过他们的功能不同。CSS 选择器找到元素后添加的是单一的样式,而jQuery 则添加的是动作行为。最重要的一点是:CSS 在添加样式的时候,高级选择器会对部分浏览器不兼容,而jQuery 选择器在添加CSS 样式的时候就兼容了。

#box > p { //选择所有作为box元素的子元素p, 子选择器,IE6 不支持

     color:red;

}

$('#box > p').css('color','red'); //jQuery 子选择器,兼容了IE6

jQuery 选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像JavaScript那样每次对节点的获取需要进行有效判断。

$('#pox').css('color', 'red'); //不存在ID 为pox 的元素,也不报错

document.getElementById('pox').style.color = 'red'; //不存在ID 为pox 的元素,报错了

JavaScript原生的DOM 节点,解决这个问题

if (document.getElementById('pox')) { //先判断是否存在这个对象

     document.getElementById('pox').style.color = 'red';

}

使用jQuery 调用的话,怎么去判断是否存在呢?因为本身返回的是jQuery 对象,可能会导致不存在元素存在与否,都会返回true。

if ($('#pox').length > 0) { //判断元素包含数量即可

    $('#pox').css('color', 'red');

}

通过数组下标也可以获取DOM 对象

if ($('#pox').get(0)) { 

    $('#pox').css('color', 'red');

if ($('#pox')[0]) {

    $('#pox').css('color', 'red');

}

二.进阶选择器
 
 选择器 CSS 模式(样式)    jQuery 模式         描述
群组选择器 span,em,.box {} $('span,em,.box') 获取多个选择器的DOM 对象
后代选择器 ul li a {} $('ul li a') 获取追溯到的多个DOM 对象
通配选择器 * {} $('*') 获取所有元素标签的DOM 对象

//群组选择器

span, em, .box { //多种选择器添加红色字体

    color:red;

}

$('span, em, .box').css('color', 'red'); //群组选择器jQuery 方式

//后代选择器

ul li a { //层层追溯到的元素添加红色字体

    color:red;

}

$('ul li a').css('color', 'red'); //群组选择器jQuery 方式

//通配选择器

* { //页面所有元素都添加红色字体

    color:red;

}

$('*').css('color', 'red'); //通配选择器jQuery 方式

目前介绍的六种选择器,在实际应用中,我们可以灵活的搭配,使得选择器更加的精准和快速:

$('#box p, ul li *').css('color', 'red'); //组合了多种选择器

警告:在实际使用上,通配选择器一般用的并不多,尤其是在大通配上,比如:$('*'),这种使用方法效率很低,影响性能,建议竟可能少用

还有一种选择器,可以在ID 和类(class)中指明元素前缀,比如:

$('div.box'); //限定必须是.box 元素获取必须是div

$('p#box div.side'); //同上

类(class)有一个特殊的模式,就是同一个DOM 节点可以声明多个类(class)。那么对于这种格式,我们有多class 选择器可以使用,注意和class 群组选择器的区别。  

<div class="box pox">div</div>

.box.pox { //双class 选择器,IE6 出现异常

    color:red;

}

$('.box.pox').css('color', 'red'); //兼容IE6,解决了异常

多class 选择器是必须一个DOM 节点同时有多个class,用这多个class 进行精确限定。而群组class 选择器,只不过是多个class 进行选择而已。

$('.box, .pox').css('color', 'red'); //群组class 选择器加了逗号,注意区别

警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选越复杂,jQuery 内部的选择器引擎处理字符串的时间就越长。比如:

$('div#box ul li a#link'); //让jQuery 内部处理了不必要的字符串

$('#link'); //ID 是唯一性的,准确度不变,性能提升

三.高级选择器

层次选择器

  选择器 CSS 模式 jQuery 模式 描述
后代选择器 ul li a {} $('ul li a') 获取追溯到的多个DOM 对象
子选择器 div > p {} $('div p') 只获取子类节点的多个DOM 对象
next 选择器 div + p {} $('div + p') 只获取某节点后一个同级DOM 对象
nextAll 选择器 div ~ p{} $('div ~ p') 获取某节点后面所有同级DOM 对象

在层次选择器中,除了后代选择器之外,其他三种高级选择器是不支持IE6 的,而jQuery却是兼容IE6 的。

//后代选择器

$('#box p').css('color', 'red'); //全兼容

jQuery 为后代选择器提供了一个等价find()方法找出正在处理的元素的后代元素

$('#box').find('p').css('color', 'red'); //和后代选择器等价

//子选择器,孙子后失明

#box > p { //IE6 不支持

    color:red;

}

$('#box > p').css('color', 'red'); //兼容IE6

jQuery 为子选择器提供了一个等价children()方法:

$('#box').children('p').css('color', 'red'); //和子选择器等价

next 选择器(下一个同级节点)

#box + p { //IE6 不支持

      color:red;

}

$('#box+p').css('color', 'red'); //兼容IE6

jQuery 为next 选择器提供了一个等价的方法next()

$('#box').next('p').css('color', 'red'); //和next 选择器等价

nextAll 选择器(后面所有同级节点)

#box ~ p { //IE6 不支持

   color:red;

}

$('#box ~ p').css('color', 'red'); //兼容IE6

jQuery 为nextAll 选择器提供了一个等价的方法nextAll()

$('#box').nextAll('p').css('color', 'red'); //和nextAll 选择器等价

层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点才可以被选择到,孙子节点和重孙子节点都无法选择到。next 和nextAll 选择器,必须是同一个层次的后一个和后N 个,不在同一个层次就无法选取到了。

在find()、next()、nextAll()和children()这四个方法中,如果不传递参数,就相当于传递了“*”,即任何节点,我们不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

$('#box').next(); //相当于$('#box').next('*');

补充高级选择器的这三种模式

$('#box').prev('p').css('color', 'red'); //同级上一个元素

$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素

nextUntil()和prevUnitl()方法是选定同级的下面或上面的所有节点,选定非指定的所有元素,一旦遇到指定的元素就停止选定。

$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定,遇到则停止

$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定,遇到则停止

siblings()方法正好集成了prevAll()和nextAll()两个功能的效果,及上下相邻的所有元素进行选定:

$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定

等价于下面:

$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定

$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定

警告:切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式,因为prevAll('p')返回的是已经上方所有指定元素,然后再nextAll('p')选定下方所有指定元素,这样必然出现错误。

                                    属性选择器

CSS 模式 jQuery 模式 描述
a[title]   $('a[title]') 获取具有这个属性的DOM 对象
a[title=num1] $('a[title=num1]') 获取具有这个属性=这个属性值的DOM 对象
a[title^=num] $('a[title^=num]') 获取具有这个属性且开头属性值匹配的DOM 对象
a[title|=num] $('a[title|=num]') 获取具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号的DOM 对象
a[title$=num] $('a[title$=num]') 获取具有这个属性且结尾属性值匹配的DOM 对象
a[title!=num] $('a[title!=num]') 获取具有这个属性且不等于属性值的DOM 对象
a[title~=num] $('a[title~=num]') 获取具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的DOM 对象
a[title*=num] $('a[title*=num]') 获取具有这个属性且属性值含有一个指定字串的DOM 对象
a[bbb][title=num1] $('a[bbb][title=num1]') 获取具有这个属性且属性值匹配的DOM对象

<a title="num">num1</a>

<a>num2</a>

<a>num3</a>

<a title="no4">num4</a>

<a bbb="aaa" title="num">num5</a>

//选定这个属性的

a[title] { //IE6 不支持

color:red;

}

$('a[title]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性=这个属性值的

a[title=num1] { //IE6 不支持

color:red;

}

$('a[title=num1]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性且开头属性值匹配的

a[title^=num] { //IE6 不支持

color:red;

}

$('a[title=^num]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号

a[title|=num] { //IE6 不支持

color:red;

}

$('a[title|="num"]').css('color', 'red'); //兼容IE6 了

//选定具有这个属性且结尾属性值匹配的

a[title$=num] { //IE6 不支持

color:red;

}

$('a[title$=num]').css('color','red'); //兼容IE6 了

//选定具有这个属性且属性值不想等的

a[title!=num1] { //不支持此CSS 选择器

color:red;

}

$('a[title!=num1]').css('color','red'); //jQuery 支持这种写法

//选定具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的

a[title~=num] { //IE6 不支持

color:red;

}

$('a[title~=num1]').css('color','red'); //兼容IE6

//选定具有这个属性且属性值含有一个指定字串的

a[title*=num] { //IE6 不支持

color:red;

}

$('a[title*=num]').css('color','red'); //兼容IE6

//选定具有多个属性且属性值匹配成功的

a[bbb][title=num1] { //IE6 不支持

color:red;

}

$('a[bbb][title=num1]').css('color','red'); //兼容IE6

过滤选择器

过滤选择器简称:过滤器。也是一种选择器

基本过滤器

过滤器主要通过特定的过滤规则来筛选所需的DOM 元素,和CSS 中的伪类的语法类似:使用冒号(:)开头。

过滤器名 jQuery 语法 说明 返回
:first $('li:first') 选取第一个元素 单个元素
:last $('li:last') 选取最后一个元素 单个元素
:not(selector) $('li:not(.red)') 选取class 不是red 的li 元素 集合元素
:even $('li.even') 选择索引(0 开始)是偶数的所有元素 集合元素
:odd  $('li:odd')  选择索引(0 开始)是奇数的所有元素 集合元素
:eq(index)  $('li:eq(2)')  选择索引(0 开始)等于index 的元素 单个元素
:gt(index)  $('li:gt(2)')  选择索引(0 开始)大于index 的元素 集合元素
:lt(index)  $('li.lt(2)')  选择索引(0 开始)小于index 的元 集合元素
:header  $(':header')  选择标题元素,h1 ~ h6 集合元素
:animated  $(':animated')  选择正在执行动画的元素 集合元素
:focus $(':focus')  选择当前被焦点的元素 集合元素

 

<div style="display:none;">我们的新域名为:ycku.com</div>

<div>我们的旧域名为:yc60.com</div>

<div></div>

<div></div>

<ul>

<li>列表1</li>

<li>列表2</li>

<li class="red">列表3</li>

<li>列表4</li>

<li>列表5</li>

<li>列表6</li>

</ul>

<ul>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

<li>列表4</li>

<li>列表5</li>

<li>列表6</li>

</ul>

 

<input type="text" />

<h3>我是标题</h3>

$('li:first').css('background', '#ccc'); //第一个元素

$('li:last).css('background', '#ccc'); //最后一个元素

$('li:not(.red)).css('background', '#ccc'); //非class 为red 的元素

$('li:even').css('background', '#ccc'); //索引为偶数的元素

$('li:odd).css('background', '#ccc'); //索引为奇数的元素

$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素

$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素

$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素

$(':header').css('background', '#ccc'); //页面所有h1 ~ h6 元素

注意::focus 过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab 键盘敲击激活的。

$('input').get(0).focus(); //先初始化激活一个元素焦点

$(':focus').css('background', 'red'); //被焦点的元素

jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:

//eq(num)将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0,而集合长度变成1。

$('li').eq(2).css('background', '#ccc'); //元素li 的第三个元素,负数从后开始

$('li').first().css('background', '#ccc'); //元素li 的第一个元素

$('li').last().css('background', '#ccc'); //元素li 的最后一个元素

$('li').not('.red').css('background', '#ccc'); //元素li 不含class 为red 的元素

注意::first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候,first 会实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明:

$('#box li:last').css('background', '#ccc'); //#box 元素的最后一个li

//或

$('#box li).last().css('background', '#ccc') ; //同上

内容过滤器   过滤规则主要是包含的子元素或文本内容上

过滤器名 jQuery 语法 说明 返回
:contains(text) $(':contains("ycku.com")') 选取含有"ycku.com"文本的元素 元素集合
:empty  $(':empty') 选取不包含子元素或空文本的元素 元素集合
:has(selector)  $(':has(.red)') 选取含有class 是red 的元素 元素集合
:parent  $(':parent') 选取含有子元素或文本的元素 元素集合

<div style="display:none;">我们的新域名为:ycku.com</div>

<div>我们的旧域名为:yc60.com</div>

<div></div>

<div></div>

$('div:contains("ycku.com")').css('background', '#ccc');//选择元素文本节点含有ycku.com 文本的元素

$('div:empty').css('background', '#ccc'); //选择空元素

$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素

$(':parent').css('background', '#ccc'); //选择非空元素

jQuery 提供了一个has()方法来提高:has 过滤器的性能:

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素

jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素

$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素

$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止

可见性过滤器  根据元素的可见性和不可见性来选择相应的元素。

过滤器名 jQuery 语法 说明 返回
:hidden  $(':hidden') 选取所有不可见元 集合元素
:visible  $(':visible') 选取所有可见元 集合元素

$('p:hidden).size(); //元素p 隐藏的元素

$('p:visible').size(); //元素p 显示的元素

注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素。

 

子元素过滤器   过滤规则是通过父元素和子元素的关系来获取相应的元素

过滤器名 jQuery 语法 说明 返回
:first-child  $('li:first-child')  获取每个父元素的第一个子元素 集合元素
:last-child  $('li:last-child')  获取每个父元素的最后一个子元素 集合元素
:only-child  $('li:only-child') 获取只有一个子元素的元素 集合元素
:nth-child(odd/even/eq(index)) $('li:nth-child(even)') 获取每个自定义子元素的元素(索引值从1 开始计算) 集合元素

$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素

$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素

$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素

$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素

$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素

$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第二个li 元素

$('li:nth-child(2n)').css('background', '#ccc'); //每个父元素第二个的2倍 li 元素

//每个父元素第3个的下一个(第4个)的加3(1,4,7,10,……) li元素,从第1个开始

$('li:nth-child(3n+1)').css('background', '#ccc'); 

//每个父元素第4个的上一个(第3个)的加3(3,7,11,15,……) li元素,从第4-1个开始

$('li:nth-child(4n-1)').css('background', '#ccc'); 

                              常用的方法

方法名 jQuery 语法 说明 返回
is(s/o/e/f)  $('li').is('.red') 传递选择器、DOM、jquery 对象集合元素或是函数来匹配元素结合 集合元素
hasClass(class) $('li').eq(2).hasClass('red') 其实就是is("." + class) 集合元素
slice(start, end) $('li').slice(0,2) 选择从start 到end 位置的元素,如果是负数,则从后开始 集合元素
filter(s/o/e/f)  $('li').filter('.red') 从匹配的元素集合中删除那些不符合指定的筛选条件的元素(即返回与指定表达式匹配的元素集合)。这个方法用于缩小搜索的范围。
 
end() $('div').find('p').end() 获取当前元素前一次状态(父节点或相邻的节点) 集合元素
contents() $('div').contents() 获取某元素下面所有元素节点,包括文本节点,如果是iframe,则可以查找文本内容 集合元素

<ul id="box">

<li>列表1</li>

<li>列表2</li>

<li class="red" title="列表3">列表3</li>

<li class="red">列表4</li>

<li>列表5</li>

<li>列表6</li>

<li>列表7</li>

<li>列表8</li>

<li>列表9</li>

<li>列表10</li>

</ul>

<ul>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

<li class="red" title="列表3">列表4</li>

<li>列表5</li>

<li>列表6</li>

<li>列表7</li>

<li>列表8</li>

<li>列表9</li>

</ul>

$('.red').is('li'); //true,选择器,检测class 为是否为red

$('.red').is($('li')); //true,jQuery 对象集合,同上

$('.red').is($('li').eq(2)); //true,jQuery 对象单个,同上

$('.red').is($('li').get(2)); //true,DOM 对象,同上

$('.red').is(function () { //true,方法,同上

         return $(this).attr('title') == '列表3'; //可以自定义各种判断

注意:必须使用$(this)来表示要判断的元素,否则,不管function里面是否返回true或false都和调用的元素关了

}));

$('li').eq(2).hasClass('red'); //和is 一样,只不过只能传递class,class名不加”点”

$('li').slice(0,2).css('color', 'red'); //前三个变成红色

注意:这个参数有多种传法和JavaScript 的slice 方法是一样的比如:slice(2),从第三个开始到最后选定;slice(2,4),第三和第四被选定;slice(0,-2),从倒数第三个位置,向前选定所有;slice(2,-2),前两个和末尾两个未选定。

$("div").find("p").end().get(0); //返回div 的原生DOM

$('#box').next('ul').end().css('background', '#ccc'); //返回ul的上一个ul节点,不是ul的父节点 的原生DOM

$('div').contents().size(); //返回子节点(包括文本)数量

$('li').filter('.red').css('background','#ccc'); //选择li 的class 为red 的元素

$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择

//特殊要求函数返回

$('li').filter(function () {

        return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';

}).css('background', '#ccc');

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注