Jquery(4)-常规选择器(2)

最新推荐文章于 2021-06-04 03:17:24 发布

msirene

最新推荐文章于 2021-06-04 03:17:24 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/msirene/article/details/24406329

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jquey004.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <!-- <script type="text/javascript" src="js/jquery-2.1.0.js"></script> -->	
    <script type="text/javascript" src="js004/demo.js"></script>
	<link rel="stylesheet" href="js004/style.css" type="text/css" />

  </head>
  
  <body>
    <div class="box pox">div</div>
	<p class="box">p</p>
	
	
	<div class="pox">div</div>
	<p class="box">p</p>
  </body>
</html>

/*
div {
	color:red;
}
p {
	color:red;
}
strong {
	color:red;
}
#div, .p, strong {
	color:red;
}
.lia {
	color:red;
}
ul a {
	color:green;
}
ul li a {
	color:red;
}

* {
	color:red;
}
.box.pox {
	color:red;
}
.box, .pox {
	color:red;
}

*/

/*
学习要点：
2.进阶选择器
*/

/*
二．进阶选择器
在简单选择器中，我们了解了最基本的三种选择器：元素标签名、ID 和类(class)。那么
在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。
选择器 		CSS 模式 		jQuery 模式 			描述
群组选择器  span,em,.box {} 	$('span,em,.box') 		获取多个选择器的 DOM 对象
后代选择器  ul li a {} 			$('ul li a') 			获取追溯到的多个 DOM 对象
通配选择器  * {} 				$('*') 				获取所有元素标签的 DOM 对象
//群组选择器
span, em, .box { //多种选择器添加红色字体
color:red;
}
$('span, em, .box').css('color', 'red'); //群组选择器 jQuery 方式
//后代选择器
ul li a { //层层追溯到的元素添加红色字体
color:red;
}
$('ul li a').css('color', 'red'); //群组选择器 jQuery 方式
//通配选择器
* { //页面所有元素都添加红色字体
color:red;
}
$('*').css('color', 'red'); //通配选择器
目前介绍的六种选择器，在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速：
$('#box p, ul li *').css('color', 'red'); //组合了多种选择器
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，
这种使用方法效率很低，影响性能，建议竟可能少用。
还有一种选择器，可以在 ID 和类(class)中指明元素前缀，比如：
$('div.box'); //限定必须是.box 元素获取必须是 div
$('p#box div.side'); //同上
类(class)有一个特殊的模式， 就是同一个 DOM 节点可以声明多个类(class)。 那么对于这
种格式，我们有多 class 选择器可以使用，但要注意和 class 群组选择器的区别。
.box.pox { //双 class 选择器，IE6 出现异常
color:red;
}
$('.box.pox').css('color', 'red'); //兼容 IE6，解决了异常
多 class 选择器是必须一个 DOM 节点同时有多个 class，用这多个 class 进行精确限定。
而群组 class 选择器，只不过是多个 class 进行选择而已。
$('.box, .pox').css('color', 'red'); //加了逗号，体会区别
警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选
越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。比如：
$('div#box ul li a#link'); //让 jQuery 内部处理了不必要的字符串
$('#link'); //ID 是唯一性的，准确度不变，性能提升

*/
$(function () {
	
	//$('div, p, strong').css('color', 'red');
	//$('#box, .pox, strong').css('color', 'blue');
	
	//$('ul li a').css('color', 'orange');
	
	//$('*').css('color', 'blue');
	
	//alert($('*').size());
	//alert($('*')[0].nodeName);
	
	//在全局范围使用*号，会极大的消耗资源，所以不建议在全局使用
	
	//$('ul li a, ul li em, ul li strong').css('color', 'red');
	
	//$('ul li, ul li a').css('color', 'red');
	
	//$('ul li *').css('color', 'green');
	//alert($('ul li *').size());				//通配选择器一般运用在局部的环境内
	
	//$('div.box').css('color', 'red');
	
	//$('.box.pox').css('color', 'green');
	
	//$('div#box p ul li a#link');			//可以，选择器越复杂，那么字符串解析就越慢
	
	$('#link');			//单个ID不需要字符串解析，就可以获取到
	
});