a毛 jquery 学习记 3 常规选择器(2)

最新推荐文章于 2020-07-30 08:51:00 发布

一平米

最新推荐文章于 2020-07-30 08:51:00 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery学习

本文链接：https://blog.youkuaiyun.com/pymxb1991/article/details/51058963

jquery学习专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了jQuery中各种选择器的使用方法，包括群组选择器、后代选择器、通配符选择器等，通过实例展示了如何在HTML中动态改变元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

早上起床真不是容易的事，太痛苦了，坚持吧！今天是继2014年2月份来第一次早起了，坚持下去；

jquery 学习三(2)

参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、

2:进阶选择器

首先把上节课的内容复制一份，到新的文件夹“3jquery常规选择器2”中；dom.js中延迟加载中内容全部删除；style.css内容也清空；

index.html页面内容如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
  <title>jquery 常规选择器</title>

	<script type="text/javascript" src="jquery-1.12.2.js"></script>
    <script type="text/javascript" src="dom.js"></script>
	<link rel="stylesheet" href="style.css" type="text/css">
 </head>
 <body>
	  <div>  div  </div>
	  <div>  div  </div>
	  <div>  div  </div>
	  
	  <p> p </p>
	  <p> p </p>
	  <p> p </p>
	  
	  <strong> strong </strong>
	  <strong> strong </strong>
	  <strong> strong </strong>
 </body>
</html>

练习方式跟上节的一样，先在style.css中看一便，看效果，然后在dom.js中模拟css中看输出效果；

先看一下这个表了解一下

1、把页面中所有标签名的名称都变成红色,用我们学过的方法实现；

style.css

div{
   color;red;
};
p{
   color;red;
};
strong{
   color;red;
};

如果在来N多个标签都要变成红色，这样写下来会很费事，所以就用到了群组选择器

div,p,strong{
   color:red
};

这就是群组选择器，接下来用jQuery 模拟（在jQuery中模拟的时候注意要先把style.css中内容注释掉）

dom.js

$(function(){
  $('div,p,strong').css('color','red');
});

也能得到同样效果；在来看一下如果想看 div的 id = 'box', p的class='pox ' strong 的标签变成蓝色应该怎么操作

index.html修改如

	  <div   id = 'box'>  div  </div>
	  <div>  div  </div>
	  <div>  div  </div>
	  
	  <p class = 'pox'> p </p>
	  <p> p </p>
	  <p> p </p>
	  
	  <strong> strong </strong>
	  <strong> strong </strong>
	  <strong> strong </strong>

dom.js

$(function(){
  $('#box, .pox ,strong').css('color','red');
});

同样也可以看到想要的效果，这个就是群组选择器，将相同样式进行合并省却了我们很多麻烦；

后代选择器（有一定父子，孙子关系的结构）

修改index.html页面内容如下，

 <body>
	<ul>
	   <li> <a href = '####'/>后代选择器</li>
	   <li> <a href = '####'/>后代选择器</li>
	</ul>
	   <li> <a href = '####'/>后代选择器</li>
	   <li> <a href = '####'/>后代选择器</li>
 </body>

用传统方式把超连接的方式变成红色应该怎么做呢；

sytle.css

<p>a{ 
</p><p> color:red;</p><pre name="code" class="html">};

如果想把ul li 下面的超连接变成红色呢？可以加一个class ,如下代码

<li> <a href = '####' class='lia'/>后代选择器</li>
 <li> <a href = '####' class='lia'/>后代选择器</li>

sytle.css

.lia{
   color:red;
}

同样也可以实现，但如果不想加class呢；这样我就们可以用后代选择器

style.css

ul a{
	color:red;
}

写全点也可以这样写

ul li a{
	color:red;
}

在jQuery中模拟一下；dom.js:

$(function(){  
  $('ul li a ').css('color','red');
});

同样也可以看到如上效果；这就是后代选择器

通配符选择器

