本文是jQuery的入门教程，涵盖了jQuery的介绍、常用API、链式编程、样式操作、动画效果和事件处理等内容。讲解了jQuery的选择器、样式操作、动画展示、事件绑定解绑等核心功能，帮助开发者快速掌握jQuery的使用。
系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一、jQuery介绍及常用API
1.jQuery的概述
简单来说，jQuery就是一个对原生dom进行再次封装的一个库(js文件)，通过封装，我们可以快速高效的使用这些被封装好的功能
2.jQuery的使用
在jQuery的官网上下载，复制jQuery代码到js文件中，在html页面中script引入js文件即可
3.jQuery的入口函数
- 等着页面的dom加载完毕再去执行js代码
传统写法： $(document).ready( function () {} )
现在流行： $( function(){} )
相当于原生JS中： DOMcontentLoaded
`注意：$(” “) 字符串尽量用双引号`
4.jQuery的顶级对象 $
$是jQuery的别称，在书写代码时，两个可以相互替代，实际中常用$$是jQuery的顶级对象，相当于原生JavaScript的window，把元素利用$包装成jQuery对象就可以调用jQuery的方法了
5.jQuery对象和dom对象
- 用原生js获取来的对象就是dom对象
- 用jQuery获取的对象就是jQuery对象，jQuery对象是一个伪数组形式
- jQuery对象的本质：利用
$对DOM对象包装后产生的对象 - 注意： jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript的属性和方法
dom对象和jQuery对象可以相互转换
dom转为jQuery对象： $(DOM对象)
jQuery转dom有两种方式：
1.$(DOM对象)[索引号]
2.$(DOM对象).get(索引号)
二、jQuery常用API
1.jQuery选择器
语法： $(‘选择器’)
2.jQuery样式操作
语法： $(‘选择器’).css(‘属性’，‘属性值’)
3.jQuery筛选选择器
语法：
- 筛选第一个或者最后一个用first/last：$(‘li:first’) ; $(‘li:last’);
- 筛选索引号为奇数odd，为偶数even:$(‘li:odd’); $(‘li:even’)
- 筛选指定索引号：$('li:eq(index)) ; index从0 开始
4.jQuery的筛选方法（重点）
parent():找距离自己最近一级的父级元素 找亲爸爸children():找自己的亲儿子 不会找到孙子 类似于亲儿子选择器，参数：你要查找的亲儿子find():可以查找里面所有的后代元素 儿子孙子 类似于后代选择器siblings():找自己的亲兄弟元素- nextAll():查找当前元素之后的所有同辈元素
- prevtAll();查找当前元素之前的所有同辈元素
eq():参数：索引号- hasClass():判断是否拥有该类名；参数：字符串类名 返回值：boolean
5.jquery的排他思想
排它思想：当前元素设置样式，其余的兄弟元素清除样式
得到当前元素的索引号方法：$(元素).index()
$(function(){
$('button').click(function(){
$(this).css('backgroundColor','red')
$(this).siblings('button').css('backgroundColor',' ')
})
})
三、jQuery链式编程及样式操作
1.用css方法操作样式
jQuery可以通过css方法来修改简单元素样式；也可以操作类、修改多个样式
- 参数致谢属性名，返回的是属性值；$(this).css(‘color’)
- 参数是：属性名，属性值；则是设置一组样式
- 参数可以是对象的形式，在对象中写入多组样式，多组样式之间用逗号分隔；键值对用冒号分隔，属性可以不加引号
2.设置类样式 方式 （开发常用）
对要设置的元素进行样式设置时，给她一个类写在css文件中，当该元素需要这个样式的时候，为这个元素添加类即可
注意区别：元素JS中的className会覆盖元素原先里面的类 ；jQuery的类操作只是对指定类进行操作，不会影响原先的类名
- 增加类addClass(‘类名’)
- 移除类removeClass(‘类名’)
- 切换类toggleClass(‘类名’)
四、jQuery动画
1.显示隐藏效果
注意：一般不加参数 直接显示或者隐藏
- show ( [ speed , [ easing ] , [ fn ] ] )
三个参数都可以省略，无动画直接显示；
speed:三种速度字符串选择（‘slow’；‘normal’； ‘fast’）或者填写表示动画时长的毫秒数
easing：用来指定切换效果，默认是：’swing：由慢到快到慢‘；’linear：匀速的‘
fn:回调函数，在动画完成时执行的函数，每个元素执行一次 - hide ( [ speed , [ easing ] , [ fn ] ] )
三个参数都可以省略，无动画直接显示；
speed:三种速度字符串选择（‘slow’；‘normal’； ‘fast’）或者填写表示动画时长的毫秒数
easing：用来指定切换效果，默认是：’swing：由慢到快到慢‘；’linear：匀速的‘
fn:回调函数，在动画完成时执行的函数，每个元素执行一次 - toggle ()
三个参数都可以省略，无动画直接显示；
speed:三种速度字符串选择（‘slow’；‘normal’； ‘fast’）或者填写表示动画时长的毫秒数
easing：用来指定切换效果，默认是：’swing：由慢到快到慢‘；’linear：匀速的‘
fn:回调函数，在动画完成时执行的函数，每个元素执行一次
2.滑动效果
注意：三个参数如上
- slideDown()
- slideUp()
- slideToggle()
3.淡入淡出效果
注意：三个参数如上
- fadeIn()：fade逐渐 in 进去 ；
- fadeOut()
- fadeToggle()
- fadeTo( [ [speed] , [ easing ] , opacity, [ fn ] ] )：修改透明度：渐进方式调整到指定的不透明度;opacity必须写，值：0-1之间
4.自定义动画
- animate( params , [ speed ] , [ easing ] ,[ fn ] )
- params:想要更改的样式属性，以对象的形式传递，必须写；复合属性采用驼峰命名
5.事件切换
hover( [over] out ) : $(‘div’).hover(function(){},function(){}) 鼠标 经过离开的复合写法
- over:鼠标移动到某个元素上要触发的函数 相当于mouseenter/mouseover
- out:鼠标移除元素要触发的函数( 相当于mouseleave )
- 如果只有一个函数：则鼠标经过和鼠标离开都会触发这个函数
6.动画队列及其停止排队方法
1.动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
2.停止队列
语法：stop()
作用：用于停止动画或者效果
注意：stop要写在动画的前面，相当于停止/结束上一次的动画
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
五、jQuery事件绑定和解绑
1. jQuery事件注册
2.jQuery事件处理 on()绑定事件（常用）
- 介绍：on() 方法在匹配的元素上能够绑定一个或多个事件
- 语法：元素A.on(events,[selector],fn)
event:一个或者多个事件类型 ，多个事件通过对象以键值对的形式记录事件/多个事件还可以用空格隔开： ’‘ mouseenter mouseleave’’
// 2. 事件处理on
// (1) on可以绑定1个或者多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});
selector：元素A的子元素选择器
fn:回调函数；绑定在元素身上的监听函数
- 通过on()方法可以实现事件委托
事件委托:把原来加给子元素身上的事件绑定在父元素身上，就是把事件委托给父元素
eg: $('ul').on('click','li') 给li都绑定了事件；也用到了事件冒泡的原理 - 通过on()方法可以给动态生成的元素绑定事件
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
// alert(11);
// })
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
3.jQuery事件 off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
- $(‘div’).off() :把div元素通过on绑定的事件全部移除
- $(‘div’).off(’click‘) ：只移除on绑定的click事件
- 解除事件委托
特别的 ： 元素.one() ：元素绑定的事件只触发一次
$('ul').on('click','li',function(){
alert(123);
})
$('ul').off('click','li')
4.自动触发事件trigger（）
- 方法一：元素.事件()
- 方法二：元素.trigger（’‘事件名’‘）
- 方式三：元素.triggerHandler(‘’ 事件名 ‘’)
方式三：此方法不会触发元素的默认行为，比如用此方法给input的text类型绑定focus事件自动触发，触发之后光标不会在input表单里面闪烁，如果用方式二进行同样的操作，自动触发结束后，通过方式二的光标会在input表单内闪烁
5.jQuery事件对象
只要事件触发 ，就会由事件对象的产生
应用：
阻止默认行为：e.preventDefault()
阻止冒泡: e.stopPropagation()
六、jQuery其他方法
1.jQuery对象的拷贝方法
把某个对象拷贝给另外一个对象使用，此时使用$.extend()方法
语法：$.extend( [deep] , target , object1 , [objectN] )
`注意：当target自己也自带一些属性，如果object1中的属性和target的属性相同，则object1会覆盖target自身的相同属性`
- deep:如果设置为true则是深拷贝、默认是false浅拷贝
- target：要拷贝的目标对象
- object1：把object1拷贝给target
2.jQuery多库共存的两种方法
3.jQuery插件的使用
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
扫一扫
2591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
