jQuery
1. jQuery 介绍
1.1. JavaScript 库
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。
1.2. jQuery的概念
jQuery总体概况如下 :
-
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
-
j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
-
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
-
学习jQuery本质： 就是学习调用这些函数（方法）。
-
jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
1.3. jQuery的优点
轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。
2. jQuery 的基本使用
2.1. jQuery 的下载
jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。
各个版本的下载：https://code.jquery.com/
版本介绍：
1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
2.2. 使用jQuery
步骤：
- 引入jQuery文件。
- 在文档最末尾插入 script 标签，书写代码。
- $(‘div’).hide() 可以隐藏盒子。
2.3. jQuery的入口函数
jQuery中常见的两种入口函数：
// 第一种: 简单易用。
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
总结：
- 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
- 相当于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
- 更推荐使用第一种方式。
2.4. jQuery中的顶级对象$
- $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
- $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
2.5. jQuery对象和DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。
2.6. jQuery对象和DOM对象转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
// 2.jQuery 对象转换为 DOM 对象有两种方法：
// 2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]
// 2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)
总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。
3. jQuery 选择器
原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装，使获取元素统一标准。
3.1. 基础选择器
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
3.2. 层级选择器
层级选择器最常用的两个分别为：后代选择器和子代选择器。
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”) | 使用>号，获取亲儿子层级的元素；注意：并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”) | 使用空格，代表后代选择器，获取ul下所有的li元素，包括子孙等 |
基础选择器和层级选择器案例代码
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
3.3. 筛选选择器
筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :
| 名称 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的li元素中，选择索引为2的li元素，索引index从0开始 |
| ：odd | $(“li:odd”) | 获取到的li元素中，选择索引为奇数的li元素 |
| ：even | $(“li:even”) | 获取到的li元素中，选择索引为偶数的li元素 |
案例代码
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body>
3.4. jQuery中筛选方法
- 类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。
| 名称 | 用法 | 描述 |
|---|---|---|
| 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() | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(".last").prevtAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”),index从0开始 |
parents：上级元素，获取祖先元素
parents(selector)
index() 可以获取索引号
// 得到当前小li 的索引号
var index = $(this).index()
4. jQuery 样式操作
jQuery中常用的样式操作有两种：
- css()
- 设置类样式方法
4.1. css() 方法
- jQuery 可以使用 css ()方法来修改简单元素样式； 也可以操作类，修改多个样式。
常用以下三种形式 :
// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
// 3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
注意：css() 多用于样式少时操作，多了则不太方便。
4.2. 设置类样式方法
- 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
常用的三种设置类样式方法：
元素.addClass()
元素.removeClass()
元素.toggleClass
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
注意：
- 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
- 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
5. jQuery动画效果
jQuery 封装了很多动画效果，最为常见的如下：
- 显示隐藏：
- show() 显示
- hide() 隐藏
- togkgle() 切换显示隐藏
- 滑入滑出：
- slideDown() 下滑动
- slideUp() 上滑动
- slideToggle() ; 滑动切换
- 淡入淡出：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo() ;
- 自定义动画：
- animate() ;
注意：
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop() ;
5.1. 显示隐藏
显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
代码演示
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情况下，我们都不加参数直接显示隐藏就可以了
});
</script>
</body>
5.2. 滑入滑出
滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;
slideDown([speed,[easing],[fn]])【显示】
slideUp([speed,[easing],[fn]])【隐藏】
slideToggle([speed,[easing],[fn]])
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
代码演示
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑动 slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑动 slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑动切换 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
5.3. 淡入淡出
淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]]) opacity透明度必须写
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
代码演示
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 透明度要必须写
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
5.4. 自定义动画animate()
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;
语法：animate(params,[speed],[easing],[fn])
参数：
（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
代码演示
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
5.5. 停止动画排队stop()
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画排队的方法为：stop() ;
stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
总结: 每次使用动画之前，先调用 stop() ,再调用动画。
5.6. 事件切换hover()
jQuery中添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下
hover([over,]out) // 其中over和out为两个函数
$('div').hover(function () {鼠标进入的函数},function () {鼠标离开的函数});
over:鼠标移到元素上要触发的函数（相当于mouseenter、mouseover）
out:鼠标移出元素要触发的函数（相当于mouseleave、mouseout）
如果只写一个函数，则鼠标经过和离开都会触发它
<script>
$(function() {
// 鼠标经过
$(".nav>li").mouseover(function() {
// $(this) jQuery 当前元素 this不要加引号
$(this).children("ul").slideDown(200);
});
// 鼠标离开
$(".nav>li").mouseout(function() {
$(this).children("ul").slideUp(200);
});
// 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();
});
})
</script>
6. jQuery 的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings().css(“color”,””);
7. 隐式迭代
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，
// 而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
<script type="text/javascript">
// 因为：隐式迭代
$('ul li').css('background','blue');
// js做法
// var lis = document.querySelectorAll('li');
// for (var i = 0; i < lis.length; i++) {
// lis[i].style.background = 'red';
// }
</script>
8. 链式编程
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
9. jQuery 属性操作
<img src="a.jpg" id="d1" width="100 index='3'>
固有属性，自定义属性
jQuery 常用属性操作有三种：
prop() 操作固有属性
attr() 操作自定义属性
data() 数据缓存
9.1. 元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性，比如 <a>元素里面的 href ，比如 <input>元素里面的 type。
获取语法：
prop(’‘属性’’) $(‘div’).prop(‘id’)
设置属性语法
prop(’‘属性’’, ‘‘属性值’’) $(‘div’).prop(‘id’,‘d2’)
change事件，表单中checked属性
9.2. 元素自定义属性值attr()
用户自己给元素添加的属性，称为自定义属性。比如给 div 添加 index=“1”。
获取属性语法
attr(’‘属性’’) // 类似原生 getAttribute()
设置属性语法
attr(’‘属性’’, ‘‘属性值’’) //类似原生 setAttribute()
9.3. 数据缓存data()
当做变量存储
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构，所以元素上无法查看。
一旦页面刷新，之前存放的数据都将被移除。
附加数据语法
data(’‘name’’,’‘value’’) // 向被选元素附加数据
获取数据语法
date(’‘name’’) // 向被选元素获取数据
$('span').data('spanindex',3);
console.log($('span').data('spanindex'));
注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
- jQuery中提供data()专门用来获取 data-开头 的属性,不用写data-
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// 2. 元素的自定义属性通过 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// data()获取data-index, h5自定义属性,不用写data而且返回的是数字型
console.log($("div").data("index"));
})
</script>
</body>
10. jQuery 文本属性值
jQuery的文本属性值常见操作有三种：
html() -------------对应JS中的 innerHTML
text() -------------对应JS中的 innerText
val() --------------对应JS中的 value
10.1. jQuery内容文本值
常见操作有三种：html() / text() / val() ; 主要针对元素的内容还有表单的值操作。
普通元素内容 html()（相当于原生innerHTML)
获取：html() // 获取元素的内容
设置：html(’‘内容’’) // 设置元素的内容
普通元素文本内容 text() (相当与原生innerText)
获取：text() // 获取元素的文本内容
设置：text(’‘文本内容’’) // 设置元素的文本内容
表单的值 val()（相当于原生value)
获取：val() // 获取表单的值
设置：val(’‘内容’’) // 设置表单的值
注意：html() 可识别标签，text() 不识别标签。
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($("div").html());
$("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("123");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
11. jQuery 元素操作
主要是用jQuery方法遍历、创建、添加、删除元素操作。
11.1. 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：$(“div”).each(function(index, domEle) { xxx; }）
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：$.each(object，function(index, element){ xxx;}）
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍历元素
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号名称
// 回调函数第二个参数一定是 dom 元素对象，也是自己命名
// 使用jQuery方法需要转换 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
</body>
11.2. 元素创建、添加、删除
- jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：
创建元素
$(''<li>内容</li>'');
添加元素
内部添加：产生的父子级关系
父element.append(’‘内容’’) [把内容放入匹配元素内部最后面，类似原生 appendChild。
父element.prepend(’‘内容’’) 把内容放入匹配元素内部最前面。
外部添加
父element.after(’‘内容’’) // 把内容放入目标元素后面
父element.before(’‘内容’’) // 把内容放入目标元素前面
内部添加元素，生成之后，它们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。
删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html(’’’’) // 清空匹配的元素内容
remove 删除元素本身。
empty() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。
注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// 2.1 内部添加
$("ul").append(li); // 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// 2.2 外部添加
var div = $("<div>我是后妈生的</div>");
$(".test").after(div);
$(".test").before(div);
// 3. 删除元素
$("ul").remove(); 可以删除匹配的元素 自杀
$("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>
12. jQuery 尺寸、位置操作
jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。
12.1. jQuery 尺寸操作
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。
width()、height()【只算width和height】
innerWidth()、innerHeight()【包含padding+width】
outerWidth()、outerHeight()【包含padding、border、width】
outerWidth(true)、outerHeight(true)【包含padding、border、margin、width】
注意:以上参数为空,则获取相应值,参数若为数字,则设置
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
$("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() /outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
注意：这套可以快速获取元素的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。
12.2. jQuery 位置操作
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft();
offset()设置或获取元素偏移
offset() 方法 设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性 left、top
offset().top 用于获取距离文档顶部的距离，
offset().left 用于获取距离文档左侧的距离。
可以设置元素的偏移：offset({ top: 10, left: 30 });
// 获取son的位置
// offset：获取元素距离文档的位置，返回是对象
// 如果只想获取其中某一个值，那么我们offset().top
// console.log( $('.son').offset() );
$('.son').offset({
top : 200,
left : 300
});
position()获取元素偏移
返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性 left、top。
position().top 用于获取距离定位父级顶部的距离
position().left 用于获取距离定位父级左侧的距离。
注意：该方法只能获取,不能设置。
scrollTop()、scrollLeft()
scrollTop()、scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop() 方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
scroll事件：滚动事件
谁有滚动条加给谁
代码演示
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
$(".son").offset({
top: 200,
left: 200
});
// 2. 获取距离带有定位父级位置（偏移） position
// 如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// 3. 被卷去的头部
$(document).scrollTop(100);
// 被卷去的头部 scrollTop()
// 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
13. jQuery 事件注册
jQuery 提供了方便的事件注册机制，使开发人员易于操作,优缺点如下：
- 优点: 操作简单，且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
语法：element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
14. jQuery 事件处理
因为普通注册事件方法的不足，jQuery又开发了多个处理方法，如下：
on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发
14.1. on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：element.on(events,[selector],fn)
1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
2. selector: 元素的子元素选择器 。
3. fn:回调函数 即绑定在元素身上的侦听函数。
on() 方法优势1：
可以绑定多个事件，多个处理事件处理程序。
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
on() 方法优势2：
可以事件委派操作。
事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function() {
alert('hello world!');
});
在此之前有bind(), live()，delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
on() 方法优势3：
动态创建的元素，click()没有办法绑定事件，on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
}
});
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
14.2. off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 off 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次， 可以使用 one()来绑定事件。
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，重点讲解一下 off() ;
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
// 事件委托
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
$("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li"); // 解绑事件委托
// 2. one() 只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
14.3. trigger() 自动触发事件
jQuery 提供了两个自动触发事件 trigger() 和 triggerHandler() ;
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。
可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
-
element.click() // 第一种简写形式
-
element.trigger(“type”)//第二种自动触发模式
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
- element.triggerHandler(type) // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
$("div").click();//会触发元素的默认行为
// 2. 元素.trigger("事件")
$("div").trigger("click"); // 会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 一个会获取焦点，一个不会
$("div").triggerHandler("click");
$("input").triggerHandler("focus");
});
</script>
</body>
15. jQuery 事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
事件被触发，就会有事件对象的产生。
【event==>事件对象】
element.on(events,[selector],function(event){})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
演示代码
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</body>
注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。
16. jQuery 拷贝对象
$.extend([deep],target,object1,[objectN])
// deep:如果设为true，为深拷贝，默认为false浅拷贝
// target：要拷贝的目标对象
// object1：待拷贝到第一个对象的对象
// objectN：待拷贝到第N个对象的对象
// 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
// 深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>
17. jQuery 多库共存
实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。
jQuery 多库共存解决方案：
- 1.把里面的$符号统一改为jQuery。例如：jQuery(“div”)
- 2.jQuery变量规定新的名称:
$noConflict()var xx= $noConflict()
<script>
$(function() {
// 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>
18. jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入
jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
-
jQuery 插件库 http://www.jq22.com/
-
jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
-
引入相关文件。（jQuery 文件 和 插件文件）
-
复制相关html、css、js (调用插件)。
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
