目录
一、什么是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的入口函数：
window.onload = function () {
// 执行代码
}jQuery的入口函数：
$(document).ready(function(){
// 执行代码
});
//或者：
$(function(){
// 执行代码
});2.3 jQuery 对象和DOM对象
1.用原生JS获取来的对象就是DOM对象
2. jQuery方法获取的元素就是jQuery对象。
3. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
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"});
$("divname").css("background","red");//设置名称为“divname”的div背景颜色为red2.2、jQuery隐式迭代（重点）
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加css的这个方法
简单来说就是给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作，
方便我们调用。（类似for循环）
代码：
（点击到的按钮的背景颜色设置为黑色，同时这个按钮的兄弟节点的背景颜色设置为红色）
<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 :
$ ("div") . each (function (index, domEle) {要执行的代码; } )1. each(方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数: index 是每个元素的索引号; domEle是每个DOM元素对象,不是jquery对象，所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)
语法2 :
$. each (object，function (index, element) {要执行的代码; } )
1. $.each（）方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2.里面的函数有2个参数: index 是每个元素的索引号; element遍历内容
3.2、添加元素
1.内部添加
elementappend("内容")
2.外部添加
elementafter("内容") // 把内容放入目标元素后面
element.before("内容") // 把内容放入目标元素前面
①内部添加元素,生成之后,它们是父子关系。
②外部添加元素,生成之后,他们是兄弟关系。
扫一扫
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
