属于层次选择器的有哪些

jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器

千次阅读 2016-10-18 10:18:16

jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器



jQuery选择器的格式： $("选择器")                                                                                                                                  


一、基础选择器


1、基本选择器                                                                                                                                                                 



使用范围：在jQuery中，基本选择器是使用最频繁的选择器。



（1）元素选择器；

（2）id选择器；

（3）class选择器；

（4）群组选择器；

（5）*选择器


（1）元素选择器；
语法：$("元素名")
<span style="font-family:Arial;"><span style="color:#1a1a1a;"><pre name="code" class="java"><!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
          </span><strong style="background-color: rgb(255, 255, 255);"><span style="color:#1a1a1a;"> </span><span style="color:#ff0000;"> </span>$("div").css("color","red");   $("span").css("color","yello"); </strong><span style="background-color: rgb(255, 255, 255);"><strong>  </strong> //方法是jQuery操作CSS样式的方法因此使用点运算符来调用:$("div").css()</span><span style="color:#1a1a1a;">
        })
    </script>
</head>
<body>
    <div>我爱简简单单的</div>
    <span>我爱简简单单的</span>
</body>
</html></span></span>

在浏览器预览效果如下：
注意：CSS选择器和jQuery选择器的转换关系：只需要把CSS选择器的写法套进$("")中，就变成了jQuery选择器

（2）id选择器；

语法：$("#id名")
说明：id名前面必须加上前缀“#”，否则该选择器无法生效
<span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
                        $("div").css("color","red");
			$("span").css("color","yello");
			</span><span style="color:#ff0000;">$("#a").css("color","blue");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
    <div>我爱简简单单的</div>
 </span><span style="color:#ff0000;">   <div id="a">我爱简简单单的</div></span><span style="color:#1a1a1a;">
    <span>我爱简简单单的</span>
</body></span></span>
在浏览器预览效果如下：




（3）class选择器；

语法：$(".类名")
说明：id名前面必须加上前缀“.”，否则该选择器无法生效
<span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            $("div").css("color","red");
			$("span").css("color","yello");
			$("#a").css("color","blue");
			</span><span style="color:#ff0000;">$(".b").css("color","green");</span><span style="color:#1a1a1a;">
        })
	</script></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei; font-size: 15px;">
</span><span style="font-size:12px;"><span style="color: rgb(26, 26, 26); font-family: SimHei;"></head>
<body>
    <div>我爱简简单单的</div>
    <div id="a">我爱简简单单的</div>
    <span>我爱简简单单的</span>
    </span><span style="font-family: SimHei;"><span style="color:#ff0000;"><div class="b">我爱简简单单的</div></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei;">
</body>
</html></span></span>
在浏览器预览效果如下：





（4）群组选择器；

语法：$("选择器1,选择器2,...,选择器n")
说明：选择器之间必须用英文逗号“,”隔开，否则该选择器无法生效
<span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            </span><span style="color:#ff0000;">$("div,span,#a,.b").css("color","green");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
    <div>我爱简简单单的</div>
    <div id="a">我爱简简单单的</div>
    <span>我爱简简单单的</span>
    <div class="b">我爱简简单单的</div>
</body>
</html></span></span>
在浏览器预览效果如下：




（5）*选择器
语法：*{padding:0;margin:0;}
说明：*选择器，也称为全选选择器，用于选择所有的元素。在CSS中，常用*选择器去除默认的padding和margin的值
<span style="font-family:Arial;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
           <span style="color:#ff0000;"> $("#c *").css("color","green");</span>
        })
	</script>

</head>
<body>
<span style="color:#ff0000;"><div id="c"></span>
    <div>我爱简简单单的</div>
    <div id="a">我爱简简单单的</div>
    <span>我爱简简单单的</span>
    <div class="b">我爱简简单单的</div>
<span style="color:#ff0000;"></div></span>
</body>
</html></span>

在浏览器预览效果如下：


CSS规定了如下优先级：
行内样式->id样式->class样式->标记样式

2、层次选择器                                                                                                                                                                 


（1）后代选择器
语法：$("M N")
说明：选择M元素内部后代N元素，包括所有后代元素。



（2）子代选择器

语法：$("M>N")
说明：选择M元素内部某一个子元素，只限子元素。


（3）兄弟选择器

语法：$("M～N")
说明：选择M元素后面（不包括前面）的（所有的）某一类兄弟元素N。


（4）相邻选择器

