jQuery系列1---丰富的选择器

Dear 丶 2022-09-27 06:42 156阅读 0赞

# 一、Jquery入门 #

## 1.1 什么是Jquery ##

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（*或JavaScript框架*）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件 扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

## 1.2 下载Jquery ##

去官网下载：

[jquery官网][jquery]

[w3school][]

![99372242.jpg][]

目前最新的是3.1.1版本。有压缩版本和不压缩版本。不压缩版本一般用到开发阶段，压缩版本用到生产环境。从2.X开始不支持ie9之前的浏览器。如果想兼容IE678，则应该使用1.X

## 1.3 使用Jquery ##

jquery其实就是一个js文件，使用它就像我们用一个外部js文件一样使用即可。一般放在html的head中引入。

# 二、Jquery核心基础 #

## 2.1 Jquery的入口 ##

写js代码一般等到整个页面加载完成之后，才去执行js操作，尤其涉及到对dom的操作。  
JQuery的使用也是如此。一般使用下面的入口来完成。

> 说明：

*  `$` 是jquery中的对象。我们使用jquery的所有操作，都是在 `$` 的基础上完成的
 *  其实 `$` 是 jQuery 对象的简称。 `$ === jQuery`

## 2.2 JQuery对象和DOM对象的互换 ##

**使用JQuery获得的是JQuery对象，使用原生js获得的DOM对象，二者是完全不同的对象。使用的时候一定要区别开来。**

## 2.3 onload和JQuery中ready方法的区别 ##

1.  执行时机：onload事件必须等页面完全加载完毕后才能执行；ready当页面节点加载完毕后就可以执行。比onload要早一点
2.  添加个数：onload事件只能添加一个，如果添加了多个，则最后执行的onload事件会覆盖前边的事件;ready事件可以添加多个，且互相之间不会覆盖。（onload事件和ready时间之间也不会互相覆盖）
3.  简化写法：onload没有简化写法；ready事件可以简化为:`$(function(){})`;

# 三、JQuery简单选择器 #

JQuery中选择器的选择器的思路和CSS的选择器的思路一样，就是去选择元素的。有三种基本选择器。

## 3.1 ID选择器 ##

## 3.2 标签选择器 ##

## 3.3 类选择器 ##

# 四、JQuery进阶选择器 #

## 4.1 群组选择器(并集) ##

## 4.2 后代选择器 ##

$(function () { 
        var $as = $("p a");   //找到p标签下的所有a标签
        console.log($as);
    })

## 4.3 通配符选择器 ##

$(function() { 
      var $all = $("*");   //获取当前文档中所有元素的
      console.log($all);
      alert($all.length);
    })

# 五、JQuery高级选择器 #

## 5.1 后代选择器和find方法 ##

jquery对象.find(选择器)：是jquery对象的方法，表示找到这个标签下的所有的指定的选择器的元素。

<!DOCTYPE html>
    <html> <head> <meta charset="UTF-8"> <title></title> <script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { var $allLi1 = $(".box li"); console.log($allLi1); //找到 class是box的元素下面的所有的li标签元素 var $allLi2 = $(".box").find("li"); // 效果等同于前面的后代选择器。 console.log($allLi2); }) </script> </head> <body> <div class="box"> <ul> <li>第一个li的内容</li> <li>第二个li的内容</li> <li>第三个li的内容</li> </ul> </div> </body> </html>

## 5.2 子元素选择器和children方法 ##

## 5.3 Next选择器( + )和next方法 ##

## 5.4 nextAll选择器( ~ )和nextAll方法 ##

## 5.5 prev方法和prevAll方法 ##

## 5.5 sibling方法 ##

# 六、属性选择器 #

与元素的属性相关的选择器。属性选择器必须用 **\[ \]** 括起来。

# 七、过滤选择器 #

使用特定的过滤规则来筛选出所需的DOM元素。过滤选择器的语法和css中的伪类的写法一样，都是用:开头。

## 7.1 基本过滤选择器 ##

## 7.2 内容过滤选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:contains(text)</td> 
   <td>选取含有文本内容为text的元素</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>选取不包含子元素或文本的元素</td> 
  </tr> 
  <tr> 
   <td>:has(selector)</td> 
   <td>选择与指定的选择匹配的元素</td> 
  </tr> 
  <tr> 
   <td>:parent</td> 
   <td>选取含有子元素或文本的元素</td> 
  </tr> 
 </tbody> 
</table>

## 7.3 可见性选择过滤器 ##

根据元素的可见状态来选取。

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:hidden</td> 
   <td>选取所有不可见的元素。包括input的type属性是hidden，display是none。</td> 
  </tr> 
  <tr> 
   <td>:visible</td> 
   <td>选取所有可见的元素。如果一个元素的visibility是hidden也会被选中。</td> 
  </tr> 
 </tbody> 
</table>

## 7.4 子元素过滤选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:nth-child(index/even/odd/equation)</td> 
   <td>匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始.</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>相当于nth-child(1)</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>返回父元素的第一个子元素</td> 
  </tr> 
  <tr> 
   <td>:only-child</td> 
   <td>如果父类元素仅仅有一个子元素就返回</td> 
  </tr> 
 </tbody> 
</table>

# 八、表单选择器 #

为了更加方便的操作表单，jquery专门添加的表单选择器

![41910108.jpg][]

[jquery]: http://jquery.com/
[w3school]: http://www.w3school.com.cn/jquery/
[99372242.jpg]: http://o7cqr8cfk.bkt.clouddn.com/public/16-11-16/99372242.jpg
[41910108.jpg]: http://o7cqr8cfk.bkt.clouddn.com/public/16-11-17/41910108.jpg