jQuery选择器总结

jQuery的基本选择器:

1)有通过给定的id来选取一个jQuery对象----->$('#id')

2)有通过给定的类名来选取一个jQuery对象的集合--->$('.class')

3)有通过给定的元素来选取一个jQuery对象的集合--->$('element')

4)有通过通配符*号来选取该网页中的所有的jQuery对象的集合--->$('*')

5)有通过多个选择器匹配之后进行选择合并而得到jQuery对象的集合-->$('selector1,selector2..')  

实际开发中,基本选择器完成了绝大多数的工作.

jQuery层次选择器:

1)可以选取某一个元素的所有的后代元素,得到一个jQuery对象的集合--->$('prev descendant')

2)可以选取某一个元素的子辈的所有的元素,得到一个jQuery对象的集合-->$('prev>son')

3)可以选取某个元素节点之后的元素,得到一个jQuery对象的集合-->$('prev+next') 或者$('prev').next(' ')

4)可以选取某一个元素对象之后的所有的同胞元素-->$('prev~siblings)或者$('prev').nextAll('  ')

5)可以选取某一个元素对象的所有的同胞元素,不管是在前面的还是在后面的-->$('prev').siblings('')

jQuery的过滤选择器

jQuery的过滤选择器又分为多种,其中包含基本的过滤选择器,内容过滤浏览器,可见性过滤浏览器,属性过滤浏览器,子元素过滤浏览器,和表单对象属性浏览器(jQuery 之 选择器总结 下篇 附加表单选择器内容)

一.基本过滤选择器的内容

1)我们可以选取第一个元素----->:first------>$('div:first')

2)我们可以选取最后一个元素----->:last-------->$('div:last')

3)可以去除所有与给定选择器匹配的元素--->:not(selector)---->$('div:not(.class)')

4)可以选取所有下标为偶数的元素----->:even----->$('div:even')

5)可以选取所有小标为奇数的元素----->:odd------>$('div:odd')

6)可以选取索引下标等于给定的值的元素------>:eq(index)------>$('div:eq(10)')

7)可以选取索引下标小于给定值的元素--------------->:lt(index)---->$('div:lt(10)')

8)可以选取索引下标大于给定值的元素------------->:gt(index)----->$('div:gt(10)')

9)可以选择所有的标题的元素,比如说h1,h2,h3...等等------>:header------>$(':header')

10)可以选择当前正在活动的元素(执行动画的元素)----->:animated----->$('div:animated')

二.内容过滤选择器

1)可以选取含有文本为指定值的元素---->:contains(text)---------->$('div:contains(nihao)')

2)可以选取不包含子元素或者文本的空元素---->:empty-------->$('div:empty')

3)可以选取含有选择器所匹配的元素的元素----------------->:has(selector)----------->$('div:has(p)')

4)可以选择符合只有一个孩子(文本元素也算),就是有内容的元素--------->:parent--------->$('div:parent')

三.可见性过滤选择器

1)可以选取不可见的元素----------------->:hidden------------->$('div:hidden')

2)可以选取可见的元素------------------------->:visible------------>$('div:visible')

四.属性过滤选择器

1)可以选取拥有此属性的元素--------------->[attribute]------------>$('')

2)可以选择属性等于指定属性值的元素----------------->[attribute=value]------------>$('div[title=nihao]')

3)可以选择属性不等于指定值的元素---------------->[attribute!=value]------------->$('div[title!=nihao]')

4)可以选择属性值以指定值开始的元素---------------->[attribute^=value]--------->$('div[title^=ni]')

5)可以选择属性值以指定值结尾的元素----------------->[attribute$=value]---------------->$('div[title$=hao]')

6)可以选择属性值中含有指定值的元素--------------->[attribute*=value]---------------->$('div[title*=ih]')

7)可以使用属性选择器进行多次选择满足多个条件----->[selector][selector]------------->$('div[id][title*=ih]')

五.子元素过滤选择器

1)可以选取每个父元素下面第几个子元素,或者是奇偶元素---->:nth-child(index/even/odd)---->这个是从1开始计算的!

