jQuery 学习
彭鸿哲
目录
一jQuery相关
1. jQuery定义
定义：jQuery是一个快速、简洁的JavaScript库
- JavaScript库：就是一个JS文件，封装了原生JS常用的功能代码（函数和方法）
- 常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto
- 学习jQuery的本质：就是学习调用这些函数（方法）
2. jQuery的下载
官网：jQuery
各个版本下载：jQuery CDN
3. jQuery API 中文文档
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
4. jQuery入口函数
首先，第一步：先引入jQuery.js文件
jQuery语法中，一般用双引号
（1）页面DOM加载完成 （相当于原生js中的 DOMContentLoaded）
$(function(){
});（2）页面DOM加载完成
$(document).ready(function(){
});二、jQuery对象
1. jQuery的顶级对象 $
$ 是 jQuery 的别称，在代码中可以使用 $ 代替jQuery
2. jQuery 对象 和 DOM 对象
jQuery对象：用jQuery方法获取过来的对象就是jQuery对象
DOM对象：用原生js获取过来的对象，就是DOM对象
jQuery对象本质：通过$ 把DOM元素进行了包装（伪数组形式存储）
3. jQuery 和 DOM 相互转换
（1）DOM对象 转换为 jQuery对象
$("div");
（2）jQuery对象 转换为 DOM对象
// (1)
$("div")[index] // index 是索引号
//(2)
$("div").get(index)三、 jQuery 选择器
1. 基础选择器
| 名称 | 用法 | 说明 |
| ID选择器 | $（"#id"） | 获取指定ID的元素 |
| 全选选择器 | $（'*'） | 匹配所有元素 |
| 类选择器 | $（".class"） | 获取同一类class的元素 |
| 标签选择器 | $（"div"） | 获取同一类标签的所有元素 |
| 并集选择器 | $（"div,p,li"） | 选取多个元素 |
| 交集选择器 | $（"li.current"） | 交集元素 |
2. 层级选择器
| 名称 | 用法 | 描述 |
| 子代选择器 | $（"ul>li"） | > 获取亲儿子层级的元素 |
| 后代选择器 | $（"ul li"） | 空格 获取儿子 孙子等 |
3. jQuery 筛选选择器
| 语法 | 用法 | 说明 |
| : first | $（"li:first"） | 获取第一个 li 元素 |
| : last | $（"li:last"） | 获取最后一个 li 元素 |
| : eq(index) | $（"li:eq(2)"） | 选择索引号为2的元素，索引号index从0开始 |
| : odd | $（"li:odd"） | 选择索引号为奇数的元素 |
| : even | $（"li:even"） | 选择索引号为偶数的元素 |
4. 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").prevAll() | 查找当前元素之前，所有的同辈元素 |
| hasClass（class） | $('div').hasClass("protected") | 检查当前的元素是否含有某个特定的类，如果有，返回true，否则返回 false |
| eq（index） | $("li").eq(2); | 相当于$("li:eq(2)") ，index从0开始 |
四、jQuery其他
1. 隐式迭代 ★★
定义：遍历内部DOM元素（伪数组形式存储）的过程，叫做隐式迭代
隐式迭代：对同一类元素做同样的操作
简单理解：给匹配到的所有元素进行隐式循环遍历，执行相应的方法，而不用我们再进行循环
2. jQuery 排他思想
定义：当前元素设置样式，其余兄弟元素清除样式
<script>
$(function () {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function () {
// 2. 当前元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", '');
})
})
</script>3. 链式编程
使用链式编程 一定注意：是哪个对象执行样式
<script>
// 使用链式编程 一定注意：是哪个对象执行样式
$(function () {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function () {
// 2. 让当前元素颜色变为色
$(this).css("background", "pink");
// 3. 其余兄弟姐妹 不变色
$(this).siblings("button").css("background", '');
// 4. 链式编程写法 (我变色 我兄弟姐妹不变色)
$(this).css("background", "pink").siblings().css("background", '')
})
})
</script>五、jQuery 样式设置
1. jQuery 样式操作 之css方法
jQuery 可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
（1）参数只写属性名，则返回属性值
$(this).css("width");（2）参数是属性名，属性值，逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color","red");（3）参数可以是对象形式，可设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({
width: 500,
height: 500,
backgroundColor: "skyblue"
})2. 设置 类样式方法
作用等同于以前的clssList，可以操作类样式，注意操作类里边的参数不加点
| 语法 | 说明 |
| $("div").addClass("current") | 添加类 |
| $("div").removeClass("current") | 移除类 |
| $("div").toggleClass("current") | 切换类 |
3. 类操作 与 className 的区别
- 原生JS中 className 会覆盖元素原先里边的类名
- jQuery 里边的类操作只对指定类进行操作，不影响原先的类名
六、 jQuery 常见动画效果
1. 显示 / 隐藏 show / hide
| 语法 | 说明 |
| show（[speed，[easing]，[fn]]） | 显示 |
| hide（[speed，[easing]，[fn]]） | 隐藏 |
| toggle（[speed，[easing]，[fn]]） | 切换 |
- speed：有三个值 slow、normal、fast ；或者表示动画时长的毫秒数（如：1000）
- easing：用来指定切换效果，默认swing 可用参数linear
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
- 参数都可以省略，无动 画直接显示
2. 滑动 slide
| 语法 | 说明 |
| slideDown（[speed，[easing]，[fn]]） | 向下滑动元素 |
| slideUp（[speed，[easing]，[fn]]） | 向上滑动元素 |
| slideToggle（[speed，[easing]，[fn]]） | slideDown() 与 slideUp() 之间切换 |
3. 事件切换 hover
| 事件切换 | 说明 |
| hover（[over]，out） | 鼠标经过 和 鼠标离开 的符合写法 |
- over：鼠标移动到元素上 要触发的函数（相当于mouseenter）
- out：鼠标离开元素 要出发的函数（相当于mouseleave）
- 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
// (1) 事件切换hover 鼠标经过 和 鼠标离开 的符合写法
$(".nav>li").hover(function () {
$(this).children("ul").slideDown(200);
}, function () {
$(this).children("ul").slideUp(200);
});
// (2) 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function(){
$(this).children("ul").slideToggle();
});4. 淡入淡出 fadeIn / fadeOut
| 语法 | 说明 |
| fadeIn（[speed，[easing]，[fn]]） | 淡入 |
| fadeOut（[speed，[easing]，[fn]]） | 淡出 |
| fadeToggle（[speed，[easing]，[fn]]） | fadeIn() 与 fadeOut() 之间切换 |
| fadeTo（[speed，opacity，[easing]，[fn]]） | 将被选元素的不透明度 逐渐 改变为指定的值 eg：fadeTo（1000，0.3） |
- opacity：透明度，必须写！（取值0~1 之间）
5. 自定义动画 animate
| 语法 | 说明 |
| animate（params，[speed]，[easing]，[fn]） | 创建自定义动画函数 |
- params：想要更改的样式属性，以对象形式传递，必须写！
- 属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法（ eg：borderLeft ）
- animate 主要针对元素做动画，把对象html、body包装成元素
返回顶部:
$(".back").click(function () {
(1) 直接返回顶部
$(document).scrollTop(0);
(2) 带有动画的返回顶部
不能是文档document而是给 html和body元素做动画
$("html,body").stop().animate({
scrollTop: 0
})
})6. 动画队列 之 停止排队方法 stop()
| 方法 | 说明 |
| stop（） | 停止动画 或 效果 写到动画 或 效果的前面（相当于停止结束上一次的动画） |
七、 jQuery 属性操作
1. 获取 / 设置 元素固有属性值 prop
| 语法 | 说明 |
| prop（"属性"） | 获取属性 |
| prop（"属性"，"属性值"） | 设置/修改 元素属性值 |
2. 获取 / 设置 元素自定义属性值 attr
| 语法 | 说明 |
| attr（"属性"） | 获取属性 类似原生 getAttribute( ) |
| attr（"属性"，"属性值"） | 设置属性值 类似原生 setAttribute( ) |
八、 数据缓存 data( )
说明：data( ) 方法可以在指定的元素上存取数据，并不会修改Dom元素结构
- 一旦页面刷新，之前存放的数据都将被移除
| 语法 | 说明 |
| data（"name"，"value"） | 向被选中元素 附加数据 |
| data（"name"） | 向被选中元素 获取数据 |
九、jQuery 内容文本值
主要针对元素的内容 还有 表单的值操作
1. 普通元素内容html（）
- 相当于原生innerHTML
| 语法 | 说明 |
| html（） | 获取元素内容 |
| html（"内容"） | 设置元素内容 |
2. 普通元素文本内容text（）
- 相当于原生innerText
| 语法 | 说明 |
| text（） | 获取 元素文本内容 |
| text（"文本内容"） | 设置 元素文本内容 |
3. 获取表单值
| 语法 | 说明 |
| val（） | 获取/设置 表单值 |
十、 jquery元素操作
1. 遍历元素 each()
遍历：给同一类元素做不同的操作
（1）each() 方法
// 语法一:
$("div").each(function(index,domEle){xxx;})
- each（）方法，遍历匹配的每一个元素，主要用DOM处理，each每一个
- index：索引号
- demEle：是DOM元素对象，不是jquery对象
- 要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
（2）$.each() 方法
// 语法二：
$.each(object,function(index,element) {xxx;})- $.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
- index：索引号
- element：遍历内容
2. 创建元素
$("<li></li>");3. 添加元素
- 内部添加 （生成之后，父子关系）
(1) 把内容放入匹配元素内部 最后面，类似原生appendChild
element.append("内容");
(2) 把内容放入匹配元素内部 最前面
element.prepend("内容");- 外部添加（生成之后，兄弟关系）
(1) 把内容放入目标元素 后面
element.after("内容");
(2) 把内容放入目标元素 前面
element.before("内容");4. 删除元素
(1) 删除匹配的元素 (本身)
element.remove();
(2) 删除匹配的元素集合中所有的 子节点
element.empty();
(3) 清空匹配的元素内容
element.html("");十一、 jQuery 尺寸
| 语法 | 说明 |
| width() / height() | 取得匹配元素宽度和高度值 只算 width / height |
| innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 包含 padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含 padding、border |
| outerWidth( true ) / outerHeight( true ) | 取得匹配元素宽度和高度值 包含 padding、border、margin |
- 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数是数字，则是修改相应值
- 参数可以不写单位
十二、 jQuery位置操作
| 方法 | 说明 |
| offset ( ) | 返回相对于文档的偏移坐标，跟父级没有关系； 可以设置元素的偏移：offset（{top：30，left：30}）; |
| offset ( ) .top | 获取距离文档顶部的距离 |
| offset ( ) .left | 获取距离文档左侧的距离 |
| position（） | 返回相对于带有定位父级的偏移坐标； 父级没有定位，以文档为准 |
| scrollTop（） | 获取元素被卷去的头部 |
| scrollLeft（） | 获取元素被卷去的左侧 |
十三、 jQuery事件注册
1. 单个事件注册
语法1：
element.事件(function(){})
语法2：
$("div").click(function(){事件处理程序})2. 事件处理 on（）绑定事件 ★ ★
// 语法：
element.on(events,[selector],fn)- events：一个或多个事件用逗号分隔 eg："mouseover"、"mouseout"、"click"
- 多个相同事件处理程序，空格隔开
- selector：元素的子元素选择器
- fn：回调函数
（1）on() 方法可以进行 事件委派 操作
事件委派：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$("ul").on("click","li",function(){
alert('hello');
});
（2）on() 方法可以给 未来动态生成的元素 绑定事件 ★ ★
<ol> </ol>
...
on() 方法可以给未来动态生成的元素绑定事件 ★★
$("ol").on("click", "li", function () {
alert(222);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
3. off（）解绑事件
1.解绑所有事件
$("div").off();
2.解绑 点击事件
$("div").off("click");
3.解绑on()方法添加的 事件委托
$("ul").off("click","li");
4. one（）只想触发一次的事件
one() 绑定只想触发一次的事件：
$("p").one("click", function () {
alert(11);
})5. 自动触发事件 trigger（）
1. element.click();
2. element.trigger("click");
3. element.triggerHandler("focus");十四、jQuery事件对象
1. jQuery事件对象
事件被触发，就会有事件对象的产生
element.on(events,[selector],function(event){ })
(1) 阻止默认行为
event.preventDefault() 或者 return false
(2) 阻止冒泡
event.stopPropagation()2. jQuery对象拷贝
语法：
$.extend([deep],target,object1,[objectN])- deep：为true 深拷贝，默认为false 浅拷贝
- target：目标对象
- object：拷贝对象
- 说明：把object里边的对象 拷贝到 target里边
- 浅拷贝：把复杂数据类型地址 拷贝给目标对象 (直接覆盖)；修改目标对象，影响被拷贝对象
- 深拷贝：加true，完全克隆，合并不冲突属性；修改目标对象，不会影响被拷贝对象
十五、jQuery多库共存
定义：让jQuery 和 其他JS库 不存在冲突，就叫做多库共存
解决方案：
- 把 $ 统一修改为 jQuery
-
让jquery 释放对 $ 的控制权，由用户自己决定
让jquery 释放对$的控制权 让用户自己决定
var hah = jQuery.noConflict();
console.log(hah("span"));
hah.each();十六、 jQuery 插件
1. jQuery 插件使用步骤
- 引入相关文件
- 复制相关html、css、js（调用差价）
（1）jQuery之家★★：jQuery之家-自由分享jQuery、html5、css3的插件库
（2）jQuery插件库：jQuery插件库-收集最全最新最好的jQuery插件
2. jQuery 插件演示
（1）瀑布流
（2）图片懒加载（页面滑动到可视区，再显示图片）
- 插件库 --> EasyLazyload
- 注意：js引入文件 和 js调用 ，必须写到DOM元素（图片）最后面 ★
（3）全屏滚动(fullpage.js)
- 中文网站：jQuery全屏滚动插件fullPage.js演示_dowebok
- gitHub：GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
（4）tab栏切换 / 标签栏切换
（5）模态框
- 下滑到 --> 用法 --> 通过data属性，建立连接
- 利用 JavaScript 写，建立连接 ； modal(参数) 里边没有参数 可以不填写
（6）导航条
类似资料：