码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习笔记(一)——选择器

时间:2015-11-20 23:06:08      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

常规选择器:

1、$(‘#box‘)  ID选择器,获取一个ID为box的DOM对象

2、$(‘.box‘)  CLASS选择器,获取一个class为box的DOM对象

3、$(‘div‘)   元素名选择器,获取一个元素名为div的DOM对象

进阶选择器:

1、$(‘div,#box,.box‘)  群组选择器,获取元素名为div、ID为box、class为box的DOM对象

2、$(‘div #box‘)    后代选择器,获取div中ID为box的DOM对象    另一种写法$(‘div‘).find(‘#box‘)

3、$(‘*‘)      通配选择器,获取HTML中的所有元素的DOM对象

高级选择器:(IE6不支持)

1、$(‘div > p‘)  子选择器,获取div下子元素为p的DOM对象       另一种写法$(‘div‘).children(‘p‘)

2、$(‘div + p‘)  next选择器,获取div后面第一个 同级 P元素的DOM对象    另一种写法$(‘div‘).next(‘p‘)

3、$(‘div ~ p‘)  nextAll选择器,获取div后面所有 同级 p元素的DOM对象    另一种写法$(‘div‘).nextAll(‘p‘)

4、$(‘div‘).prev(‘p‘)  获取div前面最近 同级 P元素的DOM对象

5、$(‘div‘).prevAll(‘p‘)  获取div前面所有 同级 p元素的DOM对象

6、$(‘div‘).nextUntil(‘p‘)  获取div后面所有 同级 元素对象,遇到p元素停止

7、$(‘div‘).prevUntil(‘p‘)  获取div前面所有 同级 元素对象,遇到p元素停止

8、$(‘div‘).siblings(‘p‘)    获取div前后所有 同级 p元素

属性选择器:

1、$(‘div[name = user]‘)  获取name=user的div元素的DOM对象

过滤选择器:

1、基本过滤器:

  (1)$(‘li:first‘)       选取第一个元素      另一种写法$(‘li‘).first()

  (2)$(‘li:last‘)       选取最后一个元素      另一种写法$(‘li‘).last()

  (3)$(‘li:not(#box)‘)    选取ID不是box的li元素      另一种写法$(‘li‘).not(‘#box‘)

  (4)$(‘li:even‘)      选取索引是偶数的所有元素

  (5)$(‘li:odd‘)      选取索引是奇数的所有元素

  (6)$(‘li:eq(2)‘)      选取索引等于2的元素    另一种写法$(‘li‘).eq(2)

  (7)$(‘li:gt(2)‘)      选取索引大于2的元素

  (8)$(‘li:lt(2)‘)      选取索引小于2的元素

  (9)$(‘li:header‘)    选取标题元素h1~h6

  (10)$(‘li:animated‘)  选取正在执行动画的元素

  (11)$(‘li:focus‘)    选取当前被焦点的元素

2、内容过滤器:

  (1)$(‘div:contains("text")‘)   选取内容含有“text”的div元素

  (2)$(‘div:enpty‘)        选取不包含子元素或空文本的div元素

  (3)$(div:has(#box))      选取子元素含有ID为box的div元素

  (4)$(‘div:parent‘)      选取含有子元素或文本的div元素

  (5)$(‘li‘).parent()      选择当前元素的父元素

  (6)$(‘li‘).patents()      选择当前元素的祖先元素

  (7)$(‘li‘).parentsUntil(‘div‘)  选择当前元素的祖先元素直到遇到div为止

3、可见性过滤器:

  (1)$(‘div:hidden‘)    选取隐藏的div元素

  (2)$(‘div:visible‘)    选取可见的div元素

4、子元素过滤器:

  (1)$(‘li:first-child‘)    选取每个父元素的第一个li元素

  (2)$(‘li:last-child‘)    选取每个父元素的最后一个li元素

  (3)$(‘li:only-child‘)    选取每个父元素只有一个li元素

  (4)$(‘li:nth-child(2n)‘)    选取每个父元素的第一、三、五……个li元素

5、其他方法

  .is(‘li‘)        判断是否是同一个元素,返回boolean

  .hasClass(‘.red‘)    判断是否有class值为***的元素,返回boolean

  .slice(start,end)    获取索引为start到索引为end的元素

  .filter()        

  .end()        获取当前元素的前一次状态

  .contains()      获取元素下面的所有节点

jQuery学习笔记(一)——选择器

标签:

原文地址:http://www.cnblogs.com/bishar-001/p/4982515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!