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

最新推荐文章于 2017-08-17 17:40:47 发布

一平米

最新推荐文章于 2017-08-17 17:40:47 发布

阅读量549

点赞数

分类专栏： jquery学习文章标签： jquery

本文链接：https://blog.csdn.net/pymxb1991/article/details/51052641

版权

jquery学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jquery 学习三

参考资料：李炎恢老师的视频

jQuery 最核心的组成部分就是：选择器引擎。它继承了 CSS 的语法，可以对 DOM 元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了 CSS1~CSS3 的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。

这里注意，它继承了css的语法，所以也可以说，在学习jquery的同时，我们也是在学些一些基础的CSS

在开始前，先把2文件夹中的除了base.js和tool.js都复制到新建的3的文件夹中；

我们来做一些简单的修改；dom.js页面清空，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>
 </head>
 <body>
	  <div id = "box">常规选择器</div>
 </body>
</html>

在做练习的时候我们先运行一下.css规则对比一下，然后运行jquery规则这样通过比较的方式来学习

1、简单选择器

首先建一个style.css的文件，然后在页面中加入以下代码引入style.css样式文件

注意：引入文件的时候一定要写到<head></head>头之间

<<link rel="stylesheet" href="style.css" type="text/css">

然后在style.css页面中输入以下代码，然后查看页面效果结果：页面字体颜色变成红色

 #box{
     color;red; //添加样式
  }

注释以上代码，在dom.js中输模拟这个过程；输入以下代码如下结果：页面字体颜色变成蓝色

$(function(){
$('#box').css('color','bule');  //添加一个行为，这个行为是添加样式
})

我们先看一下下面这个选择器表

ID 选择器只能获取一个DOM对象而其它两个则可以获取多个DOM对象，我们接下来像来看一下元素跟class选择器

先在index.html中多复制两行代码

          <div > 常规选择器 </div>
	  <div > 常规选择器 </div>
	  <div >常规选择器</div>

回到style.css文件中输入以下代码（注意我们在输入新的代码的时候都把旧的代码先注释掉，以便我们能更好的看到我们所想要的效果）查看页面效果可以看到所有文件都变成棕色；

#div{
    color:maroon;
}

回到dom.js中，我们来模拟它，输入以下代码（注意：代码执行前都把之前的代码给注掉，下面在引不在缀述）

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

查看效果跟我们所想的一样，所有含在div标签中的文件都变成了红色；

在看class标签，回到style.css中，输入以下代码，查看效果(由于index.html页面中没有 class标签,所以我们先给div前两个增加class标签,代码如下)

index.html

          <div class='pox'> 常规选择器 </div>
	  <div class='pox'> 常规选择器 </div>
	  <div >常规选择器</div>

style.css

.pox{
    color:yellow;
}

查看效果得到：页面中前两行颜色变成了黄色；

回来dom.js中我们在来模拟它

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

查看效果得到：页面中前两行颜色变成了黄色；

通过上面三种选择器的学习我们可以知道 (该资料来源 w3cschool,摘录+总结，锋利的jquery)

1、“#” 代表ID 也就是ID选择器：可以通过 "#+ID" 的方式来定位到具体的某个对象的属性；

2、div 也就是div 也就是元素名选择器(标签选择器)：以文档元素作为选择符；

3、‘.’也就是类属性选择器：只有适当地标记文档后，才能使用这些选择器；所以在使用类选择这前，需要增加具体的文档标记，以便类选择器正常工作,为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值

注意在此我们说一个问题：如果页面上ID有多个，在js页面中给其增加了样式，最终效果只有一个有样式；这是因为ID 在上本来就是一个唯一标识，而在页面上还写了三个，这就肯定是页面上出错了；大家可以写代码看一下效果：

html代码如下

   <div id = 'box'> 常规选择器</div>
   <div id = 'box'> 常规选择器</div>
   <div id = 'box'> 常规选择器</div>

dom代码如下

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

运行结果发现，只有第一行字体变了颜色

但是如果是在CSS 样式中这样做会是怎么样呢？

style.css代码如下

#box{
	color:red;   //添加样式
}

运行结果发现，字体全变了颜色，问题出现在哪里呢，CSS的错吗？

答案是否定的，这也就是我们刚才说的问题，由于开发者同一个页面引用了多个ID造成的；所以ID，唯一标识一定要注意这一点；

为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。

在dom.js中输入以下代码来查看（注释前面代码)

        alert($('#box').size());
	alert($('div').size());
	alert($('.pox').size()); //注意在写上这段代码时注意html页面中增加class 属性

根据查看结果可知 id 1个; div 3 个; class 3个; length同样也可以，大家可以试一下length,需要注意的是length是一个属性，不是一个方法，所以它不需要后面加括号；

我们也可以根据get获取具体的对应属性值；得到原生值

	$('div').eq(1).css('color','red');

jQuery 选择器的写法与 CSS 选择器十分类似，只不过他们的功能不同。CSS 找到元素后添加的是单一的样式，而 jQuery 则添加的是动作行为。最重要的一点是：CSS 在添加样式的时候，高级选择器会对部分浏览器不兼容，而 jQuery 选择器在添加 CSS 样式的时候却不必为此烦恼。

html代码修改

	  <div id='box'>
			<p> 常规选择器 </p>
			<p> 常规选择器 </p>
			<p> 常规选择器 </p>
			<div>
				<p> 常规选择器 </p>
				<p> 常规选择器 </p>
				<p> 常规选择器 </p>
			</div>
	  </div>

style.css

  #box  > p {   // 只给子节点增加样式
	color:red;      
  }

测试效果发现，只有前三个变了颜色，如果想让所有都变呢只需要把大于号去掉即可

在ie6,ie7.ie8.ie9 测试发现，在IE6中是不出来的，低版本显示有问题

在来看一下jQuery写法

dom.js

$(function{
    $('#box > p ').css('color','red')
})

经测试发现都可以显示
jQuery 选择器支持 CSS1、CSS2 的全部规则，支持 CSS3 部分实用的规则，同时它还有少量独有的规则。所以，对于已经掌握 CSS 的开发人员，学习 jQuery 选择器几乎是零成本。而 jQuery 选择器在获取节点对象的时候不但简单，还内置了容错功能，这样避免像 JavaScript那样每次对节点的获取需要进行有效的判断；

html页面修改成如下

  <div id = "box">常规选择器</div>

dom.js修改如下

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

页面没有反应，通过firebug可以发现，代码没有报错，页面也没有变化

利用原生javascript写法来看

$(function(){
      document.getElementById('pox').style.color='red';
});

查看发现代码有报错，把‘ pox’改成'box'刚正常

 //很多情况下有动态生成DOM的问题，会导致执行不存在的ID选择器
	 //$('#pox ').css('color','red')    这就是jquery的容错功能
	 //如果必须要验证时我们可以采用下面的方法来验证；
	 if($('#pox ').size>0){
		 $('#pox ').css('color','red')
	 }
	 if($('#pox ').get(0)){
		 ……
	 }
	  if($('#pox ')[0]){
		 ……
	 }

一平米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a毛 jquery 学习记 3 常规选择器(1)

jquery 学习三参考资料：李炎恢老师的视频 jQuery 最核心的组成部分就是：选择器引擎。它继承了 CSS 的语法，可以对 DOM 元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了 CSS1~CSS3 的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。这里注意，它继承了c
复制链接

扫一扫

专栏目录