2)可以选取每一个父元素下面的第一个子元素------------>:first-child

3)可以选取每一个父元素的最后一个子元素----------->:last-child

4)如果每个元素是它父元素中唯一的子元素,那么会被匹配,否者都无--->:only-child

jQuery 之 选择器总结

      CSS是一种比较出色的技术,上面有很多的定义规则与jQuery有异曲同工之妙,甚至怀疑jQuery就是仿照CSS的理念来设计的,有CSS开发基础的人可以非常容易的进入jQuery的领域进行开发,没有接触过CSS开发的人通过学习jQuery的学习也会学习到很多CSS的规则和设计,CSS有三种方式,分别是行间样式表,内部样式表,外部样式表,其中外部样式表的引入:<link rel=stylesheet href='.../..css' type='text/css'>这句话最好记住,省的以后开发的时候老是去查别的HTMl文件找到这句话了,能省一点时间算一点时间哦.其实主要记住css级联样式表是通过<link/>标签引入的就可以了.同CSS一样jQuery也可以得到所有的元素,只有得到文档的元素之后,才能为该元素增加行为属性,下面是CSS文档和jQuery的几个比较:

 

1)E{CSS规则}使用文档元素作为选择符---------------->$('element')

2)#ID{CSS规则}以文档元素的唯一标示符ID作为选择符------------------------>$('#id')

3)E.className{CSS规则}以文档的class作为选择符--------------------------->$('Element.className')或者$('.className')

4)E F{CSS规则}元素E的任意的后代F----------------->$('F E')元素F的所有后代-->$('F>E')元素F的儿子元素E

5)*{CSS规则}以文档的所有元素作为选择符-------->$('*')选择文档中所有的jQuery元素

 

      可以看出jQuery完全继承了CSS的风格,使用jQuery的元素我们可以非常便捷和迅速的找出特定的jQuery元素,从而可以为这些元素添加行为.我们要区别jQuery对象和DOM对象,jQuery[0]---------->可以转换成DOM对象,这样是非常有用的一个做法,比如说,我们在进行条件判断的时候,DOM对象可以直接放到if()语句块中,但是jQuery永远是个对象,不可以自动转换成boolean函数的.

      比如if(jQuery对象){.....操作.....}就会报告错误的,所以要用jQuery检查某个元素是否存在或者进行流程的控制的时候,应该使用jQuery的长度或者将jQuery对象转换成DOM对象进行判断,正确的做法是if(jQuery[0]){......}或者if(jQuery.length>0){.....}.

      几个上篇中要注意到的问题:

1)$('prev~siblings')-------$('prev').nextAll('...')------$('prev').siblings()的区别

     sibling是同胞,兄弟姐妹的意思,就是指同一辈的元素,将一个DOM理解为一棵树,里面处于同一层的就是siblings了,其中$('prev~siblings')取出的是在'prev'元素之后的所有的siblings元素,在实际的开发中,经常使用$('prev').nextAll()方法来代替上面的方法.区别主要是在$('prev').siblings()方法取出的是所有的兄弟元素,而不论是位于该prev元素的前面还是后面,另外两个方法就是只取出位于该prev元素后面的元素.

2)在基本过滤选择器中:not(selector)

      要明白:not(selector)过滤器中,selector是一个过滤器,也就可以写成选择器的形式...举一个最简单的例子,就是$('div:not(:last)')就是要取出不是最后一个的所有的div元素.

3)在基本过滤选择器中:header

      这个方法的作用就是来选取所有的header元素,也就是常说的标题元素,比如说<h1><h2><h3>等等这种标题元素,它返回的是一个集合元素,就是该页面上所有的标题的集合.

4)在内容过滤选择器中要记住:has(selector)元素的作用

     这个地方就是选取含有选择器所匹配的元素的元素,返回的是一个集合元素,因为不仅仅只有一个元素符合咱们的过滤条件.括弧中的参数也是一个selector,也就是选择器的表达式的形式.

5)在内容过滤选择器中的:parent选择器

      我们可以叫这个选择器"父母选择器",这个是选取含有子元素或者是文本元素的元素,返回的也是一个集合元素,这里应该注意的是文本元素也算是元素的.