index.html 修改如下：

 <body>
	<ul>
	   <li> <a href = '####'/>后代选择器</li>
	   <li> <a href = '####'/>后代选择器</li>
	</ul>
	   <li> <a href = '####'/>后代选择器</li>
	   <li> <a href = '####'/>后代选择器</li>
	   
	    <p> 后代选择器</p>
	    <p> 后代选择器</p>
		<strong> 后代选择器</strong>
	    <strong> 后代选择器</strong>
 </body>

要让如有标签下字体都变为红色

style.css

*{
  color:red;
}

加入以上代码后所有节点都变成了红色，那倒底选择了多少节点呢；

在jQuery中模拟一下上面效果，在来看一下选择了多少节点

dom.js

$(function(){
  $('*').css('color','red');
  alert($().size);
});

也可以看到想要的效果，同时打出了29个节点，为什么会有这么多，它的第一个是哪个呢？来看一下

$(function{
     alert($('*')[0].nodeName);   //得到第一个dom对象标签名
})；

页面显示'HTML',在index.html上找一下，发现除了自己写的节点加上网页自带的，一共有29个节点

而我们只用到了其中的几个，所以有点浪费

注意：在全局范围使用*号，会极大的消耗资源，所以不建议使用

那怎么来使用呢，看如下修改index.html页面ul 中增加标签

        <ul>
	   <li> <a href = '####'/>后代选择器</li>
	   <li> <a href = '####'/>后代选择器</li>
	   <li> <em>后代选择器</em>
	   <li> <strong>后代选择器</strong>
	</ul>

要想让 ul li 下面所有标签都成红色,怎么显示，看如下操作

dom.js

$(function(){
	$('ul li a ,ul li em ,ul li strong').css('color','red');
});

可以看到所要效果，但发现都是显示的ul li 下面标签, 在来试试下面这种写法可否：

<pre name="code" class="html">$(function(){
	 $('ul li ').css('color','red');
});

测试效果跟预想的不一样，在来试试如下方法：

$(function(){
	 $('ul li ,ul li a').css('color','red');
});

发现效果成为我们想要的了，所以说这就是不用通配符最简单的方法了；

那我们用通配符怎么来写呢？如下操作：

$(function(){
	 $('ul li *').css('color','green');
});

实现了我们想要的效果，那么他有没有资源的浪费呢？在来看一下

$(function(){
	 alert($('ul li *').size()); //通配符一般运用在局部的环境内
});

根据打印结果'5'，可以知道这种方式是没有浪费的；

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。

还有一种选择器，可以在 ID 和类(class)中指明元素前缀，比如：（先修改一下index.html 中<boday>中内容，如下）

index.html

<body>
	  <div class = 'box'> div </div>
	  <p class = 'box'>  p</p>
	  
	  <div> div </div>
	  <p> p </p>
	  
 </body>

根据index.html 来操作，让第一个div来变红

$(function(){
	 $('div').css('color','red');     //让两个div都变红，所以不行
     $('.box').css('color','red');    //把第一二个都变红了，所以也不行
       //试一下如下写法       
      $('div.box').css('color','red');  //经过证明是可以的  
      $('p.box,div.box').css('color','red'); 
       $('*.box').css('color','red');

});

多class的应用：如下（修改index.html如下）index.html

 <body>
	  <div class = 'box pox'> div </div>
	  <p class = 'box'>  p</p>
	  
	  <div class = 'box'> div </div>
	  <p class = 'pox'> p </p>
	  
 </body>

要让第一个div变红怎么处理呢；
style.css

.box.pox{
    color:red;  //注意: .box和.pox之间不能有空格
}

.box,.pox{
   color:red;    //注意:将所有.box和.pox的都设置红
}

jQuery来模上面写法 dom.js

$(function(){
	 $('.box.pox').css('color','red');
});

警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。比如：
$('div#box ul li a#link'); //让 jQuery 内部处理了不必要的字符串
$('#link'); //ID 是唯一性的，准确度不变，性能提升所以上面这段代码可以用如下代码替代