jQuery成功之路——jQuery介绍和jQuery选择器概述

分手后的思念是犯贱 2024-03-26 22:44 89阅读 0赞

## 一、jQuery介绍 ##

### 1.1 jQuery概述 ###

#### jQuery的概述 ####

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。

#### jQuery的作用 ####

*  访问和操作DOM元素
 *  控制页面样式
 *  对页面事件进行处理
 *  扩展新的jQuery插件
 *  与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

#### jQuery的优势 ####

*  体积小，压缩后只有100KB左右
 *  强大的选择器
 *  出色的DOM封装
 *  可靠的事件处理机制
 *  出色的浏览器兼容性

### 1.2 jQuery框架的下载与引入 ###

#### jQuery的官方下载 ####

*  jQuery的官方下载地址：[http://www.jquery.com][http_www.jquery.com]

#### jQuery的版本介绍 ####

*  1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
 *  2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
 *  3.x：不兼容IE678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本
 *  开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。

#### jQuery的引入 ####

在需要使用jQuery的html中使用js的引入方式进行引入，如下：

#### jQuery引入成功的测试 ####

关键代码解释

$(function(){ 代码 })

*  是指 $(document).ready(function()\{\}) 的简写
 *  用来在DOM加载完成之后执行一系列预先定义好的函数。

### 1.3 jQuery对象与js对象之间的转换 ###

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象，而不是js方式获得的DOM对象，**二者的API方法不能混合使用**，若想使用对方的API，需要进行对象的转换。

使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下：

js的DOM对象转换成jQuery对象

*  语法：`$(js的DOM对象)`

jQuery对象转换成js对象

*  语法：`jquery对象[索引] 或 jquery对象.get(索引)`

#### 代码演示： ####

1.  演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据
2.  演示将js的DOM对象 转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据
3.  演示将jquery对象 转换成 js的DOM对象， 再使用转换后js的DOM对象方式获取div中的数据

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            
            <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
            
            <script type="text/javascript">
                $(function(){           
                    //1.演示使用js的DOM对象方式获取div中的文本数据
                    var divEle = document.getElementById("myDiv");//js的DOM对象
                    alert(divEle.innerHTML);//js对象的innerHTML属性
                    
                    //1.演示使用jquery对象方式获取div中的文本数据
                    var $divEle = $("#myDiv");//jQuery对象
                    alert($divEle.html());//jQuery对象的html方法
                    
              //2.演示将js的DOM对象 转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据
                    alert($(divEle).html());//转换后正常执行
                    
              //3.演示将jquery对象 转换成 js的DOM对象， 再使用转换后js的DOM对象方式获取div中的数据
                    alert($divEle[0].innerHTML);
                });
            </script>
        </head>
        <body>
            <div id="myDiv">通过不同方式获得文本内容</div>
        </body>
    </html>

#### 小结： ####

js的DOM对象转换成jQuery对象

*  语法：`$(js的DOM对象)`
    
        var jsDomEle = document.getElementById("myDiv"); //js的DOM对象
        var $jQueryEle = $(jsDomEle); //js的DOM对象 转换成 jquery对象

jQuery对象转换成js对象，

*  语法：`jquery对象[索引] 或 jquery对象.get(索引)`
    
        var $jQueryEle = $("#myDiv"); //jQuery对象
        var jsDomEle = $jQueryEle[0]; //jquery对象 转换成 js的DOM对象

提示：JQuery对象变量名前面的`$`符号，主要作用是便于我们区分该变量是 JsDOM对象 与 jQuery对象，并无特殊含义。写`$`符号代表jQuery对象 是 行业书写规范，不加`$`，代码也没有错误。

## 二、jQuery选择器 ##

### 2.1 基本选择器 ###

*  语法

<table> 
 <thead> 
  <tr> 
   <th>选择器名称</th> 
   <th>语法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>标签选择器（元素选择器）</td> 
   <td>$("标签名称")</td> 
   <td>获得所有匹配标签名称的于元素</td> 
  </tr> 
  <tr> 
   <td>id选择器</td> 
   <td>$("#id的属性值")</td> 
   <td>获得与指定id属性值匹配的元素</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>$(".class的属性值")</td> 
   <td>获得与指定的class属性值匹配的元素</td> 
  </tr> 
 </tbody> 
</table>

#### 需求 ####

*  改变 id 为 one 的元素的背景色为红色
 *  改变元素名为 <div> 的所有元素的背景色为红色
 *  改变 class 为 mini 的所有元素的背景色为红色
 *  改变所有的<span>元素和 id 为 two 的元素的背景色为红色

#### 实现： ####

### 2.2 层级选择器 ###

#### 语法: ####

重点:

*  获得A元素内部的所有的B元素：$("A B ") 后代选择器(包含子孙)
 *  获得A元素下面的所有B子元素：$("A > B") 只有儿子，没有孙子

了解:

*  获得A元素同级下一个B元素：$("A + B") 下一个兄弟
 *  获得A元素同级所有后面B元素：$("A ~ B") 后边的所有兄弟
 *  获取A元素的同级B元素: $("A").siblings("B") 获取所有的兄弟

#### 需求： ####

*  改变<body>内所有<div>的背景色为红色
 *  改变<body>内子<div>的背景色为 红色

#### 实现： ####

### 2.3 属性选择器 ###

#### 语法: ####

重点:

*  获得有属性名的元素：$("A\[属性名\]")
 *  获得属性名 等于值元素：$("A\[属性名=值\]")
 *  复合属性选择器，多个属性同时过滤：$("A\[属性名!=值\]...\[属性名!=值\]")

了解:

*  获得属性名不等于值元素：$("A\[属性名!=值\]")
 *  获得属性名以值开头元素：$("A\[属性名^=值\]")
 *  获得属性名以值结尾元素：$("A\[属性名$=值\]")
 *  获得属性名含有值元素：$("A\[属性名\*=值\]")

#### 需求: ####

*  含有属性title 的div元素背景色为红色
 *  属性title值等于test的div元素背景色为红色
 *  选取有属性id的div元素，然后在结果中选取属性title等于“test”的 div 元素背景色为红色

#### 实现: ####

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

#### 语法: ####

*  获得选择的元素中的第一个元素： :first
 *  获得选择的元素中的最后一个元素： :last
 *  不包括指定内容的元素例如： :not(selecter)
 *  偶数，从0开始计数： :even
 *  奇数，从0开始技术： :odd
 *  指定索引(index)元素： :eq(index)
 *  大于指定索引(index)元素： :gt(index)
 *  小于指定索引(index)元素： :lt(index)
 *  获得标题,固定写法（<h1> /<h2> ....） :header

了解:

*  获得正在执行的动画,固定写法 :animated

#### 需求： ####

*  改变第一个 div元素的背景色为 红色
 *  改变最后一个 div元素的背景色为 红色
 *  改变class不为 one的所有 div 元素的背景色为 红色
 *  改变索引值为偶数的 div 元素的背景色为 红色
 *  改变索引值为奇数的 div 元素的背景色为 红色
 *  改变索引值为大于3的div元素的背景色为 红色
 *  改变索引值为等于3的div元素的背景色为 红色
 *  改变索引值为小于3的div元素的背景色为 红色
 *  改变所有的标题元素的背景色为 红色

#### 实现： ####

### 2.5 表单属性选择器 ###

#### 语法: ####

*  获得可用元素： :enabled
 *  获得不可用元素： :disabled
 *  获得单选/复选框选中的元素（单选radio ，多选checkbox）： :checked
 *  获得下拉框选中的元素（下列列表select）： :selected

#### 需求: ####

*  利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
 *  利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
 *  利用 jQuery 对象的 length 属性获取多选框选中的个数
 *  利用 jQuery 对象的 text() 方法获取下拉框选中的内容

#### 实现： ####

[http_www.jquery.com]: http://www.jquery.com/