6)子元素过滤选择器中应该记住:only-child元素

      如果某个元素师他父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他的元素,该元素就不会被匹配,这个元素可以被我们称为"独生子女元素",如果该元素是"独生子女",那么该元素将会被匹配,如果该元素不是"独生子女"那么这个元素就不会被匹配.

PS:

1)在表单选择器中:input是选择所有的input的元素,不仅仅包含文本框,而是取出所有的<input><textarea><select>和<button>元素的内容的.

2)在写代码的时候$('')里面带有空格和不带空格是完全不同的,带有空格的时候,系统会认为使用的是后代选择器,如果不带空格的时候,就会认为使用的是过滤选择器.所以在开发中一定要注意使用空格和不使用空格之间的区别.

 

 

 

其他几个小问题总结:

1)$('ul li:gt(10):not(:last)')首先获得<ul>元素下面的索引值大于10的<li>元素的集合,然后去掉元素集合中的最后一个元素.

2)同CSS选择器一样,咱们jQuery选择器中也有类似于$('div.className')的写法,意思是说选择类名为className的div元素.

3)给超链接增加onclick()方法,而不希望锚链接将咱们转到另外一个页面的时候,我们就可以再click中加入return false来让浏览器认为没有用户没有单击该链接,从而阻止该链接的跳转.

4)show();显示隐藏的匹配元素

5)css(name,value);给元素设置样式

6)text(string);设置匹配元素的文本内容

7)filter(expr);筛选出与指定的表达式匹配的元素集合,其中expr可以是多个选择器的组合.

8)addClass('className')和removeClass('className')的功能正好相反,一个是为元素增加一个类,一个则是为元素删除指定的类.

9)jQuery.is(':visible')来判断该jQuery对象是否符合后面的selector的定义,可以用来判断流程.

10)jQuery.toggle(function1,function2)---------toggle()方法可以用来交替一组动作,toggle词的意思就是切换的意思.

 

来自 <http://blog.csdn.net/cui_angel/article/details/7988909>

jQuery的基本选择器:

1)有通过给定的id来选取一个jQuery对象----->$('#id')

2)有通过给定的类名来选取一个jQuery对象的集合--->$('.class')

3)有通过给定的元素来选取一个jQuery对象的集合--->$('element')

4)有通过通配符*号来选取该网页中的所有的jQuery对象的集合--->$('*')

5)有通过多个选择器匹配之后进行选择合并而得到jQuery对象的集合-->$('selector1,selector2..')  

实际开发中,基本选择器完成了绝大多数的工作.

jQuery层次选择器:

1)可以选取某一个元素的所有的后代元素,得到一个jQuery对象的集合--->$('prev descendant')

2)可以选取某一个元素的子辈的所有的元素,得到一个jQuery对象的集合-->$('prev>son')

3)可以选取某个元素节点之后的元素,得到一个jQuery对象的集合-->$('prev+next') 或者$('prev').next(' ')

4)可以选取某一个元素对象之后的所有的同胞元素-->$('prev~siblings)或者$('prev').nextAll('  ')

5)可以选取某一个元素对象的所有的同胞元素,不管是在前面的还是在后面的-->$('prev').siblings('')

jQuery的过滤选择器

jQuery的过滤选择器又分为多种,其中包含基本的过滤选择器,内容过滤浏览器,可见性过滤浏览器,属性过滤浏览器,子元素过滤浏览器,和表单对象属性浏览器(jQuery 之 选择器总结 下篇 附加表单选择器内容)

一.基本过滤选择器的内容

1)我们可以选取第一个元素----->:first------>$('div:first')

2)我们可以选取最后一个元素----->:last-------->$('div:last')

3)可以去除所有与给定选择器匹配的元素--->:not(selector)---->$('div:not(.class)')

4)可以选取所有下标为偶数的元素----->:even----->$('div:even')

5)可以选取所有小标为奇数的元素----->:odd------>$('div:odd')

6)可以选取索引下标等于给定的值的元素------>:eq(index)------>$('div:eq(10)')

