JQuery之选用器

2019-05-15 作者:web前端   |   浏览(137)

一、前言

【JQuery】选择器,jquery选择器

一、前言

      上一章学习完了Js的一些基本内容,本章开始学习JQuery语法。JQuery的基础语法是:

$(selector).action()

 那么重要的两个元素,一个是选择器,另一个是行为!本章开始学习JQuery的选择器。

 

二、内容

$("*")                —— 所有元素
$("#id")              —— id="id"元素
$(".class")           —— 所有class="class"的元素
$("element")          —— 所有<element>元素
$(".class1 .class2")  —— 所有class=".class1 .class2"的元素


$("element:first")    —— 第一个<element>元素
$("element:last")     —— 最后一个<element>元素
$("element:even")     —— 所有偶数<element>元素
$("element:odd")      —— 所有奇数<element>元素


$("element:eq(index)") —— element的第index个元素
$("element:gt(num)")   —— 列出index > num的元素
$("element:lt(num)")   —— 列出index < num的元素
$("element:not(selector)")  —— 所有不为selector的元素


$(":header")   —— 所有标题元素
$(":animated") ——  所有动画元素


$("element:contains("text")")  —— 包含指定字符串的<element>元素
$(":empty")  ——  无子节点的所有元素
$("element:hidden")  —— 所有隐藏的<element>元素
$("element:visible") —— 所有可见的<element>元素


$("element1,element2,.class")  —— 匹配相应元素


$("[attribute]")         ——  所有带有attribute属性的元素
$("[attribute=value]")   ——  所有带有attribute属性等于value的元素
$("[attribute!=value]")  ——  所有带有attribute属性不等于value的元素
$("[attribute$=value]")  ——  所有带有attribute属性以value结尾的元素


$(":input")      ——  所有<input>元素
$(":text")       ——  所有type="text"的<input>元素
$(":password")   ——  所有type="password"的<input>元素
$(":radio")      ——  所有type="radio"的<input>元素
$(":checkbox")   ——  所有type="checkbox"的<input>元素
$(":submit")     ——  所有type="submit"的<input>元素
$(":reset")      ——  所有type="reset"的<input>元素
$(":button")     ——  所有type="button"的<input>元素
$(":image")      ——  所有type="image"的<input>元素
$(":file")       ——  所有type="file"的<input>元素


$(":enable")     ——  所有激活的<input>元素
$(":disable")    ——  所有禁用的<input>元素
$(":selected")   ——  所有被选取的<input>元素
$(":checked")    ——  所有被选中的<input>元素

 

一、前言 上一章学习完了Js的一些基本内容,本章开始学习JQuery语法。JQuery的基础语法是: $(selector).action(...

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


 

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

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

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

在 HTML DOM 术语中:

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

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


      上一章学习完了Js的一些基本内容,本章开始学习JQuery语法。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>
$(selector).action()

 


 那么重要的两个元素,一个是选择器,另一个是行为!本章开始学习JQuery的选择器。

 

 

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

在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中的所有元素

$("*")                —— 所有元素
$("#id")              —— id="id"元素
$(".class")           —— 所有class="class"的元素
$("element")          —— 所有<element>元素
$(".class1 .class2")  —— 所有class=".class1 .class2"的元素


$("element:first")    —— 第一个<element>元素
$("element:last")     —— 最后一个<element>元素
$("element:even")     —— 所有偶数<element>元素
$("element:odd")      —— 所有奇数<element>元素


$("element:eq(index)") —— element的第index个元素
$("element:gt(num)")   —— 列出index > num的元素
$("element:lt(num)")   —— 列出index < num的元素
$("element:not(selector)")  —— 所有不为selector的元素


$(":header")   —— 所有标题元素
$(":animated") ——  所有动画元素


$("element:contains("text")")  —— 包含指定字符串的<element>元素
$(":empty")  ——  无子节点的所有元素
$("element:hidden")  —— 所有隐藏的<element>元素
$("element:visible") —— 所有可见的<element>元素


$("element1,element2,.class")  —— 匹配相应元素


$("[attribute]")         ——  所有带有attribute属性的元素
$("[attribute=value]")   ——  所有带有attribute属性等于value的元素
$("[attribute!=value]")  ——  所有带有attribute属性不等于value的元素
$("[attribute$=value]")  ——  所有带有attribute属性以value结尾的元素


$(":input")      ——  所有<input>元素
$(":text")       ——  所有type="text"的<input>元素
$(":password")   ——  所有type="password"的<input>元素
$(":radio")      ——  所有type="radio"的<input>元素
$(":checkbox")   ——  所有type="checkbox"的<input>元素
$(":submit")     ——  所有type="submit"的<input>元素
$(":reset")      ——  所有type="reset"的<input>元素
$(":button")     ——  所有type="button"的<input>元素
$(":image")      ——  所有type="image"的<input>元素
$(":file")       ——  所有type="file"的<input>元素


$(":enable")     ——  所有激活的<input>元素
$(":disable")    ——  所有禁用的<input>元素
$(":selected")   ——  所有被选取的<input>元素
$(":checked")    ——  所有被选中的<input>元素

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> ]

 

 

web前端, 

本文由www.bifa365365.com发布于web前端,转载请注明出处:JQuery之选用器

关键词: www.bifa3653