前端——jQuery
初识jQuery
什么是jQuery？
jQuery就是JavaScript和Query，是辅助JavaScript开发的库，应用广泛，形成了行业标准。它对DOM操作做了很好的封装，我们可以用jQuery非常方便地来代替DOM操作。
为什么要使用jQuery？
轻量级，最新版本的大小只有85KB；功能强大的选择器；出色的DOM封装；兼容性好（可以在不同浏览器使用）；可靠的事件处理机制；完善的Ajax支持；丰富的插件支持。
jQuery的理念是：写得少,做得多(write less,do more)。
如何使用jQuery？
官网去jQuery官网下载最新的jQuery，放在项目文件夹内，在html文件中JS代码上方加入 <script src=”jquery-3.3.1.js”></script> 即可。
jQuery对象与DOM对象的相互转化
1. jQuery对象转化成DOM对象
- $(DOM对象) = jQuery对象
2.DOM对象转化成jQuery对象
- jQuery对象[0] = DOM对象
- jQuery对象.get(0) = DOM对象
jQuery大全：http://jquery.cuishifeng.cn/
查找元素
常用选择器
1. 根据 id 找标签
$("#id")
2. 根据 class 使用样式找标签
<div class="c1"></div>
$(".c1")
3. 根据标签类型寻找
$("a") // 找到所有a标签
4. 组合查找
（用逗号隔开）
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$("a,.c2,#i10") 相当于 $("a") + $(".c2") + $("#i10")
5. 层级选择
（用空格隔开）
$("#i10 a") 将id=i10的标签下所有后代a标签找出来
$("#i10>a") 只找子标签，不找孙标签
$("#i10+a") 找到#i10后面的所有a标签（兄弟+兄弟的后代，不包括自己的后代）
$("#i10~a") 找到所有与#i10同层的a兄弟标签
6. 基本选择器
:first 在选择出来的若干个标签中选择第一个 :last 最后一个 :even 奇数 :odd 偶数 :eq() 括号里写索引值，从0开始 :gt() 索引大于 :lt() 索引小于
7. 根据属性查找
自定义了bob属性时，
$("[bob]") 找出所有具有bob属性的标签
$("[bob='123']") 找出bob属性为123的标签
8. 表单
$("input[type='text']")
$(":text")
两者完全等价，后者是一个简写
筛选器
在选择器的基础上再次筛选。
$(this).next() 下一个
nextAll() 后面的所有标签
nextUntil("") 向后直到某标签
$(this).prev() 上一个
prevAll() 前面所有的标签
prevUntil("") 向前直到某标签
$(this).parent() 父标签
$(this).children() 所有子标签(在children的括号内也可以进一步筛选)如：children("[a='123']")
$(this).siblings() 所有兄弟标签（不包括自己）
first() 第一个
last() 最后一个
find("") 找到具有某样式的标签
hasClass("") 判断是否具有某样式
.eq("")与选择器eq功能相同，只是写法不同
示例：
$('#tb:checkbox').each(function(k){ // .each() 是jQuery使用的循环
// k当前索引
// this代指当前循环的每一个元素，为DOM对象
var v = $(this).prop("checked") ? false : true;
$(this).prop("checked",v);
})
jQuery方法内置循环： $('#tb:checkbox').操作
操作元素
jQuery支持链式编程，可以将很多操作写入一行
1. 绑定事件
jQuery的绑定事件操作与DOM非常相似
$("input[type='123']").click(函数名或匿名函数); jQuery
document.getElementById("").onclick = 函数名或匿名函数; DOM
2. 样式操作
.addClass("样式"); 增加某样式(力度大)
.removeClass("样式"); 删除某样式
.hasClass("样式"); 判断是否具有某样式，返回true或false
.toggleClass("样式") 多次执行时，交错地删除或添加某样式
.css("color"); 获取color样式的值
.css("display","none") 设置样式（力度小）
3. 文本操作
// 在DOM中，能够以innerText获取文本的操作在jQuery中都用 text()方法
.text() 获取文本内容
.text("内容") 设置文本内容
.html() 获取标签内容
.html("<a>内容</a>") 或 .html("内容") 设置文本内容，效果与上面相同
// 部分标签，如<input>,<select>,<textarea>标签 等原本是value的在这里都是val()
.val() 获取文本
.val("内容") 设置文本
4. 属性操作
// 可以用做自定义属性
.attr("value") 获取属性的值（传入属性名） .attr("value","1") 设置值（传两个参数）,可以新增、修改属性 .removeAttr("") 删除属性 // 专门用于checkbox，radio获取、设置值 .prop("checked",true)
如果要判断标签是否具有某属性，不能直接判断其属性值是否等于undefined，【 if(obj.attr(“value”) == “undefined” ) 】。因为undefined是属于undefined类型，而非字符串。正确的方法是：
if( typeof(对象.attr("属性")) == "undefined" )
5. 索引
.index() 获取此标签在父标签下的索引，常与eq一起用
6. 标签操作（创建插入删除）
.append("<a>123</a>") 在内部创建标签，添加到末尾
.prepend("<a>123</a>") 添加到内部最前面
.after("") 创建兄弟标签，紧随其后
.before("") 创建兄弟标签，紧随其前
.remove() 删除标签
.empty() 仅删除内容，不删除标签
.clone() 克隆一份 // 如果只克隆标签而不安排位置，标签不会显示出来
7.位置操作
.scrollTop() 获取/调整当前浏览的上下位置
.scrollLeft() 获取/调整当前浏览的水平位置
window是DOM对象，表示整个浏览页面窗口
$(window).scrollTop() 获取当前浏览相对于整个窗口的位置
$(window).scrollTop(0) 返回顶部
.offset() 获取指定标签在html中的坐标
.offset().top 距离顶部的坐标
.offset().left 距离左边的坐标
.position() 获取指定标签相对于父标签的坐标(相当于在父标签中relative,子标签中absolute)
.height() 获取标签的纯高度
.innerHeight() 纯高度 + 内边距
.outerHeight() 纯高度 + 内边距 + 边框
.outerHeight(true) 纯高度 + 内边距 + 外边距 + 边框
8.表单提交
a标签、submit按钮，本身具有提交/跳转功能，内置了点击事件。如果我们给此类标签再写一个点击事件，则会优先执行自己写的事件，然后再执行提交提交/跳转功能。如果想要屏蔽原有的功能，根据点击方式的不同，方法也不同。
// 在html中写Onclick事件绑定函数。
html：<a onclick="A();" href="http://www.baidu.com">点击啊</a>
JS： function A(){alert('123');return false;};
// 在js代码中绑定点击事件函数
$("a").click(function(){
alert('123');
return false;
});
两种方式效果相同，且针对 a标签 和 submit 都一样。
9. 其他操作和方法
- 标签的隐藏和显示
hide()和show() 在设置速度的情况下，从隐藏到完全可见的过程中会逐渐地改变高度、宽度、内外边距和透明度
fadeOut()和fadeIn() 控制透明度直至完全消失/显示
sildeUp()和sildeDown() 上升消失/下降显示
以上三对方法都可以直接作用于jQuery对象，实现的本质是改变display样式，不同之处在于隐藏/显示的过程中呈现的视觉效果不同。
hide/show（speed,callback） 参数：speed表示变化时间：”fast”,”normal”,”slow”或直接写时间（毫秒）
callback表示回调函数
调用方法时可以不传入参数，也可以传入两个，但如果传入一个只能是speed。
事件处理
jQuery事件处理主要有四种方法：bind()，delegate()，live()，on()。解除绑定事件分别对应unbind()，undelegate()，die()，off()
bind()支持所有jQuery版本，live()支持jQuery1.9-，delegate()支持1.4.2+，on()支持jQuery1.7+。由于1.9往后的版本不再支持live()，这里不再讲此方法。
bind()和其中的click()方法只能对原本有的标签绑定事件，而不能对动态添加的标签绑定。on()，delegate()，liev()都可以。
bind()、live()或.delegate()，查看源码就会发现，它们实际上调用的都是.on()方法，现在官方推荐on方法，所以大家以后尽量习惯on方法。
页面1：
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
<li id="s1">1</li>
<li>2</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
</script>
页面2：
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
一、bind() 和 unbind()
.bind("type", {data}, function)
参数： type：必需。绑定事件的类型。可以绑定多个，用空格隔开。
data：可选。传入参数，字典的形式。
function：必需。执行函数
我们常用的.click() .mouse()等方法，是bind()的简写。
.unbind("type", function) 删除由bind()方法添加的绑定事件
参数：type：可选。取消绑定的类型，可以是多个。
function：可选。取消绑定的函数
当没有参数时，删除此标签所有由bind()绑定的事件程序。
页面1示例：
$("ul").bind("click",function(){
var v = $(this).text();
alert(v);
});
二、delegate() 和 undelegate()
$("#s1").delegate("selector", "type", {data}, function)
参数：selector：必需。是一个选择器，可选择被点击元素的一个或多个子元素。在这里，并不是为s1绑定事件，而是为筛选后的selector绑定。
type：必需。绑定事件的类型。可以绑定多个，用空格隔开。
data：可选。传入参数，字典的形式。
function：必需。执行函数。
.undelegate("selector", "event", function) 删除由delegate()方法绑定的事件
参数：selector：可选。同上。
event：可选。事件，一个或多个
function：可选。解除指定的函数
如果没有参数，删除此标签所有由delegate()绑定的事件程序。
在解除事件函数绑定时，如果使用选择器，必需和绑定时的选择器相同，否则会解除失败。
页面1示例：
$('ul').delegate('li','click',A);
function A() {
var v = $(this).text();
alert(v);
}
$('ul').undelegate("li","click",A); // 解除绑定
$('ul').children().eq(0).undelegate(); // 解除绑定失败
$('ul').undelegate("#s1","click",A); // 解除绑定失败
// $('ul').delegate('#s1','click',function () {
// var v = $(this).text();
// alert(v);
// });
三、on() 和 off()
第一种语法结构：
.on("type", "selector", {data}, function)
参数：type：必需。同上
selector：可选。同上。
data：传入参数。同上。
function：执行函数。同上。
.off("type", "selector", function)
参数：type：必需。同上。
selector：可选。同上。
function：可选。指定取消绑定的函数。
如果没有参数，删除此标签所有由on()绑定的事件程序。
在解除事件函数绑定时，如果使用选择器，必需和绑定时的选择器相同，否则会解除失败。
第二种语法结构：
.on( {object:function(e){ ... }}，“selector”，{data} )
参数：object：必需。事件对象。
function：必需。执行函数。
selector：可选。选择器。
e：可选。形参
data：可选。
页面1示例：
// 第一种语法结构
$('ul').on('click','li',function () {
var v = $(this).text();
alert(v);
});
// 第二种语法结构
$("ul").on({
mouseenter: function() {
$(this).css("color","red");
},
mouseleave: function() {
$(this).css("color","black");
},
click: function(e) {
alert(e.data.a);
}
}, "li",{a:"你好"});
页面2示例：
<script>
function btnClick1(){
alert( this.value + "-1" );
}
function btnClick2(){
alert( this.value + "-2" );
}
var $body = $("body");
// 给按钮1绑定点击
$body.on("click", "#btn1", btnClick1 );
// 给按钮2绑定点击
$body.on("click", "#btn2", btnClick2 );
// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
// 点击按钮，btnClick1照样执行
$body.off("click", ":button", btnClick2); // 发现并不起作用
// 点击按钮1，不会执行任何事件处理函数
// $body.off("click", "#btn1");
// 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
</script>
四、one()
如果想要绑定一个事件，只想让它运行一次，不用使用解绑函数，用one()一步到位。
.one(event,data,function)
参数：event：必需。事件
data：可选。参数
function：必需。执行函数。
※ 如何在事件发生时往执行函数内传参呢？
利用事件绑定函数中参数data传入。以on为例。
.on("click",{a:"3",b:"4"},func2); // 传入参数以字典形式
function func2(c){
console.log(c.data["a"]);
console.log(c.data["b"]);
console.log(c.data.a);
console.log(c.data.b);
}
jquery扩展
1.如何理解 $(function(){ … }) ?
它等效于 $(document).ready(function(){})。
一般地写好的JavaScript代码，在html代码渲染完成后（完全加载完毕），才执行js代码，包括绑定的事件。如果有较大的图片片，视频等，会导致js代码迟迟不能执行，影响用户体验。
如果在JavaScript代码块内包一层 $(function(){ … }) ，将所有代码写在这里面，可以解决这一问题。它的意思是，当DOM页面文档框架布局加载完毕后，自动执行里面的代码。
2.jQuery扩展
扩展指的是将扩展内容写到别的文件(.js)，在主文件中导入即可直接使用。
// 类方法
$.extend({
"nihao":function(){
return "sb";
}
});
调用：
$.nihao();
//alert($.nihao());
// 对象方法
$.fn.extend({
"hello":function(){
return "db";
}
});
调用：
$("选择器").hello();
//alert(v2);
当引入多个js文件时，可能会出现以下问题：
- 出现相同的扩展名
- 出现相同的全局变量
解决办法：一个文件嵌套一个自执行函数，将内部的全局变量变成局部变量。
(function(){ … })();