jQuery总结
一、jQuery概述
-
什么是jQuery?
它是一个简单、快速的JS库，它设计的宗旨是“write less , do more”，因此它非常简洁，它还对于JS中的DOM进行了封装，优化了DOM操作、事件处理、动画设计等，让我们可以快速的查询使用里面的功能。
学习jQuery就是学习调用这些方法。 -
它的优点有哪些？
①轻量级，不影响页面的加载速度
②跨浏览器兼容
③含有链式编程、隐式迭代
④对事件、样式、动画支持，简化了DOM操作
⑤支持插件扩展开发，有丰富的第三方插件，能方便的制作轮播图、树形菜单等
⑥免费、开源 -
jQuery代码写在那里，如何书写？
jQuery的代码不仅要写在<script></script>标签内还要写在入口函数内。在使用jQuery之前一定要在官网中下载 jquery.min.js 文件并引入页面中 -
什么是入口函数？
jQuery有两种入口函数的写法，如下：
// $(document).ready(function() {
// DOM加载完成的入口
// });
$(function() {
// DOM加载完成的入口
})
平时书写更推荐第二种（因为更简单）。
入口函数是等着DOM结构渲染完毕就可以执行内部代码，不用等到所有外部资源加载完毕，因为jQuery已经完成了封装。
它相当于原生JS中的DOMContentLoaded.
二、jQuery对象与DOM对象
- jQuery的顶级对象就是我们上面看到的 $ 符号，它等价于 jQuery 这个单词，因此书写时可以替换，但是平时写成$，为了避免多库冲突（写在后面）时写成 jQuery。
- 这个顶级对象相当于原生JS中的 window。把元素利用顶级对象包装成jQuery对象，就可以调用里面的方法了。
- DOM对象：用原生JS获取过来的对象
var mydiv = document.querySelector('div');
- jQuery对象：用 jquery 获取的对象，本质是通过 $ 对 DOM 元素进行包装
$("div");
- 需要注意的是jQuery对象 只能使用 jQuery 的方法， DOM对象只能使用原生 JS 属性和方法，两者不能混淆。
- 两种对象之间的转换：
DOM 对象转换为 jQuery 对象：
①直接获取$("div");
②使用原生 JS 获取过来的 DOM 对象
var mydiv = document.querySelector("div");
$(mydiv);
jQurey 对象转换为 DOM 对象：
①jQurey对象[index].方法
②jQurey对象.get(index).方法
$("div")[index]
$("div").get(index)
三、隐式迭代与常用API
1. 隐式迭代
遍历内部DOM元素（以伪数组形式存储）的过程叫隐式迭代。简单理解就是元素内部自己遍历，执行相同的方法。不需要使用for循环。
2. 基础选择器
包括ID选择器、全选选择器、类选择器、标签选择器、并集选择器、交集选择器…
其中层级选择器还有子代选择器和后代选择器比较常用。
$("选择器") // $("#id")
$("子代选择器") // $("ul>li")
3. 筛选选择器
:first $("li:first") // 选择第一个li
:last $("li:last") // 选择最后一个li
:eq(index) $("li:eq(2)") // 选择索引号为 2 的li
:odd $("li:odd") // 选择索引号为奇数的 li
:even $("li:even") // 选择索引号为偶数的 li
4. 筛选方法
.parent() 返回最近一级的父元素
.children(选择器) 选出亲儿子
.find(选择器) 选出父元素的所有孩子，包括儿子和孙子
.siblings(选择器) 选择除了自身以外的所有兄弟元素
.eq(index) 相当于 :eq(index) $("li:eq(2)") // 选择索引号为 2 的li
5. 样式操作
$("选择器").css("属性名") // 返回属性值
$("选择器").css("属性名", "属性值") // 设置属性值
$("选择器").css({"属性名", "属性值"}) // 参数为对象则可以设置多个样式
6. 类操作
//添加类
// $("选择器").addClass("类名")
$("div").addClass("current");
// 删除类
$("div").removeClass("current");
// 切换类
$("div").toggleClass("current");
jQuery中类操作的addClass与原生JS中 className最主要的区别是：原生JS中 className会覆盖原来的类，addClass是追加类，不会覆盖。
7.属性操作
①获取/设置元素的固有属性
element.prop("属性名") // 获取固有属性
element.prop("属性名", "属性值") // 设置固有属性
②获取/设置元素的自定义属性
element.attr("属性名") // 获取自定义属性
element.attr("属性名", "属性值") // 设置自定义属性
③数据缓存 data()
就是将获取过来的元素当成一个变量，可以在它身上存储数据，这个数据存在内存中，我们可以取出来，并且他不会修改DOM元素的结构，页面刷新以后，这个数据也会被移除。数据缓存还可以获取H5自定义属性 data-index ，需要注意写的时候 不加 data- 并且返回的数字型。
$("span").data("uname", "andy");
console.log($("span").data("uname")); //控制台显示 andy
//获取H5自定义属性 data-index 写的时候 不加 data- 并且返回的数字型
console.log($("div").data("index"));
8. 内容文本
①设置/获取内容 .html()
②设置/获取文本内容 .text()
③设置/获取表单值 .val()
9. 元素操作
① 遍历元素 $.each() （常用）
针对同一类元素做不同操作需要用到遍历，这个方法主要用于遍历数据，处理数据。这个方法不仅可以遍历数组，也可以遍历对象
// 遍历元素
$.each($("div"), function(index, ele) {
console.log(index); // 输出索引号
console.log(ele); // 输出元素对象
});
// 遍历对象/数组
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出属性名
console.log(ele); // 输出属性值
});
② 创建元素$("需要创建的元素标签对") 如 $("<li>我是后来创建的</li>")
③ 添加元素
(1) 内部添加的是父子关系
$("ul").append(li); // 放到内容之后
$("ul").prepend(li); // 放到内容之前
(2) 外部添加的是兄弟关系
$(".test").after(div); // 添加到元素之后
$(".test").before(div); // 添加到元素之前
④删除元素
删除匹配元素： .remove()
删除匹配元素里面的子节点： .empty()
删除匹配元素里面的子节点： .html()
四、事件
- 绑定事件 .on() 方法
在匹配元素上绑定一个/多个事件处理函数element.on("事件类型", [子元素选择器], 回调函数)
<script>
$(function() {
// 1.单个事件注册
// $("div").click(function() {
// $(this).css("background", "pink")
// });
// $("div").mouseenter(function() {
// $(this).css("background", "blue")
// });
// 2.事件处理on
$("div").on({
mouseenter: function() {
$(this).css("background", "#ccc")
},
click: function() {
$(this).css("background", "red")
}
});
// 3.事件委托
// click是绑定在ul 上面的 但是触发的是 li
$("ul").on("click", "li", function() {
alert(11);
});
// 4.给动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(22);
});
var li = $("<li>后来建的</li>");
$("ol").append(li);
});
</script>
优势：①可以绑定多个事件，有多个事件处理程序 ，若事件处理程序相同，可以用空格隔开事件，使得代码简洁美观
②能够进行事件委托
-
解绑事件 .off()
用来移除通过 on() 绑定的事件，它可以解除所有事件 -
仅触发事件一次的方法 one()
-
自动触发事件
①元素.事件（）$("div").click(); // 刷新页面自动触发
②元素.trigger(“事件”)$("div").trigger("click");
③元素.triggerHandler(“事件”) 与上面两种方法的区别是它不会触发元素的默认行为，例如表单获得焦点之后光标闪动$("div").triggerHandler("click"); -
微博发布信息案例
①点击发布按钮就可以动态的创建 li , 取文本框的内容赋给li中并添加一个删除按钮，添加到 ul 中
②点击删除，将li 删除由于li中的删除链接是动态创建的，没有办法直接利用click事件进行删除所以使用 on()和事件委托
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发布微博案例</title>
<style type="text/css">
.box {
width: 600px;
margin: 100px auto;
border: 1px solid black;
text-align: center;
padding-top: 30px;
}
ul {
width: 450px;
padding-left: 80px;
list-style: none;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #CCCCCC;
}
input {
float: right;
}
ul li a{
float: right;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1.点击发布按钮就可以动态的创建 li , 取文本框的内容赋给li中并添加一个删除按钮，添加到 ul 中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
});
// 2.点击删除，将li 删除
// 因为程序是自上而下执行的，当没有点击删除的时候执行下面代码
// 又因为li中的删除链接是动态创建的，没有办法直接利用click事件进行删除所以使用 on()和事件委托
$("ul").on("click", "a",function() {
$(this).parent().slideUp(function() {
$(this).remove();
})
});
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea class="txt" cols="30" rows="10" style="resize: none;"></textarea>
<button class="btn">发布</button>
<ul></ul>
</div>
</body>
</html
五、拷贝对象
使用 $.extend([deep], target, obj1, objn) 方法
deep若为 true 则为深拷贝，反之为浅拷贝
target: 目标对象
obj1: 要拷贝对象的第一个对象
objn: 要拷贝对象的第n个对象
浅拷贝： 浅拷贝是把 原来对象的 复杂数据类型中的地址拷贝给目标对象，因此他们指向同一个地址
修改目标对象的复杂数据类型中的值 原来对象里面的值也会被覆盖（受影响）
深拷贝： 直接将原来对象克隆给目标对象 即拷贝的是一个对象而不是地址，不会覆盖冲突的值 而会合并冲突属性
修改目标对象的复杂数据类型中的值 原来对象里面的值不会受影响 因为他们在内存中指向单独的对象
六、多库共存引发的冲突
- 原因：编写一个网站往往会用到很多的JS库，其中难免 $ 会与其他的JS库冲突
- 解决方法：
① 将 $ 统一写成 jQuery
② 使用自定义变量 jQuery.noConflict()
var xx = jQuery.noConflict();
console.log(xx("span"));
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
