21、jQuery选择器

最新推荐文章于 2020-08-06 17:54:47 发布

kaoa000

最新推荐文章于 2020-08-06 17:54:47 发布

阅读量843

点赞数

分类专栏： JAVA WEB

本文链接：https://blog.csdn.net/kaoa000/article/details/8875757

版权

JAVA WEB 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、CSS选择器（复习）

标签选择器     E{ CSS规则}      td{ font-size:14px;width:120px;}
ID选择器       #ID{ CSS规则}
类选择器         E.className{ CSS规则}
群组选择器    E1，E2，E3{ CSS规则}
后代选择器     E F{CSS规则}
通配选择器    *{CSS规则}

2、jQuery选择器

$()函数在很多Javascript类库中都被作为一个选择器来使用，在jQuery中也一样。其中，$("#ID")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素；

jQuery选择器的分类：

    - 基本选择器（basic）
    - 层次选择器（level）
    - 过滤选择器（filter）
    - 表单选择器（form）

基本选择器：

（1）#id ——根据给定的ID匹配一个元素，返回单个元素（如果元素存在）,如果不存在，则返回一个空的jQuery对象

以下的例子请注意结果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">

$(document).ready(function()
{
	alert($("#test1").length);
});
</script>

 </head>

 <body>
  <a id="test1" href="http://www.baidu.com">baidu</a>
    <a id="test1" href="http://www.yahoo.com">yahoo</a>
 </body>
</html>

结果弹出来的是1，对于ID，jQuery认为是唯一的，找到一个，后面就忽略了，所以ID选择器返回单个元素。

$("#test1")，对于jQuery元素有一个text（）方法，有一个html（）方法，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">

$(document).ready(function()
{
	alert($("#test1").text());
	alert($("#test1").html());
});
</script>

 </head>

 <body>
  <a id="test1" href="http://www.baidu.com"><b>baidu</b></a>
    <a id="test1" href="http://www.yahoo.com">yahoo</a>
 </body>
</html>

text（）方法只返回文本baidu，而html（）方法返回<b>baidu</b>，text（）相当于dom中的innerText属性，html（）相当于innerHTML属性，

$("#test1").text() == $("#test1")[0].innerText

$("#test1").html() == $("#test1")[0].innerHTML

（2）.class ，根据给定的类名匹配元素，返回集合元素，$(".test")——根据css的class属性来返回一个集合，无论该css类是否存在，只要定义在元素中就能被jQuery查询到

（3）element ，根据给定的元素名匹配元素，返回集合元素，$("p")

（4）* ，匹配所有元素，返回集合元素，$("*")

（5）selector1，selector2，...，selectorN ，将每一个选择器匹配到的元素合并后一起返回，返回集合元素，$("div,span,p.myClass")

层次选择器：

（1）$("ancestor descendant") ，选取ancestor元素里的所有descendant（后代）元素，返回集合元素，$("div span")选取<div>里的所有的<span>元素

（2）$("parent > child ")，选取parent元素下的child（子）元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素，返回集合元素，$("div > span")选取<div>元素下元素名是<span>的子元素。

（3）$("prev + next")，选取紧接在prev元素后的next元素，返回集合元素，$(".one + div ")选取class为one的下一个<div>元素

（4）$("prev ~ siblings")，选取prev元素之后的所有siblings元素，返回集合元素，$("#two ~ div")选取idweitwo的元素后面的所有<div>兄弟元素

等价关系：

选择器 $(".one + div") 等价于方法：$(".one").next("div");

选择器 $("#prev ~ div") 等价于方法： $("#prev").nextAll("div");

过滤选择器：

- 基本过滤

（1）：first ，选取第一个元素，返回单个元素，$("div :first")选取所有<div>元素中的第1个

（2）：last，选取最后一个元素，返回单个元素，$("div :last")选取所有<div>元素中的最后一个<div>元素