7)可以选取索引下标小于给定值的元素--------------->:lt(index)---->$('div:lt(10)')

8)可以选取索引下标大于给定值的元素------------->:gt(index)----->$('div:gt(10)')

9)可以选择所有的标题的元素,比如说h1,h2,h3...等等------>:header------>$(':header')

10)可以选择当前正在活动的元素(执行动画的元素)----->:animated----->$('div:animated')

二.内容过滤选择器

1)可以选取含有文本为指定值的元素---->:contains(text)---------->$('div:contains(nihao)')

2)可以选取不包含子元素或者文本的空元素---->:empty-------->$('div:empty')

3)可以选取含有选择器所匹配的元素的元素----------------->:has(selector)----------->$('div:has(p)')

4)可以选择符合只有一个孩子(文本元素也算),就是有内容的元素--------->:parent--------->$('div:parent')

三.可见性过滤选择器

1)可以选取不可见的元素----------------->:hidden------------->$('div:hidden')

2)可以选取可见的元素------------------------->:visible------------>$('div:visible')

四.属性过滤选择器

1)可以选取拥有此属性的元素--------------->[attribute]------------>$('')

2)可以选择属性等于指定属性值的元素----------------->[attribute=value]------------>$('div[title=nihao]')

3)可以选择属性不等于指定值的元素---------------->[attribute!=value]------------->$('div[title!=nihao]')

4)可以选择属性值以指定值开始的元素---------------->[attribute^=value]--------->$('div[title^=ni]')

5)可以选择属性值以指定值结尾的元素----------------->[attribute$=value]---------------->$('div[title$=hao]')

6)可以选择属性值中含有指定值的元素--------------->[attribute*=value]---------------->$('div[title*=ih]')

7)可以使用属性选择器进行多次选择满足多个条件----->[selector][selector]------------->$('div[id][title*=ih]')

五.子元素过滤选择器

1)可以选取每个父元素下面第几个子元素,或者是奇偶元素---->:nth-child(index/even/odd)---->这个是从1开始计算的!

2)可以选取每一个父元素下面的第一个子元素------------>:first-child

3)可以选取每一个父元素的最后一个子元素----------->:last-child

4)如果每个元素是它父元素中唯一的子元素,那么会被匹配,否者都无--->:only-child

jQuery 之 选择器总结(下篇)

      CSS是一种比较出色的技术,上面有很多的定义规则与jQuery有异曲同工之妙,甚至怀疑jQuery就是仿照CSS的理念来设计的,有CSS开发基础的人可以非常容易的进入jQuery的领域进行开发,没有接触过CSS开发的人通过学习jQuery的学习也会学习到很多CSS的规则和设计,CSS有三种方式,分别是行间样式表,内部样式表,外部样式表,其中外部样式表的引入:<link rel=stylesheet href='.../..css' type='text/css'>这句话最好记住,省的以后开发的时候老是去查别的HTMl文件找到这句话了,能省一点时间算一点时间哦.其实主要记住css级联样式表是通过<link/>标签引入的就可以了.同CSS一样jQuery也可以得到所有的元素,只有得到文档的元素之后,才能为该元素增加行为属性,下面是CSS文档和jQuery的几个比较:

 

1)E{CSS规则}使用文档元素作为选择符---------------->$('element')

2)#ID{CSS规则}以文档元素的唯一标示符ID作为选择符------------------------>$('#id')

3)E.className{CSS规则}以文档的class作为选择符--------------------------->$('Element.className')或者$('.className')

4)E F{CSS规则}元素E的任意的后代F----------------->$('F E')元素F的所有后代-->$('F>E')元素F的儿子元素E

