12. jQuery
朱岳
一、jQuery简介
1、什么是jQuery?
#1、jQuery是一个高效、精简并且功能丰富的JavaScript工具库
#2、jQuery极大的简化了JavaScript编程
2、为何要使用jQuery
jQuery的优势（jQuery的宗旨就是：“Write less, do more.“）
#1、开源 免费
#2、一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
#3、便捷的选择器与DOM操作，
#4、链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
#5、事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
#6、Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
#7、跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
#8、插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
复制代码
3、jQuery版本
#1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
#2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
#3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
#ps：维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
二、基本使用
1、引入
先下载到本地，然后加载，才能使用
下载地址：https://jquery.com/download/
#方式一：本地引入
<script src='jquery-3.3.1.min.js'></script>
<script>
//注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>
#方式二：直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
code...
</script>
#BootCDN jQuery各个版本地址： https://www.bootcdn.cn/jquery/
2、jQuery对象
$是jQuery的别名
jQuery('.item').show()
//等同于
$('.item').show()
$对象可以用作选择器获取元素，还可以创建DOM对象
3、文档就绪事件
DOM文档加载的步骤：
1、解析HTML结构
2、加载外部脚本和样式表文件
3、解析并执行脚本代码
4、DOM树构建完成
5、加载图片等外部文件
6、页面加载完毕
等待文档加载完毕以后执行函数，有两种方式
#1、执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕才能执行
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕
#2、编写个数不同
window.onload不能同时编写多个，如果有多个window.onload，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
#3、简化写法不同
window.onload没有简写写法
$(document).ready(function(){})可以简写成$(function(){});
4、链式操作
#链式调用。原理就是调用一个实例化方法返回的是当前的对象
$('.box1').css('color','red').next().css('width',200px).css('height',200px).css('background','green').removeAttr('class')
5、jQueryDOM和jsDOM
#1、通过原生js获取的dom对象，我们称之为jsDOM或者原生DOM
#2、通过jQuery选择器获取的dom对象，我们称之为 jQuery DOM
#3、jQuery DOM本质上 是由 jsDOM组成的集合，是个类数组对象。
可以通过 [索引] 获取其中的jsDOM，$(jsDOM) 可以转为 jQuery DOM如下：
var box = document.getElementsByClassName('box'); #获取js DOM对象
js DOM对象==> JQ DOM对象
$(js DOM对象) # 例如 $(box)
jQ DOM对象==> js DOM 对象
$("选择器")[0] # 或者$("选择器").get(0)
三、选择器
id选择器：
$("#id")
标签选择器：
$("tagName")
类选择器：
$(".class")
所有元素选择器：
$("*")
交集选择器：
$("div.c1") //找到类为c1的div标签
并集选择器：
$("#id, .className, tagName")
层级选择器：（x和y可以为任意选择器）
$("x y"); //x的所有后代y(子子孙孙)
$("x>y"); //x的所有后代y(儿子)
$("x+y"); //x后面所有紧挨着的y
$("x~y"); //x之后所有兄弟y
基本选择器：
:frist // 第一个
:last // 最后一个
:eq(index) //索引等于index的那个元素
:even //匹配所有索引值为偶数的元素，从0开始计数
:odd //匹配所欲索引值为奇数的元素，从0开始计数
:gt(index) //匹配所有大于给定索引值的元素
:It(index) //匹配所有小于给定索引值的元素
:not(选择器) //过滤掉所有满足not条件的标签
:has(选择器) //过滤掉所有后代中满足has条件的标签
#示例：
$("div:has(h1)") //找到所有后代中含有h1标签的div标签
$("div:has(.c1)") //找到所有后代中含有c1样式类的div标签
$("li:not(.c1)") //找到所有不包含c1样式类的li标签
$("li:not(:has(a))") //找到所有后代中不含有a标签的li标签
属性选择器：
[attribute]
[attribute=value] //属性等于...的
[attribute!=value] //属性不等于...的
例子：
//示例：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); //取到checkbox类型的input标签
$("input[type!='text']"); //取到类型不是text的input标签
表单常用筛选：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
示例：
$("checkbox") //找到所有的checkbox
表单对象：
:enable
:disable
:checked
:selected
示例：
（找到所有的input标签）
<form>
<input name="email" disabled="disabled"/>
<input name='id'/>
</form>
$("input:enabled") //找到可用的input标签
（找到被选中的option）
<select id='sl'>
<option value='beijing'>北京市</option>
<option value='shanghai'>上海市</option>
<option selected value='guangzhou'>广州市</option>
<option value='shenzhen'>深圳市</option>
</select>
$(":selected") //找到所有被选中的option
四、筛选器
下一个兄弟元素：
$("#id").next() //后面那一个
$("#id").nextAll() //后面所有的
$("#id").nextUntil("#i2") //后面直到i2所有的（不包括i2）
上一个兄弟元素：
$("#id").prev() //前面一个
$("#id").prevAll() //前面所有的
$("#id").prevUntil("#i2") // 前面直到i2所有的（倒序排列；不包括i2）
父亲元素：
$("#id").parent(); //父亲元素
$("#id").parents(); //查找当前元素的所有的父辈元素
$("#id").parentsUntil(); //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
儿子和兄弟元素：
$("#id").children(); //儿子们
$("#id").siblings(); //兄弟们
查找：
搜索所有与指定表达式匹配的元素（很适合查找正在处理的元素的后代元素）
$("div").find("p") //等价于$("div p")
补充：
.first() //获取匹配的第一个元素
.last() //获取匹配的最后一个元素
.not() //从匹配元素的集合中删除与指定表达式匹配的元素
.has() //保留包含特定后代的元素，去掉那些不包含指定后代的元素
.eq() //索引值等于指定值的元素
五、标签操作值样式操作
样式类
addClass(); //添加指定的CSS类名
removeClass(); //移除指定的CSS类名
hasClass(); //判断样式存不存在
toggleClass(); //切换CSS类名，如果有就移除，如果没有就添加
CSS
css('color','red') //DOM操作：tag.style.color="red"
#示例：
$("p").css("color","red"); //将所有的p标签字体设置为红色
位置
offset() //获取匹配元素在当前窗口的相对偏移或者设置元素位置
position() //获取匹配元素相对父元素的偏移
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft() //获取匹配元素相对滚动条左侧的偏移
例1：
$('#bb').offset({"left":100,"top":100})
例2：
$(window).scrollTop(0); //跳到首页
# .offset()方法允许我们检索一个元素相对于文档（document）的当前位置
和.position() 的差别在于 .position() 是相对一父级元素的位移
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
六、标签操作值文本内容操作
html
html()是获取选中标签元素中所有的内容
html(val)设置值：设置该元素的所有内容都会替换掉标签中原来的内容
$('ul').html('<a href="#">百度一下</a>') //可以使用函数来设置所有匹配元素的内容
$('ul').html(function(){
return "hello"
})
text
text() 获取所有的匹配元素包含的文本内容
text(val) 设置所有匹配元素的文本内容
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
示例：
// $(".box").text("<p>111111</p>")
val
// 用途：val()用于操作input的value值
//示范一：
<input type='radio' name='sex' value='male'>
<input type="radio" name="sex" value="female">
<input type="radio" name="sex" value="none">
$('input[type=radio]').val(['male'])
//示范二：
<input type="checkbox" name="hobbies" value="111">
<input type="checkbox" name="hobbies" value="222">
<input type="checkbox" name="hobbies" value="333">
$('input[type=checkbox]').val(["111","222"])
七、标签操之属性操作
用于ID等或自定义属性：
attr(attrName)
$('.box2 img').attr('title','美女') //返回第一个匹配元素的属性值
attr({'title':'美女','alt':'图片不见了'}) //为所有匹配元素设置一个属性值
removeAttr('title') // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop('value') //获取value属性的值
prop('checked',true) //将checked属性设置成true
removeProp('value') //移除value属性
# 示例：
$(".box").attr("class") //获取属性
$(".box").attr("x","111") //设置属性
$(".box").attr({"x"："111","y":222}) //设置多个属性
$(':radio:eq(1)').prop("checked",true)
示例：（全选、反选、全部取消）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>菜单</h3>
<input type="button" value="全选" id="all">
<input type="button" value="反选" id="reverse">
<input type="button" value="取消" id="cancel">
<p>
蒸羊羔<input type="checkbox" name="menu">
</p>
<p>
蒸鹿茸<input type="checkbox" name="menu">
</p>
<p>
蒸熊掌<input type="checkbox" name="menu">
</p>
<p>
烧花鸭<input type="checkbox" name="menu">
</p>
<p>
烧雏鸡<input type="checkbox" name="menu">
</p>
<p>
烧子鹅<input type="checkbox" name="menu">
</p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$("#all").click(function () {
$(":checkbox").prop("checked",true)
})
$("#reverse").click(function () {
$(":checkbox").each(function () {
// console.log($(this).prop("checked"))
// $(this).prop("checked",! 原来的checked值)
$(this).prop("checked",! $(this).prop("checked"))
})
})
$("#cancel").click(function () {
$(":checkbox").prop("checked",false)
})
</script>
</body>
</html>
八、标签操作之文档处理
//内部
$(A).appendTo(B) //把A追加到B内部的最后面
$(A).prependTo(B) //把A前置到B内部的最前面
//外部
$(A).insertAfter(B) //把A放到B外部的后面
$(A).insertBefore(B) //把A放到B外部的前面
# 示例：
var p=document.createElement("p")
p.innerText="东方明珠"
$(p).insertBefore($(".box1"))
//$(p).insertAfter($(".box1"))
#了解：
//内部
$(A).append(B) // 把B追加到A内部的最后
$(A).prepend(B) // 把B前置到A内部的最前面
//外部
$(A).after(B) // 把B放到A外部的后面
$(A).before(B) // 把B放到A外部的前面
移除和清空元素
$('.p1').remove() //从DOM中删除所有匹配的元素=====>把元素本身删掉
$('.p1').empty() //删除匹元素集合中的所有的子节点
# 示例：
$(".box1").remove()
$(".box1").empty()
替换
replaceWith() //替换者在后，被替换者在前 $(".box1").replaceWith($(p))
replaceAll() //替换者在前，被替换者在后 $(p).replaceAll($('div'))
克隆
clone()
// clone方法不加参数true，克隆标签 但是不克隆标签带的事件
// clone方法加参数true，克隆标签并且克隆标签带的事件
克隆示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
屠龙宝刀，点击就送
屠龙宝刀，点击就送 ```
类似资料：