（3）：not（selector），去除所有与给定选择器匹配的元素，集合元素，$("input :not(.myClass)")

（4）：even ，选取索引是偶数的所有元素，索引从0开始，集合元素，$("input:even")

（5）：odd，选取索引是奇数的所有元素，索引从0开始，集合元素，$("input:odd")

（6）：eq（index），选取索引等于index的元素（index从0开始），单个元素，$("input:eq（1）")

（7）：gt（index），选取索引大于index的元素（index从0开始），集合元素，$("input:gt（1）")，大于1而不包括1

（8）：lt（index），选取索引小于index的元素（index从0开始），集合元素，$("input:lt（1）")，小于1而不包括1

（9）：header ，选取所有的标题元素，如h1，h2，h3等，集合元素，$(":header")

（10）：animated，选取当前正在执行动画的所有元素，集合元素，$("div:animated")

- 内容过滤

（1）：contains（text），选取含有文本内容为“text”的元素，集合元素，$("div:contains('我')"),选取含有文本我的<div>元素

（2）：empty ，选取不包含子元素或者文本的空元素，集合元素，${"div:empty")

（3）：has（selector），选取含有选择器所匹配的元素的元素，集合元素，$("div:has(p)")

（4）：parent，选取含有子元素或者文本的元素，集合元素，$("div:parent")

$() .ready()= $(document).ready() = $(function())

-可见性过滤

（1）：hidden ，选取所有不可见的元素，集合元素，$(":hidden")选取所有不可见元素，包括<input type="hidden" />，<div style="display:none">和<div style="visibility:hidden>等，如果只想选取<input>元素，可以使用$("input:hidden")

（2）：visible，选取所有课件的元素，集合元素，$("div:visible")

-属性过滤

（1）[attribute]，选取拥有此属性的元素，

（2）[attribute=value]，选取属性值为value的元素

（3）[attribute!=value]，选取属性值不等于value的元素

（4）[attribute^=value]，选取属性值以value开始的元素

（5）[attribute$=value]，选取属性值以value结束的元素

（6）[attribute*=value]，选取属性的值含有value的元素

（7）[selelctor1][selector2][selectorN]，用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围

-子元素过滤

（1）：nth-child(index/even/odd/equation)，选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）

（2）：first-child，选取每个父元素的第一个子元素

（3）：last-child，选取每个父元素的最后一个子元素

（4）：only-child，如果某个元素是他父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配

- 表单对象属性过滤

（1）：enabled，选取所有可用元素

（2）：disabled，选取所有不可用元素

（3）：checked，选取所有被选中的元素（单选框，复选框）

（4）：selected，选取所有被选中的选项元素（下拉列表）

- 表单选择器

（1）：input，选取所有的<input>、<textarea>、<select>和<button>元素

（2）：text，选取所有的单行文本框

（3）：password，选取所有的密码框

（4）：radio，选取所有的单选框

（5）：checkbox，选取所有的多选框

（6）：submit，选取所有的提交按钮

（7）：image，选取所有的图像按钮

（8）：reset，选取所有的重置按钮

（9）：file，选取所有的上传按钮

（10）：button，选取所有的按钮

（11）：hidden，选取所有的不可见元素

3、注意事项：

（1）$('input[name="myCheck"]:checked')，对于属性过滤器，方括号[]前与标签名之间没有空格

（2）注意$("input :checked")与$("input checked")区别

（3）$(".test :hidden")选取class为test的元素当中的隐藏子元素； $(".test:hidden")选择隐藏的class为test的元素

kaoa000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21、jQuery选择器

1、CSS选择器（复习）标签选择器 E{ CSS规则} td{ font-size:14px;width:120px;}ID选择器 #ID{ CSS规则}类选择器 E.className{ CSS规则}群组选择器 E1，E2，E3{ CSS规则}后代选择器 E F{CSS规则}通配选择器 *{CS
复制链接

扫一扫