jQuery技术

jQuery学习笔记使用jQuery选择DOM元素

字号+ 作者:H5之家 来源:H5之家 2017-05-20 15:00 我要评论( )

jQuery为我们提供了强大的获取DOM元素的方式能为我们简化在DOM中选择元素的任务,例如CSS选择符、自定义选择符,通过使用这些选择符让我们在DOM中快捷而轻松地

  jQuery为我们提供了强大的获取DOM元素的方式能为我们简化在DOM中选择元素的任务,例如CSS选择符、自定义选择符,通过使用这些选择符让我们在DOM中快捷而轻松地获取元素或元素集合,并且我们应该知道:方法连缀到$()工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。

1.CSS选择符

  本的选择符包括:标签名、ID和类,下面是它们在CSS和jQuery的表示方式:

<1.1>子元素组合符(<)

  语法:parent > child

  作用:在给定的父元素下匹配所有的子元素

示例:

).addClass();

作用是:使ID为:"selected-plays"元素下的所有子元素(不包括子元素的子元素)的li标签增加一个名为:"horizontal"的Class。

<1.2>否定式伪类选择符<:not(selector)>

  语法::not(selector)

  作用:去除所有与给定选择器匹配的元素

示例:

).addClass();

作用是:ID为:"selected-plays"元素下的所有没有应用“.horizontal” Class的子元素(包括子元素的子元素)的li标签增加一个名为:"sub-level"的Class。

<1.3>属性选择符

  属性选择符是CSS选择符中特别有用的一类选择符。顾名思义,属性选择符通过HTML元素的属性选择元素,例如链接的title属性或图像的alt属性。

  语法:

  [attribute]————匹配包含给定属性的元素。

  [attribute=value]————匹配给定的属性是某个特定值的元素

  [attribute!=value]————匹配所有不含有指定的属性,或者属性不等于特定值的元素。

  [attribute^=value]————匹配给定的属性是以某些值开始的元素

  [attribute$=value]————匹配给定的属性是以某些值结束的元素

  [attribute*=value]————匹配给定的属性是以包含某些值的元素

例如,要选择带有alt属性的所有图像元素,可以使用以下代码

)

再例如,要为所有电子邮件链接添加类,使用下面的代码:

).addClass();

2.自定义选择符

  除了以上的CSS选择符之外,jQuery还添加了独有的完全不同的自定义选择符。这些自定义选择符进一步增强了已经十分强大的CSS选择符,为我们提供了在页面上选择元素的新手段。

提示:自定义选择符的效率没有浏览器原生的DOM选择符引擎效率高。

自定义选择符通常跟在一个CSS选择符后面,基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS中的伪类选择符语法相同,即选择符以冒号(:)开头。

<2.1>  :eq(index)

  语法:

  :eq(index)  index从0开始计数

  作用:匹配一个给定索引值的元素

示例:

)

作用是:查找第二行

<2.2>  :nth-child

  语法:

  :nth-child(index)   index从1开始计数(可以使用odd和even)

  作用:匹配其父元素下的第N个子或奇偶元素

示例:

HTML代码

View Code

1 <ul> 2 <li>John</li> 3 <li>Karl</li> 4 <li>Brandon</li> 5 </ul> 6 <ul> 7 <li>Glen</li> 8 <li>Tane</li> 9 <li>Ralph</li> 10 </ul>

jQuery代码:

)

结果:

1 [ <li>Karl</li>, <li>Tane</li> ]

<2.3>  :odd和:even

  语法:

  :odd  ——  匹配所有索引值为奇数的元素,从 0 开始计数

  :even  ——  匹配所有索引值为偶数的元素,从 0 开始计数

示例:

HTML代码:

1 <table> 2 <tr><td>Header 1</td></tr> 3 <tr><td>Value 1</td></tr> 4 <tr><td>Value 2</td></tr> 5 </table>

jQuery代码:

)

结果:

1 [ <tr><td>Value 1</td></tr> ]

<2.4>  :contains(text)

  语法:

  :contains(text)  text:一个用以查找的字符串,选择符区分大小写。

示例:

HTML代码:

1 <div>John Resig</div> 2 <div>George Martin</div> 3 <div>Malcom John Sinclair</div> 4 <div>J. Ohn</div>

jQuery代码:

)

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

<2.5>基于表单的选择符

  自定义选择符并不局限于基于元素的位置选择元素。比如,在操作表单时,jQuery的自定义选择符以及后来补充的CSS3选择符同样可以简化选择元素的任务。

下面是适用于表单的选择符:

选 择 符 匹  配

:input 输入字段、文本区、选择列表和按钮元素

:button 按钮元素或type属性值为button的输入元素

:enabled 启用的表单元素

:disabled 禁用的表单元素

:checked 勾选的单选按钮或复选框

:selected 选择的选项元素

我们可以通过组合使用表单选择符,可以拥有更强大的表达能力:

)//可以选择所有选中的单选按钮

)//选择所有密码输入字段和禁用的文本输入字段。

3.DOM遍历(筛选)方法

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 菜鸟的jQuery源码学习笔记(一)

    菜鸟的jQuery源码学习笔记(一)

    2017-05-20 16:00

  • jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    2017-05-20 14:11

  • jQuery学习简要笔记

    jQuery学习简要笔记

    2017-05-19 11:00

  •  Demo学习: Basic jQuery

    Demo学习: Basic jQuery

    2017-05-19 10:03

网友点评
u