jQuery

一.jQuery概念

jQuery 是一个快速、简洁的 JavaScript 库。j是JavaScript，Query是查询，jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习jQuery的本质就是学习调用这些函数（方法）。

1.JavaScript 库

即library，是一个封装好的特定的集合（方法和函数）。在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

常见的JavaScript 库有jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto，这些库都是对原生 JavaScript 的封装，内部都是用JavaScript 实现的，我们主要学习的是 jQuery。

简单理解JavaScript 库就是JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

2.jQuery的下载与使用

官网地址: https://jquery.com/

各个版本的下载： https://code.jquery.com/

版本：1x ：兼容 IE 678 等低版本浏览器，官网不再更新。

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新。

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的。

1.进入官网点击

2.选择压缩版本

3.全选复制

4.新建JS文件

5.引入




    Document

2.1jQuery入口函数




    Document

jq的入口函数和 js的入口函数有什么区别?

原生js的入口函数里面的代码:页面文档、外部的 js 文件、css 文件、图片等加载完毕才执行。

jquery的入口函数里面的代码: dom节点加载完毕时执行。

2.2jQuery顶级对象$

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $。

2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

2.3*DOM对象和jQuery对象

1.DOM对象：利用原生JS获取来的对象就是DOM对象【document.getElement等方法】




    Document

2.jQuery对象：jQuery 方法获取的元素就是 jQuery 对象【$('div')等】

本质：通过$把DOM元素进行了包装(以伪数组形式存储)




    Document

dom对象只能使用原生js方法，jquery对象只能使用jq的方法，不能混用。

如隐藏功能：dom对象：div.style.display='none' jquery对象:$('div').hide()

2.4DOM对象和jQuery对象相互转换

DOM 对象与 jQuery 对象之间是可以相互转换的。

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。（例如jQuery中没有play方法）

JQ对象转换成DOM $( )[0]或者; $( ).get(0) DOM对象转换JQ对象：$(DOM对象)




    Document

二.jQuery常用API

1.jQuery选择器

1.1jQuery基础选择器

1.2jQuery层级选择器

1.3隐式迭代

遍历内部 DOM 元素（伪数组形式存储）即把匹配的所有元素内部进行遍历循环的过程就叫做隐式迭代。ps:迭代会对元素做相同的操作




    Document
    

   隐式迭代
   隐式迭代

1.4jQuery筛选选择器

补充：checked选择器查找被选中的表单元素

2.*jQuery筛选方法




    Title
    
    
 


    0-测试
    1-测试
    2-测试 
    33333
    4-测试
    5-测试
    123

3.例：下拉菜单

4.jQuery排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

案例：多个按钮点击改变当前按钮颜色，其他的不变




    Document

5.例：淘宝




    Document