欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery之选择器

程序员文章站 2022-05-03 09:36:54
选择器允许您对元素组或单个元素进行操作。 JQuery是一种十分优秀的JS框架,能极大地方便开发者操纵页面各种元素的行为,提高开发javascript效率。而相比于JS,JQuery中提供了十分强大的选择器,使用起来类似于CSS中的选择器,简单而又便利。 jQuery 元素选择器和属性选择器允许通过 ......

选择器允许您对元素组或单个元素进行操作。


 

JQuery是一种十分优秀的JS框架,能极大地方便开发者操纵页面各种元素的行为,提高开发javascript效率。而相比于JS,JQuery中提供了十分强大的选择器,使用起来类似于CSS中的选择器,简单而又便利。

jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中:

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

下面我们介绍在JQuery中常用的几种选择器。


引用:

要想使用JQuery要先引入JQuery库

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title></title>
 5         <script src="JS/jquery-3.1.1.min.js"><br />
 6             //导入的JQuery库,不写内容!!
 7         </script>
 8         <script type="text/javascript">
 9             
10         </script>
11     </head>
12     
13     <body>
14         
15     </body>
16 </html>

 


 

选择器的使用语法:$(选择器)

在JQuery中使用“$”来代表JQuery中的一个回传函数。“()”中的内容就是使用的选择器。

1.元素选择器

通过id属性,class属性,或元素名来选择DOM对象,并封装成jQuery对象数组。

这几种选择器语法简单,选择方便。

例如id选择器:

JQuery代码:

$("#div1");

HTML代码:

1 <body>
2     <div id="div1"></div>
3     <div></div>
4     <div></div>
5     <div></div>
6 </body>

会返回#div1中的内容,这种使用方法适用于选取DOM中的所有元素

2.层次选择器

选择子元素、兄弟元素等,有如下四种:

①ancestor descendant:

在给定的祖先元素下匹配所有的后代元素

ancestor:祖先元素  descendant:后代元素

② parent > child:

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

parent:父元素  child:子元素

③prev + next:

匹配所有紧接在 prev 元素后的 next 元素,例如:

JQuery代码:

$("label + input")

HTML代码:

 1 <body>
 2     <form>
 3         <label>Name:</label>
 4         <input name="name" />
 5         <fieldset>
 6             <label>Newsletter:</label>
 7             <input name="newsletter" />
 8         </fieldset>
 9     </form>
10     <input name="none" />
11 </body>

返回结果:

[ <input name="name" />, <input name="newsletter" /> ]

④prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素,例如:

JQuery代码:

$("form ~ input")

HTML代码:

1 <form>
2   <label>Name:</label>
3   <input name="name" />
4   <fieldset>
5       <label>Newsletter:</label>
6       <input name="newsletter" />
7  </fieldset>
8 </form>
9 <input name="none" />

返回结果:

[ <input name="none" /> ]

3.过滤选择器

按照一定的规则来进行过滤的选择,均使用“:”来添加过滤条件。

在使用过滤选择器时,语法格式为$("元素:选择器")

①:eq(index):

匹配一个给定索引值的元素,这个是我们最常使用的选择器,传入的index是元素的序号。

例如:

JQuery代码:

$("tr:eq(1)")

HTML代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

返回结果:

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