前言
这次是初学jQuery的知识，学习之后觉得jQuery是一个快速、 简洁的JavaScript库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码,做更多的事情。把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript 常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。看到这里应该会和我一样，在未了解它之前会感到兴趣和充满好奇！
一、jQuery的介绍
1.jQuery的优点
- 轻量级。核心文件才几十kb ,不会影响页面加载速度
- 跨浏览器兼容。 基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持,大简化了DOM操作
- 支持插件扩 展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
- 免费、开源
2. jQuery 的入口函数
（1.）$ (function () {
. //此处是页面DOM加载完成的入口
}) ;
(2.)$ (document) . ready (function() {
// 此处是页面DOM加载完成的入口
}) ;
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
- 相当于原生js中的DOMContentLoaded。
- 不同于原生js中的load事件是等页面文档、外部的js文件、Css文件、图片加载完毕才执行内部代码。
3. jQuery 对象和DOM对象
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1. DOM对象转换为jQuery对象: $(DOM对象)
$('div")
2. jQuery对象转换为DOM对象(两种方式)
$('div") [index]
index是索引号
$("div") .get(index) index 是索引号
二、 jQuery选择器
1. jQuery 基础选择器
原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统-标准。
$( "选择器”) // 里面选择器直接写CSS选择器即可,但是要加引号，如ID选择器 $("#id")
2. jQuery 层级选择器
子代选择器
$("ul>li"); 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器
$("ul li"); 使用空格，代表后代选择器，获取ul下的所有Ii元素，包括孙子等
3.隐式迭代(重要)
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
4. jQuery筛选方法(重点)
语法 用法 说明
parent() $("li"). parent(); 查找父级
children(selector) $("ul"). children("1i") 相当于$("ul>li"),最近一级(亲儿子)
find(selector) $("u1"). find("li"); 相当于$("ul li门).后代选择器
siblings(selector) $(" . first").siblings("li"); 查找兄弟节点，不包括自己本身
nextAll([expr]) $(" . first") .nextAll() 查找当前元素之后所有的同辈元素
prevAll([expr]) $(" .last"). prevAll() 查找当前元素之前所有的同辈元素
eq(index) $("li"). eq(2); 相当于$("li:eq(2)"), index从0开始
三、 jQuery链式编程及样式操作
1. jQuery链式编程
链式编程是为了节省代码量,看起来更优雅。
$(this).css("color', 'red').sibling().css（"color",'');
使用链式编程一定注意是哪个对象执行样.式，
2.jQuery样式操作
2.1操作css方法
jQuery可以使用CSs方法来修改简单元素样式;也可以操作类,修改多个样式。
1.参数只写属性名,则是返回属性值
$(this),css("color");
2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this,css("color","red");
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号,
$(this),css({ "color":"white"," font-size":" 20px"});
2.2设置类样式方法
作用等同于以前的classList ,可以操作类样式,注意操作类里面的参数不要加点。
1.添加类
$( "div" ).addClas("current");
2.移除类
$( "div" ).removeClass("current' );
3.切换类
$( "div" ).toggleClass("current");
注意：
原生JS中className会覆盖元素原先里面的类名。而jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
四、jQuery的动画
1. jQuery效果
jQuery给我们封装了很多动画效果,最为常见的如下:
淡入淡出
fadeln()
fadeOut()
fadeToggle()
fadeTo()
显示隐藏
show()
hide()
toggle()
滑动
slideUp()
slideDown()
slideToggle()
自定义动画
animate()
括号里面可以跟动画时长，以毫秒为单位，如1000；还有fn回调函数，,在动画完成时执行的函数,每个元素执行-次。
五、jQuery相关操作
1.jQuery属性操作
设置或获取元素固有属性值prop()
所谓元素固有属性就元素本身自带的属性,比如<a>元素里面的href ,比如<input>元素里面的type.
1.获取属性语法
prop("属性" )
2.设置属性语法
prop("属性", "属性值")
设置或获取元素自定义属性值attr()
用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index = "1" 。
1.获取属性语法
attr("属性") // 类似原生getAttribute()
2.设置属性语法
attr("属性", "属性值") // 类似原生SetAttribute()
2. jQuery元素操作
主要是遍历、创建、添加、删除元素操作。
2.1遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一 类元素做不同操作,就需要用到遍历。
语法1 : $ ("div") . each (function (index, domEle) { XXX; } )
1. each0方法遍历匹配的每一个元素。 主要用DOM处理。each 每-个
2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(aomEle)
语法2 :
$. each (object，function (index, element) { Xxx; } )
1. $.each0方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
2.里面的函数有2个参数: index 是每个元素的索引号; element遍历内容
注意：如果想遍历元素标签使用each（）方法；遍历数据数组，对象就使用$.each() 方法
2.2创建元素
语法:
$("<li></li>");
动态的创建了一个<li>
2.3添加元素
1.内部添加
element.append("内容")
把内容放入匹配元素内部最后面,类似原生appendChild。
prepend 内部添加并且放到内容的最前面
2 外部添加
element.after("内容") 把内容放入目标元素后面
element.before("内容") 把内容放入目标元素前面
①内部添加元素,生成之后,它们是父子关系。
②外部添加元素,生成之后,他们是兄弟关系。
2.4删除元素
element.remove( // 删除匹配的元素(本身)
element.empty( // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容
3. jQuery内容文本值
主要针对元素的内容还有表单的值操作。
1.普通元素内容html() (相当于原生inner HTML)
htmI() //获取元素的内容
html("内容") //设置元素的内容
2.普通元素文本内容text( (相当与原生 innerText)
3.表单的值val() (相当于原生yalue)
六、 jQuery事件绑定和解绑
1. jQuery事件处理
1.1事件处理on()绑定事件
on0方法在匹配元素上绑定一个或多 个事件的事件处理函数
语法:
element . on (events, [selector] , fn)
1. events:-个或多个用空格分隔的事件类型,如"click'或"keydown"。
2. selector:元素的子元素选择器。
3. fn:回调函数即绑定在元素身上的侦听函数。
on0方法优势1 :
可以绑定多个事件,多个处理事件处理程序。
$ ("div") .on({
mouseover:
function() {},
mouseout: function() {},
click: function() { }
}) ;如果事件处理程序相同
$("div") . on ("mouseover mouseout", function() {
$ (this) . toggleClass ("current") ;
}) ;on0方法优势2 :
可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$('ul') .on('click', 'li' ，function() {
alert('hello world!') ;
}) ;on0方法优势3 :
动态创建的元素, click) 没有办法绑定事件，on0可以给动态生成的元素绑定事件
// click 是绑定在ul身上的，但是触发的对象是ul里面的小li
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
//
alert(11);
// })
$("o1").on("click", "'li", function() {
alert(11);
})
var li =$("<li>我是后来创建的</1i>");
$("o1" ) .append(1i);1.2 事件处理off()解绑事件
off()方法可以移除通过on(方法添加的事件处理程序。
$("p") .off() //解绑p元素所有事件处理程序
$("p") .off( "click") // 解绑p元素上面的点击事件后面的foo 是侦听函数名
$ ("ul") .off ("click", "li"); // 解绑事件委托
如果有的事件只想触发一次，可以使用one(来绑定事件。
