jQuery
一、jQuery 概述
JavaScript 库
常见的 JavaScript 库
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的 zepto
二、jQuery 的基本使用
1、使用步骤
引入 jQuery 文件
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script> $('div').hide(); </script> </body> </html>
2、jQuery 的入口函数
$(function () { ... // 此处是页面 DOM 加载完成的入口 }) ----- $(document).ready(function() { ... // 此处是页面 DOM 加载完成的入口 })
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <script> // $('div').hide(); // $(document).ready(function() { // $('div').hide(); // }) $(function() { $('div').hide(); }) </script> <div></div> </body> </html>
3、jQuery 的顶级对象 $
- jQuery 的别称
- jQuery 的顶级对象
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <script> // $(function() { // alert(1); // }); jQuery(function() { // $('div').hide(); jQuery('div').hide(); }) </script> <div></div> </body> </html>
4、jQuery 对象和 DOM 对象
jQuery 对象本质：利用 $ 对象包装后产生的对象（伪数组形式存储）
DOM 对象转化为 jQuery 对象：== ( D O M 对象 ) = = ‘ (DOM对象)== ` (DOM对象)==‘(‘div’)`
jQuery 对象转换为 DOM 对象（两种方式）
$('div')[index] $('div').get(index)
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <video src="mov.mp4" muted></video> <script> // 1. DOM → jQuery // (1) $('video'); // (2) var myvideo = document.querySelector('video'); // 2. jQuery → DOM $('video')[0].play(); $('video').get(0).play(); </script> </body> </html>
三、jQuery 常用API
1、jQuery选择器
jQuery 基础选择器
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
名称 用法 描述 ID 选择器 $("#id")获取指定 ID 元素 通配符选择器 $('*')匹配所有元素 类选择器 $(".class")获取同一类 class 的元素 标签选择器 $("div")获取同一类标签的所有元素 并集选择器 $("div,p,li")选取多个元素 交集选择器 $("li.current")交集元素
jQuery 层级选择器
名称 用法 描述 子代选择器 $("ul>li");使用 > 号，获取亲儿子层级的元素（不会获取孙子层级的元素） 后代选择器 $("ul li");使用空格，代表后代选择器，获取 ul 下的所有 li 元素，包括孙子等
知识铺垫
jQuery 设置样式
$("div").css('属性', '值')
隐式迭代
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
jQuery 筛选选择器
语法 用法 描述 :first $('li:first')获取第一个 li 元素 :last $('li:last')获取最后一个 li 元素 :eq(index) $('li:eq(2)')获取到的 li 元素中，选择索引号为 2 的元素，索引号 index 从 0 开始 :odd $('li:odd')获取到的 li 元素中，选择索引号为奇数的元素 :even $('li:even')获取到的 li 元素中，选择索引号为偶数的元素
jQuery 筛选方法
语法 用法 说明 parent() $('li').parent();查找父级 children(selector) $('ul').children('li');相当于 $('ul>li')，最近一级find(selector) $('ul').find('li');相当于 $('ul li')，后代选择器siblings(selector) $('.first').siblings('li');查找兄弟节点，不包括自己本身 nextAll([expr]) $('.first').nextAll();查找当前元素之后所有的同辈元素 prevAll([expr]) $('.last').prev('li');查找当前元素之前所有的同辈元素 hasClass(class) $('div').hasClass("protected");检查当前的元素是否含有某个特定的类，如果有则返回 true eq(index) $('li').eq(2);相当于 $('li:eq(2)')，index 从 0 开始
jQuery 排他思想
当前元素设置样式，其余兄弟元素清楚样式
链式编程
$(this).css('color', 'red').sibling().css('color', '');
2、jQuery 样式操作
操作 css 样式方法
- 参数只写属性名，返回属性值
$(this).css('color');- 参数是属性名，属性值，用逗号分隔
$(this).css('color', 'red');- 参数可以是对象形式，方便设置多组样式
$(this).css({'color': "white", 'fontSize': '20px'});
设置类样式方法
- 添加类
$('div').addClass('current');- 移除类
$('div').removeClass('current');- 切换类
$('div').toggleClass('current');
类操作与className区别
jQuery 里面的类操作知识对指定类进行操作，不影响原先的排名
3、jQuery 效果
常见动画效果：
- 显示隐藏：show()、hide()、toggle()
- 滑动：slideDown()、slideUp()、slideToggle()
- 淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()
- 自定义动画：animate()
显示隐藏效果
- 显示语法规范
show([speed,[easing],[fn]])- 显示参数
- 参数都可以省略。无动画直接显示
- speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）
- easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”。
- fn：回调函数
- 隐藏语法规范
hide([speed,[easing],[fn]])- 隐藏参数
- 参数都可以省略。无动画直接显示
- speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）
- easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”。
- fn：回调函数
- 切换语法规范
toogle([speed,[easing],[fn]])- 切换参数
- 参数都可以省略。无动画直接显示
- speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）
- easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”。
- fn：回调函数
事件切换
hover([over,]out)
- over：鼠标移到元素上要触发的函数（相当于mouseenter)
- out：鼠标移出元素要出发的函数（相当于mouseleave)
动画队列及其停止排队方法
停止排队
stop()
- stop() 方法用于停止动画或效果
- 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画
淡入淡出效果
- 淡入语法规范
fadeIn([speed,[easing],[fn]])- 切换参数
- 参数都可以省略。无动画直接显示
- speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）
- easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”。
- fn：回调函数
- 淡出语法规范
fadeOut([speed,[easing],[fn]])- 切换参数
- 参数都可以省略。无动画直接显示
- speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）
- easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”。
- fn：回调函数
- 淡入淡出切换语法规范
fadeToggle([speed,[easing],[fn]])- 切换参数
- 参数都可以省略。无动画直接显示
- speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）
- easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”。
- fn：回调函数
渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])效果参数
opacity 透明度必须写，取值 0~1 之间
speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）必须写
easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”
fn：回调函数
自定义动画 animate
- 语法
animate(params,[speed],[easing],[fn])- 参数
- params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用引导，如果是符合属性则需要采取驼峰命名法 borderLeft。其余参数可以省略。
- speed：三种预定速度之一的字符串(“slow” , “nomal” or “fast”) 或表示动画时长的毫秒数值（如：1000）
- easing：(Optional) 用来指定切换效果，默认值是 “swing”, 可用参数 “linear”
- fn：回调函数
4、jQuery 属性操作
设置或获取元素固有属性值 prop()
- 获取属性语法
prop("属性")- 设置属性语法
prop("属性", "属性值")
设置或获取元素自定义属性值 attr()
- 获取属性语法
attr("属性") // 类似原生的 getAttribute()- 设置属性语法
attr("属性", "属性值") // 类似原生的 setAtrribute()改方法也可以获取 H5 自定义属性
数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
5、jQuery 内容文本值
普通元素内容 html()（相当于原生innerHTML)
html() // 获取元素的内容
html("内容") // 设置元素的内容
普通元素文本内容 text()（相当于原生 innerText)
text() // 获取元素的文本内容
text("文本内容") // 设置元素的文本内容
表单的值 val()（相当于原生value）
val() // 获取表单的值
val(数字) // 设置表单的值
6、jQuery 元素操作
遍历元素
语法1：
$("div").each(function(index, domEle) { xxx; })
- each() 方法遍历匹配的每一个元素，主要用DOM处理。
- 里面的回调函数有2个参数：index 是每个元素的索引号，donEle 是每个DOM元素对象，不是jQuery对象。
- 如果要使用jQuery方法，需要个这个dom元素转换为jQuery对象 $(domEle)。
语法2：
$.each(object, function(index, element) { xxx; })
- $.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
- 里面的函数有2个参数：index 是每个元素的索引号，element 遍历内容
创建元素
动态创建
语法：
$("<li></li>");
添加元素
- 内部添加
element.append("内容")
把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend("内容")
把内容放入匹配元素内部最前面。- 外部添加
element.after("内容") // 把内容放入目标元素后面
element.before("内容") // 把内容放入目标元素前面
- 内部添加元素，生成之后是父子关系。
- 外部添加元素，生成之后是兄弟关系。
删除元素
element.remove() // 删除匹配的元素（本身）
element.empyt() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容
7、jQuery 尺寸、位置操作
jQuery 尺寸
语法 用法 width() / height 取得匹配元素宽度值和高度值 只算 width / height innerWidth() / innerHeight() 取得匹配元素宽度值和高度值 包含 padding outerWidth() / outerHeight() 取得匹配元素宽度值和高度值 包含 padding、border outerWidth(true) / outerHeight(true) 取得匹配元素宽度值和高度值 包含 padding、border、margin
- 参数为空，则是获取相应值，返回的是数字型
- 参数为数字，则是修改相应值
- 参数可以不添加单位
jQuery 位置
- offset() 设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
- 该方法有两个属性 left、top
- 可以设置元素的偏移：offset({ top: 10,left: 30 })
- position() 获取元素偏移
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准
- scrollTop()/scrollLeft() 设置或获取元素被卷曲的头部和左侧
- scrollTop() 方法设置或获取元素被卷曲的头部
- scrollLeft() 方法设置或获取元素被卷曲的左侧
四、jQuery 事件
1、jQuery 时间注册
单个事件注册
语法：
element.事件(function() {} )
$("div").click(function() { 事件处理程序 } )
2、jQuery 事件处理
事件处理 on() 绑定事件
语法：
element.on(events,[selector],fn)
- events：一个或多个用空格分隔的事件类型
- selector：元素的子元素选择器
- fn：回调函数
on() 方法优势1：
可以绑定多个事件，多个事件处理程序：$("div").on({ mouseover: function() {}, mouseout: function() {}, click: function() {} })$("div").on("mouseover mouseout", function() { $(this).toggleClass("current"); })
on() 方法优势2：
可以事件委派操作：$('ul').on('click', 'li', function() { alert("Hello world"); })
on() 方法优势3：
动态创建元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件。
事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序:
$("p").off() // 解绑p元素所有事件处理程序 $("p").off("click") // 解绑p元素上面的点击事件 $("ul").off("click", "li"); // 解绑事件委托如果有的事件只想触发一次，可以使用 one() 来绑定事件。即同一种事件只能触发一次。
自动触发事件 trigger()
element.click() // 第一种简写形式
element.trigger("type") // 第二种简写形式
element.triggerHandler(type) // 第三种自动触发模式
3、jQuery 事件对象
事件被触发，就会有事件对象的产生：
element.on(events,[selector],function() {})阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡行为：event.stopPropagation()
五、jQuery 其他方法
1、jQuery 对象拷贝
如果想要吧某个对象拷贝（合并）给另外一个对象使用，此时可以使用
$.extend()方法
语法：
$.extend([deep], target, object1, [objectN])
- deep：如果设为 true 则为深拷贝，默认为 false：浅拷贝
- target：要拷贝的目标对象
- object1：待拷贝到第一个对象的对象
- objectN：待拷贝到第N个对象的对象
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
- 深拷贝：前面加 true，完全克隆（拷贝的对象而不是地址），修改目标对象不会影响被拷贝对象
2、jQuery 多库共存
jQuery 使用 $ 作为标识符，当其他 js 库也是用这个符号作为标识符时，混用会有冲突：
解决方案：
- 把里面的 $ 符号统一改为 jQuery，例如 jQuery(“div”)
- jQuery 变量规定新的名称：$.noConflict()
var xx = $.noConflict();
1081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
