目录

一、什么是jQuery

（一）、jQuery概述

1.1 JavaScript库

1.2 jQuery的概念

1.3 jQuery的优点

（二）、jQuery的基本使用

2.1、jQuery的顶级对象$

2.2、jQuery的入口函数

2.3 jQuery 对象和DOM对象

二、jQuery常用知识点总结

（一）、 jQuery 基础选择器

（二）、 jQuery 选择器

2.1、jQuery设置样式

2.2、jQuery隐式迭代（重点）

2.3、 jQuery 筛选选择器

（三）、 jQuery元素操作

3.1、遍历元素

3.2、添加元素

一、什么是jQuery

（一）、jQuery概述

在了解jQuery之前要先了解什么是 JavaScrip库

1.1 JavaScript库

仓库:可以把很多东西放到这个仓库里面。 找东西只需要到仓库里面查找到就可以了。
JavaScript库:就是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就
是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate, hide. show ,比如获取元素等。
简单理解:就是一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用
这些封装好的功能了。jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。

1.2 jQuery的概念

jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是\”write Less , Do More”, 倡导写更少的代码,
做更多的事情。
jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

1.3 jQuery的优点

轻量级：核心文件才几+kb ,不会影响页面加载速度
跨浏览器兼容：基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持,大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等；
免费、开源

（二）、jQuery的基本使用

2.1、jQuery的顶级对象$

2.1.1、$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。
2.1.2、$是jQuery的顶级对象，相当于原生JavaScript中的window,把元素利用$包装成jQuery对象 ,就可以调用
jQuery的方法。
 

2.2、jQuery的入口函数

jQuery也有入口函数，与js不同的是

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。可以执行多次，第N次都不会被上一次覆盖，可以简写为$(function(){ });
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。只能执行一次，如果第二次，那么第一次的执行会被覆盖

js的入口函数：

[code]window.onload = function () {// 执行代码}

jQuery的入口函数：

[code]$(document).ready(function(){// 执行代码});//或者：$(function(){// 执行代码});

2.3 jQuery 对象和DOM对象

1.用原生JS获取来的对象就是DOM对象
2. jQuery方法获取的元素就是jQuery对象。
3. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
 

[code]var Div = document. querySelector( \'div\'); // Div 是DOM对象$(\'div\'); // $(\'div\')是一个jQuery 对象Div. style.display = \'none\';//dom获取到的元素只能这样修改样式$(\'div\').hide（）；//$获取到的元素只能这样使用

dom对象和$对象是可以相互转换的：

1. DOM对象转换为jQuery对象: $(DOM对象)

2. jQuery对象转换为DOM对象(两种方式)
①$(\’div\”) [index] index 是索引号
②$( div) .get(index)index是索引号

二、jQuery常用知识点总结

（一）、 jQuery 基础选择器
 

$( \”选择器”) // 里面选择器直接写 CSS选择器即可，但是要加引号
 

（二）、 jQuery 选择器

2.1、jQuery设置样式

jQuery可以使用Css方法来修改简单元素样式;也可以操作类,修改多个样式。
1.参数只写属性名,则是返回属性值
$(this).css(\”color\”);
2.参数是属性名,属性值,逗号分隔,是设置-组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(\”color\”, \”\’red\”);
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用置号隔开,属性可以不用加引号，
$(this).css({ \”color\”white\”,\”font -size\”:\” 20px\”});

[code]$(\"divname\").css(\"background\",\"red\");//设置名称为“divname”的div背景颜色为red

2.2、jQuery隐式迭代（重点）

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加css的这个方法

简单来说就是给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作，
方便我们调用。（类似for循环）

代码：

（点击到的按钮的背景颜色设置为黑色，同时这个按钮的兄弟节点的背景颜色设置为红色）

[code]<button type=\"button\">路明非</button><button type=\"button\">路明非</button><button type=\"button\">路明非</button><button type=\"button\">路明非</button><button type=\"button\">路明非</button><button type=\"button\">路明非</button><script type=\"text/javascript\">$(function(){$(\"button\").click(function(){$(this).css(\"background\",\"black\");$(this).siblings(\"button\").css(\"background\",\"red\");})});

2.3、 jQuery 筛选选择器

（三）、 jQuery元素操作

主要是遍历、创建、添加元素等操作。

3.1、遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。

语法1 :

[code]$ (\"div\") . each (function (index, domEle) {要执行的代码; } )

1. each(方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数: index 是每个元素的索引号; domEle是每个DOM元素对象,不是jquery对象，所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)

语法2 :

[code]$. each (object，function (index, element) {要执行的代码; } )

1. $.each（）方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2.里面的函数有2个参数: index 是每个元素的索引号; element遍历内容
 

3.2、添加元素

1.内部添加
elementappend(\”内容\”)

2.外部添加
elementafter(\”内容\”) // 把内容放入目标元素后面
element.before(\”内容\”) // 把内容放入目标元素前面
①内部添加元素,生成之后,它们是父子关系。
②外部添加元素,生成之后,他们是兄弟关系。