语法：$("M+N")
说明：选择M元素后面（不包括前面）的（相邻的）某一类兄弟元素N。
<span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <style type="text/css">
		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
        ul{list-style-type:none;}/*去除列表项默认符号*/
		li{height:30px;}/*去除列表项默认符号*/
	</style>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            </span><span style="color:#ff0000;">$("li*li").css("border-top","3px solid green");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
	<ul>
    	<li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
    </ul>
</body>
</html></span></span>
在浏览器预览效果如下：

分析：

   
  $("li+li")使用的是相邻选择器，表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素，所以对于最后一个li元素，它是没有下一个li元素可以选取的。$("li+li").css("border-top", "2px solid red")达到在两两li元素之间添加一个边框的效果。这是一个非常棒的技巧，在实际开发中如果我们想要在两两元素之间实现什么效果，我们经常会用到这个技巧！大家请一定不要浪费这个强大的技巧！



3、属性选择器                                                                                                                                                                 


使用范围：在jQuery中，属性选择器最常见于表单操作。



选择器
说明
$("selector[attr]")
选择包含给定属性的元素
$("selector[attr='value']")
选择给定的属性是某个特定值的元素
$("selector[attr != 'value']")
选择所有含有指定的属性，但属性不等于特定值的元素
$("selector[attr *= 'value']")
选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']")
选择给定的属性是以某些值开始的元素（比较少用）
$("selector[attr $= 'value']")
选择给定的属性是以某些值结尾的元素（比较少用）
$("selector[selector1][selector2]…[selectorN]")
复合属性选择器，需要同时满足多个条件时使用






















注：selector指的是选择器，attr指的是属性（attribute），value指的是属性值。



<span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <style type="text/css">
		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
        ul{list-style-type:none;}/*去除列表项默认符号*/
		li{height:30px;}/*去除列表项默认符号*/
	</style>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
           <span style="color:#ff0000;"> $("input[type='checkbox']").attr("checked","checked");</span>//<span style="color: rgb(26, 26, 26); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px; text-indent: 30px;">表示把所有复选框的checked属性值设置为checked（即被选中）。</span>
        })
	</script>

</head>
<body>
<br>
	<h3>请选择以下需要购买的蔬菜</h3><br>
    <div id="list">
    	<input type="checkbox" />黄瓜
        <input type="checkbox" />西红柿
        <input type="checkbox" />土豆
        <input type="checkbox" />茄子
    </div>
</body>
</html></span>



在浏览器预览效果如下：

拓展：
$("#a")等价于$("[id='a']")
$(".a")等价于$("[class='a']")

收起

展开全文

基本选择器属性选择器

jQuery 层次选择器，属性选择器

千次阅读 2016-12-01 10:40:25

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")

jQuery层次选择器