5)*{CSS规则}以文档的所有元素作为选择符-------->$('*')选择文档中所有的jQuery元素

 

      可以看出jQuery完全继承了CSS的风格,使用jQuery的元素我们可以非常便捷和迅速的找出特定的jQuery元素,从而可以为这些元素添加行为.我们要区别jQuery对象和DOM对象,jQuery[0]---------->可以转换成DOM对象,这样是非常有用的一个做法,比如说,我们在进行条件判断的时候,DOM对象可以直接放到if()语句块中,但是jQuery永远是个对象,不可以自动转换成boolean函数的.

      比如if(jQuery对象){.....操作.....}就会报告错误的,所以要用jQuery检查某个元素是否存在或者进行流程的控制的时候,应该使用jQuery的长度或者将jQuery对象转换成DOM对象进行判断,正确的做法是if(jQuery[0]){......}或者if(jQuery.length>0){.....}.

      几个上篇中要注意到的问题:

1)$('prev~siblings')-------$('prev').nextAll('...')------$('prev').siblings()的区别

     sibling是同胞,兄弟姐妹的意思,就是指同一辈的元素,将一个DOM理解为一棵树,里面处于同一层的就是siblings了,其中$('prev~siblings')取出的是在'prev'元素之后的所有的siblings元素,在实际的开发中,经常使用$('prev').nextAll()方法来代替上面的方法.区别主要是在$('prev').siblings()方法取出的是所有的兄弟元素,而不论是位于该prev元素的前面还是后面,另外两个方法就是只取出位于该prev元素后面的元素.

2)在基本过滤选择器中:not(selector)

      要明白:not(selector)过滤器中,selector是一个过滤器,也就可以写成选择器的形式...举一个最简单的例子,就是$('div:not(:last)')就是要取出不是最后一个的所有的div元素.

3)在基本过滤选择器中:header

      这个方法的作用就是来选取所有的header元素,也就是常说的标题元素,比如说<h1><h2><h3>等等这种标题元素,它返回的是一个集合元素,就是该页面上所有的标题的集合.

4)在内容过滤选择器中要记住:has(selector)元素的作用

     这个地方就是选取含有选择器所匹配的元素的元素,返回的是一个集合元素,因为不仅仅只有一个元素符合咱们的过滤条件.括弧中的参数也是一个selector,也就是选择器的表达式的形式.

5)在内容过滤选择器中的:parent选择器

      我们可以叫这个选择器"父母选择器",这个是选取含有子元素或者是文本元素的元素,返回的也是一个集合元素,这里应该注意的是文本元素也算是元素的.

6)子元素过滤选择器中应该记住:only-child元素

      如果某个元素师他父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他的元素,该元素就不会被匹配,这个元素可以被我们称为"独生子女元素",如果该元素是"独生子女",那么该元素将会被匹配,如果该元素不是"独生子女"那么这个元素就不会被匹配.

PS:

1)在表单选择器中:input是选择所有的input的元素,不仅仅包含文本框,而是取出所有的<input><textarea><select>和<button>元素的内容的.

2)在写代码的时候$('')里面带有空格和不带空格是完全不同的,带有空格的时候,系统会认为使用的是后代选择器,如果不带空格的时候,就会认为使用的是过滤选择器.所以在开发中一定要注意使用空格和不使用空格之间的区别.

 

 

 

其他几个小问题总结:

1)$('ul li:gt(10):not(:last)')首先获得<ul>元素下面的索引值大于10的<li>元素的集合,然后去掉元素集合中的最后一个元素.

2)同CSS选择器一样,咱们jQuery选择器中也有类似于$('div.className')的写法,意思是说选择类名为className的div元素.

3)给超链接增加onclick()方法,而不希望锚链接将咱们转到另外一个页面的时候,我们就可以再click中加入return false来让浏览器认为没有用户没有单击该链接,从而阻止该链接的跳转.

4)show();显示隐藏的匹配元素

5)css(name,value);给元素设置样式

6)text(string);设置匹配元素的文本内容

7)filter(expr);筛选出与指定的表达式匹配的元素集合,其中expr可以是多个选择器的组合.

8)addClass('className')和removeClass('className')的功能正好相反,一个是为元素增加一个类,一个则是为元素删除指定的类.

9)jQuery.is(':visible')来判断该jQuery对象是否符合后面的selector的定义,可以用来判断流程.

10)jQuery.toggle(function1,function2)---------toggle()方法可以用来交替一组动作,toggle词的意思就是切换的意思.