$("div span") 选取<div>里的所有<span>元素
$("div >span") 选取<div>元素下元素名是<span>的子元素
$("#one +div") 选取id为one的元素的下一个<div>同辈元素    等同于$(#one).next("div")
$("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素    等同于$(#one).nextAll("div")
$(#one).siblings("div") 获取id为one的元素的所有<div>同辈元素（不管前后）
$(#one).prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素
所以 获取元素范围大小顺序依次为：
$(#one).siblings("div")>$("#one~div")>$("#one +div")  或是
$(#one).siblings("div")>$(#one).nextAll("div")>$(#one).next("div")

jQuery属性选择器



1. [attribute]用法        
    定义：匹配包含给定属性的元素
    $("div[id]").addClass("highlight"); //查找所有含有ID属性的div元素
2. [attribute=value]用法
    定义：匹配给定的属性是某个特定值的元素
    $("input[name='basketball']").attr("checked",true);//name属性值为basketball的input元素选中 

3. [attribute!=value]用法
    定义：匹配给定的属性是不包含某个特定值的元素
    $("input[name!='basketball']").attr("checked",true);   //name属性值不为basketball的input元素选中
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute^=value]用法
    定义：匹配给定的属性是以某些值开始的元素
    $("input[name^='foot']").attr("checked",true);  //查找所有 name 以 'foot' 开始的 input 元素

5. [attribute$=value]用法
    定义：匹配给定的属性是以某些值结尾的元素
    $("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 结尾的 input 元素

6. [attribute*=value]用法
    定义：匹配给定的属性是以包含某些值的元素
    $("input[name*='sket']").attr("checked",true);  //查找所有 name 包含 'sket' 的 input 元素

7. [selector1][selector2][selectorN]用法
    定义：复合属性选择器，需要同时满足多个条件时使用
    $("input[id][name$='ball']").attr("checked",true);  //找到所有含有 id属性，并且它的 name属性是以 ball结尾的


最近在sd工作比较忙，有空再把jq的绑定bind（），和帮助提示文档捣鼓一下

如果有什么问题或建议，欢迎留言 ^^ ……

收起

展开全文

jquery 选择器

WEB前端 -- 属性选择器与层次选择器

千次阅读 2018-03-05 08:26:42

1.层次选择器层次选择器选择器CSS模式JQuery模式描述后代选择器ul li a{}$('ul li a')获取追溯到的多个DOM对象子选择器div > p{}$('div p')只获取子类节点的多个DOM对象next选择器div + p{}$('div + p')只...

1.层次选择器
层次选择器选择器 CSS模式 JQuery模式 描述
后代选择器 ul li a{} $('ul li a') 获取追溯到的多个DOM对象
子选择器 div > p{} $('div p') 只获取子类节点的多个DOM对象
next选择器 div + p{} $('div + p') 只获取某个节点后一个同级DOM对象
nextAll选择器 div ~p{} $('div ~ p') 获取某节点后面所有同级DOM对象
在层次选择器中，除后代选择器外，其他三种高级选择器不支持IE6，而JQuery兼容IE6。
//后代选择器
$('#box p').css('color','red');//全兼容
//JQuery为后代选择器提供一个等价find()方法
$('#box').find('p').css('color','red');//与后代选择器等价

//子选择器
#box > p{          //IE6不支持
  color:red;
}
$('#box>p').css('color','red');//兼容IE6

//JQuery为子选择器提供了一个等价的children()方法
$('#box').children().css('color','red');//与子选择器等价
next相邻的后一个（即紧跟其后的第一个元素），nextAll是后N个
//nextAll选择器（后面所有同级节点）
#box~p{         //IE6不支持
  color:red;
}
$('#box~p').css('color','red');      //兼容IE6

//JQuery为nextAll选择器提供了一个等价的方法 ：nextAll();
$('#box').nextAll('p').css('color','red');  //与nextAll()选择器等价
层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以呗选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。
理论上，JQuery提供的方法：find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有一定的差异，高级选择器是通过“Sizzle引擎”解析字符串来获取节点对象，而JQuery提供的方法则是通过querySelectorAll()操作直接得到的（IE6/7不支持）。但这种快慢的差异，对于客户端脚本来说没有太大的实用性，并且速度的差异还要取决于浏览器和选择的元素内容。
在find()、next()、nextAll()和children()这4种方法中，若不传参数，就相当于传递了“*”，即任何节点，不建议这样做。因为这样做不但影响性能，而且由于精准度不佳，可能在复杂的HTML结构时产生怪异的结果。
$('#box').next();//相当于$('#box').next('*');
2.属性选择器
属性选择器CSS模式 JQuery模式 描述
a[title] $('a[title]') 获取具有这个属性的DOM对象
a[title=num1] $('a[title=num1]') 获取具有title属性且属性值为num1的DOM对象
a[title^=num] $('a[title^=num]') 获取具有title属性且开头属性值匹配的DOM对象
a[title|=num] $('a[title|=num]') 获取具有title属性且等于属性值或开头属性值匹配后面跟一个“-”号的DOM对象
a[title$=num] $('a[title$=num]') 获取具有title属性且结尾属性值匹配的DOM对象
a[title!=num] $('a[title!=num]') 获取具有title属性且不等于属性值的DOM对象
a[title~=num] $('a[title~=num]') 获取具有title属性且属性值是以一个空格分割的列表，其中包含属性之的DOM对象
a[title*=num] $('a[title*=num]') 获取具有title属性且属性值含有一个指定字符串的DOM对象
a[bbb][title=num1] $('a[bbb][title=num1]') 获取具有title属性且属性值匹配的DOM对象
注：属性选择器也不支持IE6，所以在CSS中如果要兼容低版本，那么也是非主流的，而JQuery不需要考虑这个问题。

层次选择器
选择器	CSS模式	JQuery模式	描述
后代选择器	ul li a{}	$('ul li a')	获取追溯到的多个DOM对象
子选择器	div > p{}	$('div p')	只获取子类节点的多个DOM对象
next选择器	div + p{}	$('div + p')	只获取某个节点后一个同级DOM对象
nextAll选择器	div ~p{}	$('div ~ p')	获取某节点后面所有同级DOM对象

属性选择器
CSS模式	JQuery模式	描述
a[title]	$('a[title]')	获取具有这个属性的DOM对象
a[title=num1]	$('a[title=num1]')	获取具有title属性且属性值为num1的DOM对象
a[title^=num]	$('a[title^=num]')	获取具有title属性且开头属性值匹配的DOM对象
a[title\|=num]	$('a[title\|=num]')	获取具有title属性且等于属性值或开头属性值匹配后面跟一个“-”号的DOM对象
a[title$=num]	$('a[title$=num]')	获取具有title属性且结尾属性值匹配的DOM对象
a[title!=num]	$('a[title!=num]')	获取具有title属性且不等于属性值的DOM对象
a[title~=num]	$('a[title~=num]')	获取具有title属性且属性值是以一个空格分割的列表，其中包含属性之的DOM对象
a[title*=num]	$('a[title*=num]')	获取具有title属性且属性值含有一个指定字符串的DOM对象
a[bbb][title=num1]	$('a[bbb][title=num1]')	获取具有title属性且属性值匹配的DOM对象

收起

展开全文

属性选择器

jQuery层次选择器

千次阅读 2018-07-28 12:13:51

层次选择器 通过DOM元素之间的结构（层次关系）来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等。 层次选择器 选择器描述返回示例 $("ancestor descendant") 选取...

层次选择器

通过DOM元素之间的结构（层次关系）来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等。

层次选择器
	选择器
			描述
			返回
			示例
		
$("ancestor descendant")
			选取ancenstor元素中所有descendant（后代）元素，不仅仅是直接子元素
			集合元素
			$("div span")选取<div>里的所有<span>元素
		
$("parent>child")
			选取parent元素下的child（子）元素，直接子元素，例如：不包括子元素中的子元素
			集合元素
			$("div>span")选取<div>元素下名为<span>的元素
		
$("prev+next")
			选取紧接在prev元素后的next元素
			集合元素
			$(".one+div")选取class为one的下一个<div>元素
		
$("prev~siblings")
			选取prev元素之后所有siblings元素
			集合元素
			$("#two~div")选取id为two的元素后面的所有<div>同辈与阿奴
		
 

 

 

 

 

 

 

 

其中：$("prev+next")选择器是选取prev元素后的第一个同辈next元素，可以用next()方法来代替，$("prev~siblings")选择器是选取prev元素后所有的siblings同辈元素，可以用nextAll()方法代替。

$(".one+div")  ------------>  $(".one").next("div");

$(".one~div")  ------------>  $(".one").nextAll("div");

层次选择器示例

层次选择器示例
	功能
			代码
			执行结果
		
改变<body>内所有<div>的背景
			
			$("body div")

			.css("backgroundColor","#eee");
			
			
		
改变<body>内子元素<div>的背景
			
			$("body>div")

			.css("backgroundColor","#eee");
			
			
		
改变id为one的下一个<div>同辈元素的背景
			
			$("#one+div")

			.css("backgroundColor","#eee");
			
			
		
改变id为two的元素后面所有的同辈元素的背景
			
			$("#one~div")

			.css("backgroundColor","#eee");

层次选择器
选择器	描述	返回	示例
$("ancestor descendant")	选取ancenstor元素中所有descendant（后代）元素，不仅仅是直接子元素	集合元素	$("div span")选取<div>里的所有<span>元素
$("parent>child")	选取parent元素下的child（子）元素，直接子元素，例如：不包括子元素中的子元素	集合元素	$("div>span")选取<div>元素下名为<span>的元素
$("prev+next")	选取紧接在prev元素后的next元素	集合元素	$(".one+div")选取class为one的下一个<div>元素
$("prev~siblings")	选取prev元素之后所有siblings元素	集合元素	$("#two~div")选取id为two的元素后面的所有<div>同辈与阿奴

层次选择器示例
功能	代码	执行结果
改变<body>内所有<div>的背景	$("body div") .css("backgroundColor","#eee");
改变<body>内子元素<div>的背景	$("body>div") .css("backgroundColor","#eee");
改变id为one的下一个<div>同辈元素的背景	$("#one+div") .css("backgroundColor","#eee");
改变id为two的元素后面所有的同辈元素的背景	$("#one~div") .css("backgroundColor","#eee");

收起

展开全文

CSS系列之高级选择器/层次选择器/结构伪类选择器/属性选择器
千次阅读 2019-06-19 23:05:41
01 层次选择器 a. 后代选择器格式： E F { 声明；} 应用：获取E元素下所有与F匹配的元素 b. 子选择器格式：E>F{声明；} 应用：只获取E下面的与F匹配的第一层子元素 c.相邻兄弟选择器格式：E+F{声明；} ...
收起
JavaWeb
css3选择器--层次选择器
千次阅读 2017-06-01 16:29:37
层次选择器：通过html的dom元素间的层次关系获取元素，主要层次关系有后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器： E F，作用的是选择元素的后代元素。包括子元素、孙辈元素等。（常用） div div{ color...
收起
css3选择器--基本选择器，层次选择器，属性选择器
万次阅读 2016-12-05 23:35:27
而class属性本身没有语义，它纯粹是用来为CSS服务的，属于多余属性，并没把样式和元素绑定起来，一个CSS类选择器，文本框可以使用，下拉框也可以使用，甚至按钮也可以使用，这样其实非常混乱，修改时就不方便，所以...
收起
css3
css层次选择器的理解
千次阅读 2017-10-15 15:43:45
1、css后代选择器 （1）语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。（2）语法：...
收起
css jQuery
层次选择器的4种选择器列表
千次阅读 2019-06-21 09:16:52
选择器 描述返回示例 $("ancestor descendant") 选取ancestor元素里的所有descendant（后代）元素集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > ...
收起
jquery
CSS3选择器——2、层次选择器
千次阅读 多人点赞 2015-02-14 17:49:46
CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; margin: 0 auto; } div{ margin: 5px; padding: 5px; border: 1px solid #ccc; ...
收起
css3
jQuery 层次选择器
千次阅读 2010-04-07 13:38:00
层次选择器： 层次选择器是通过元素之间的层次关系来获取特定的元素，如后代元素、子元素、相邻元素、和兄弟元素等后代元素 ancestor descendant 获取ancestor下的descendant元素集合元素 $("div span")选取...
收起
jquery div class
jquery类选择器／基于下标的选择器／层次选择器的使用场景
千次阅读 2016-10-20 09:18:59
一直以来，认为jquery在选择器上多此一举，既然有了id选择器，那么为什么还要费劲去搞各种其它选择器，id选择器难道不是万能的吗，难道不是最简单的吗？说到最简单，有可能是当之无愧，但是要说万能，确实名不副实；...
收起
jquery class
jq中多条件选择器,相对选择器,层次选择器的区别
千次阅读 2016-04-16 01:56:19
一、Jquery常用的过滤选择器如下所示： 1、:first，选取第一个元素，比如$("div:first")选取第一个div元素 2、:last，选取最后一个元素，比如$("div:last")选取最后一个div元素 3、:not(选择器)，...
收起
【jquery】jquery选择器有哪些
千次阅读 2020-03-25 16:05:06
4大类：基本选择器、层次选择器、过滤选择器、表单选择器目录 1、jquery基本选择器 2、jquery层次选择器 3、jquery过滤选择器 4、jquery表单选择器 1、jquery基本选择器基本选择器是JQuery最常用的选择器，...
收起
jQuery学习之基本选择器、层次选择器和并且选择器
千次阅读 2017-08-02 10:56:55
层次选择器 function f1 () { //派生选择器(父子关系)--不考虑层次 //$('div span').css('color','red'); //直接子元素选择器(父子关系)--考虑层次 //$('div >span').css('background-color','...
收起
css四个层次选择器
千次阅读 2018-10-23 14:38:37
1.后代选择器 选中parent元素内部后代所有 n 元素。 parent n{} 2.子代选择器 选中 parent 元素内部的子元素 n parent>n{} 3.兄弟选择器 选中 brother 元素后面的所有某一类兄弟元素 n。 brother~n{} 4....
收起
jQuery中常用的选择器 （常用的选择器有哪些）
千次阅读 2019-12-04 21:52:21
一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。 1、ID选择器 #id 描述：根据给定的id匹配一个元素，返回单个元素（注：在网页中，id名称不能重复...
收起
CSS选择器有哪些？哪些属性可以继承？
千次阅读 2018-11-19 12:17:40
CSS选择器有哪些？选择符类型例子例子描述通用选择器 * 类别选择器(.class) .intro 选择class=”intro”的所有元素 ID选择器(#id) #first 选择id=”first”的所有元素标签选择器(element) div 选择...
收起
jquery层次选择器：空格＞ next + nextAll ~ siblings
千次阅读 2017-08-28 10:12:07
jquery系列教程1-选择器全解jquery层次选择器jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在...
收起
jquery next siblings
jQuery的选择器分类都有哪些？
千次阅读 2020-12-18 20:26:31
根据所获取页面中元素的不同，可以将jQuery选择器分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器。其中在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、...
收起
jquery javascript html
jQuery基础教程之强大的选择器（层次选择器）
千次阅读 2012-03-31 13:52:41
无论何时，我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。而JQuery选择器又具有这样的特点：隐式迭代 $(“选择器”).css(“background-color”,”red”)则是为这组元素中每个...
收起
jquery div class jquery插件
JQuery三大选择器：（基本+层次+表单）选择器
千次阅读 2011-09-09 17:12:31
1.基本选择器：主要通过HTML标签元素或者ID,Class属性来选择2.层次选择器：主要通过DOM元素层次关系来获取 3.过滤选择器：以特定的过滤规则来筛选DOM元素。过滤规则与CSS中的伪类选择器语法相同。选择器
收起
jquery class html css
JQuery选择器跨frame和层次选择
千次阅读 2013-06-03 16:01:54
选择器已经选出元素然后在该元素中继续选择合适的元素： $(window.frames[0].document).find(".styleClass") 上面选出在第一个iframe下的类名为styleClass的所有元素。同时注意跨frame的元素选择！
收起

jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器

jQuery 层次选择器，属性选择器

jQuery层次选择器

jQuery属性选择器

最近在sd工作比较忙，有空再把jq的绑定bind（），和帮助提示文档捣鼓一下

WEB前端 -- 属性选择器与层次选择器

jQuery层次选择器

CSS系列之高级选择器/层次选择器/结构伪类选择器/属性选择器

css3选择器--层次选择器

css3选择器--基本选择器，层次选择器，属性选择器

css层次选择器的理解

层次选择器的4种选择器列表

CSS3选择器——2、层次选择器

jQuery 层次选择器

jquery类选择器／基于下标的选择器／层次选择器的使用场景

jq中多条件选择器,相对选择器,层次选择器的区别

【jquery】jquery选择器有哪些

jQuery学习之基本选择器、层次选择器和并且选择器

css四个层次选择器

jQuery中常用的选择器（常用的选择器有哪些）

CSS选择器有哪些？哪些属性可以继承？

jquery层次选择器：空格＞ next + nextAll ~ siblings

jQuery的选择器分类都有哪些？

jQuery基础教程之强大的选择器（层次选择器）

JQuery三大选择器：（基本+层次+表单）选择器

JQuery选择器跨frame和层次选择

属于层次选择器的有哪些

选择器	说明
$("selector[attr]")	选择包含给定属性的元素
$("selector[attr='value']")	选择给定的属性是某个特定值的元素
$("selector[attr != 'value']")	选择所有含有指定的属性，但属性不等于特定值的元素
$("selector[attr *= 'value']")	选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']")	选择给定的属性是以某些值开始的元素（比较少用）
$("selector[attr $= 'value']")	选择给定的属性是以某些值结尾的元素（比较少用）
$("selector[selector1][selector2]…[selectorN]")	复合属性选择器，需要同时满足多个条件时使用

jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器

jQuery 层次选择器，属性选择器

jQuery层次选择器

jQuery属性选择器

最近在sd工作比较忙，有空再把jq的绑定bind（），和帮助提示文档捣鼓一下

WEB前端 -- 属性选择器与层次选择器

jQuery层次选择器

CSS系列之高级选择器/层次选择器/结构伪类选择器/属性选择器

css3选择器--层次选择器

css3选择器--基本选择器，层次选择器，属性选择器

css层次选择器的理解

层次选择器的4种选择器列表

CSS3选择器——2、层次选择器

jQuery 层次选择器

jquery类选择器／基于下标的选择器／层次选择器的使用场景

jq中多条件选择器,相对选择器,层次选择器的区别

【jquery】jquery选择器有哪些

jQuery学习之基本选择器、层次选择器和并且选择器

css四个层次选择器

jQuery中常用的选择器 （常用的选择器有哪些）

CSS选择器有哪些？哪些属性可以继承？

jquery层次选择器：空格 ＞ next + nextAll ~ siblings

jQuery的选择器分类都有哪些？

jQuery基础教程之强大的选择器（层次选择器）

JQuery三大选择器：（基本+层次+表单）选择器

JQuery选择器跨frame和层次选择

属于层次选择器的有哪些

jQuery中常用的选择器（常用的选择器有哪些）

jquery层次选择器：空格＞ next + nextAll ~ siblings