（一）jQuery概述
jQuery本身是js的一个轻量级的库，封装了一个对象jQuery，jquery的所有语法都在jQuery对象中
浏览器不认识jquery，只渲染html、css和js代码，需要先导入jQuery文件，官网下载即可
jQuery中文说明文档：https://hemin.cn/jq/
（二）jQuery要点
1、jQuery对象
- 通过jQuery包装DOM对象后产生的对象。
- jQuery对象用$符号表示
- 给jQuery对象命名引用时，通常标识符前面加个$符，与DOM对象的引用区分开来
- jQuery代码和js代码可以混着用，比如绑定事件处理函数仍旧可以用js的几种方式，只是js对象调用DOM方法和属性，jQuery对象也调用自己的方法
- DOM对象和jQuery对象可以互相转换：
- 用$符号把DOM对象括起来就变成了jQuery对象，如：$(this)
- jQuery加上[0]就变成了DOM对象，如：$("p")[0]
2、jQuery的语法
可以概括为$(selector).action()的形式，
2.1 selector
选择器和筛选器：
- id选择器拿到的是唯一的标签对象；
- 其他选择器得到的是标签对象数组；
- jquery会自动循环处理每个元素，不用自己再写循环语句一个个处理
（1）基本选择器
基本格式：$("css-selector")
（1.1）通用选择器
$("*").css("color", "green")（1.2）id选择器
$("#jquery").css("color", "red")（1.3）class选择器
$(".hl").css("color", "gold")（1.5）标签选择器
$("div").css("color", "black")（1.6）并列多选选择器
$(".hl,div").css("color", "gold")（2）层级选择器
（2.1）后代选择器
$(".hl div").css("color", "red")（2.2）子代选择器
$(".hl>div").css("color", "red")（2.3）毗邻选择器(下面紧挨着的兄弟标签)
$(".hl+p").css("color", "blue")（2.4）下方兄弟选择器（不用紧挨着）
$(".hl~p").css("color", "red")（3）属性选择器
$("[name]").css("color", "red")
$("[name='789']").css("color", "blue")
$("[name='789'][alex='111']").css("color", "red")（4）表单选择器（只有inpput的type属性才行）
$(":text").css("color", "blue")（5）基本筛选器
（5.1）first：第一个
$(".hl~p:first").css("color", "gold")（5.2）last：最后一个
$(".hl~p:last").css("color", "gold")（5.3）eq(index)：指定索引序号
$(".hl~p:eq(0)").css("color", "gold")（5.4）even：奇数行
$(".hl~p:even").css("color", "gold")（5.5）odd：偶数行
$(".hl~p:odd").css("color", "gold")（5.6）gt(index)：大于指定索引序号
$(".hl~p:gt(0)").css("color", "gray")（5.7）lt(index)：小于指定索引序号
$(".hl~p:lt(2)").css("color", "gray")（6）过滤筛选器
$(".hl~p").eq(0).css("color", "gold") //筛选任意一个.eq(index)
$(".hl~p").first().css("color", "gray") //筛选第一个.first()
$(".hl~p").last().css("color", "gray") //筛选最后一个.last()
$(".hl~p").even().css("color", "red") //筛选奇数行的标签.even()
$(".hl~p").odd().css("color", "blue") //筛选偶数行的标签.odd()
console.log($(".hl~p").hasClass("456") ) //判断标签是否有这个class属性，返回boolean值（7）查找筛选器
//7.1只找子代元素children(selector)
$("#jquery").children("p").css("color", "blue")
//7.2找后代元素find(selector)
$("#jquery").find("p").css("color", "blue")
//7.3找下面的元素next()
$("li").next().css("color", "blue") //查找第二个及往后的li标签
$("li").eq(0).next().css("color", "blue") //查找第几个li标签的下一个的li标签
//7.4找下面的元素nextAll()
$("li").nextAll().css("color", "red") //查找第二个及往后的li标签
$("li").eq(1).nextAll().css("color", "red") //查找第几个li标签的下面所有li标签
//7.5找下面的元素nextUntil()
$("li").nextUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面除了第一个的li标签和下面所有的li标签
$("li").eq(0).nextUntil(".liend").css("color", "gold")//查找第几个li标签的下面到终止标签（不包含）的li标签
//7.6找上面面的元素prev()
$("li").prev().css("color", "blue") //查找除了最后一个的li标签
$("li").eq(2).prev().css("color", "blue") //查找第几个li标签的上一个的li标签
//7.7找上面的元素prevAll()
$("li").prevAll().css("color", "red") //查找除了最后一个的li标签
$("li").eq(3).prevAll().css("color", "red") //查找第几个li标签的上面所有li标签
//7.8找上面的元素prevUntil()
$("li").prevUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面所有的li标签和下面除了最后一个的li标签
$("li").eq(7).prevUntil(".liend").css("color", "gold")//查找第几个li标签的上面到终止标签（不包含）的li标签
//7.9查找父级标签parent
$("#parents p").parent().css("color", "red")
//7.9查找所有祖宗标签parents
$("#parents p").parents().css("color", "red")
//7.9查找区间祖辈标签parentUntil
$("#parents p").parentsUntil().css("color", "black") // 不写参数，类同parents()
$("#parents p").parentsUntil("#parents").css("color", "black") // 查找所有终止祖辈下面的祖辈标签
//7.10查找兄弟标签
$("ul").siblings().css("color", "black")（8）练习-左侧菜单
<body>
<div style="clear: both">练习-左侧菜单：<br>
<div class="outer2">
<div class="menu">
<div class="item">
<div class="title" onclick="f1(this)">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="f1(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="f1(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
</div>
</body>
function f1(self) {
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide");
}2.2 action()
jQuery操作属性的方法
（1）标签属性类
// 获取属性值
console.log($(".attr1 .a1").attr("class"))
//设置属性值，不适用设置input标签的checked属性，因为不默认选中（手动勾选）是undefined，默认选中是cheched
$(".attr1 .a1").attr("class", "a2")
// 删除属性
$(".attr1 .a1").removeAttr("class")
//获取固有属性值，不适用自定义属性，因为prop找不到，获取到的是undefined，但适用input标签的checked属性，因为其值是true或false
console.log($(".attr1 .a2").prop("class"))
// 设置固有属性值
$(".attr1 .a2").prop("class", "a3")
// 删除固有属性
$(".attr1 .a3").removeProp("class")
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此，需要使用prop方法去操作才能获得正确的结果。（2）css样式类
// 增加class属性列表的元素
$(".attr1 .a3").addClass("a4")
// 删除class属性列表的元素
$(".attr1 .a4").removeClass("a4")
// 设置css样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});（3）HTML代码/文本/值
$(".attr1 .a3").html("456<h1>123</h1>") //相当于js的innerHTML，加参数是替换原本内容
$(".attr1 .a3").text("<p>111</p>") //相当于js的innerText，加参数是替换原本内容为纯文本
$(".attr1 .a3").val() //获取标签的固有属性value，不能获取自定义属性
$(".attr1 input").val("789") // 加上参数是修改固有属性value值（4）jQuery的循环语句
- 方式一：
$.each(object[循环的对象，如数组], function(index[, value]){
代码块
})
- 方式二：
$("p").each(function(){
代码块；//每一个标签对象是$(this)
})
//1.方式一：
var data={'name':"alex", age:18};
var dl=[1,"a",[12,'b'], data];
$.each(data, function(key, value){
console.log("key:", key); //循环object（字典）第一个参数值是：键key
console.log("value:", value);
})
$.each(data, function(key){
console.log("key:", key); //循环object（字典）如果只有一个参数值是：键key
})
$.each(dl,function(index,value){
console.log("index:", index); //循环数组第一个参数值是：索引index
console.log("value:", value);
})
$.each(dl,function(index){
console.log("index:", index); //循环数组如果只有一个参数值是：索引index
})
//2.方式二：
$("li").each(function(){
console.log("$(this):", $(this));
console.log("$(this).html():", $(this).html());
})（5）练习-正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
function selectall(){
$("table :checkbox").prop("checked",true)
}
function cancel(){
$("table :checkbox").prop("checked",false)
}
/*js写法
function reverse(){
let idlist=$("table :checkbox")
for(let i=0;i<idlist.length;i++){
let element=idlist[i];
let ischecked=$(element).prop("checked")
if (ischecked){
$(element).prop("checked",false)
}else {
$(element).prop("checked",true)
}
}
}
*/
/*jQuery循环方式*/
function reverse(){
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
if ($(this).prop("checked")){
$(this).prop("checked",false)
}else {
$(this).prop("checked",true)
}
});
}
</script>
</head>
<body>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
</body>
</html>（6）jQuery支持链式查找
对一个标签对象做完操作后，可以用.继续查找其他标签对象进行操作
$("p").parent().addClass("hide");
$("p").parent().prev().addClass("hide");
// 可以合并成一行：
$("p").parent().addClass("hide").prev().addClass("hide")（7）练习-模态对话框
function show(self){
$(self).parent().next().removeClass("hide");
}
function cancel(self){
$(self).parent().parent().addClass("hide");
}（8）文档处理
<div class="c1">文档操作
<p>ppp</p>
<button class="bo">add</button>
<div class="lxclone">练习-复制输入框
<div class="item">
<button class="bc">+</button>
<input type="text"></div>
</div>
</div>
$(".bo").on("click", function(){
//1.内部插入：父标签内插入子标签
// $(".c1").append("<h1>123</h1>"); // 创建新标签方式一：直接在append（）里面写上标签内容
var $ele = $("<h1></h1>"); //创建新标签方式二：相当于js中var ele=document.cerateElement("h1");
var $ele = $("<h1>"); //简化写法
$ele.html("hello word");
$ele.css("color", "red");
$(".c1").append($ele);//给父标签的子标签最后添加创建的新子标签
$ele.appendTo($(".c1"));//把创建的新子标签添加到父标签的子标签最后面
$(".c1").prepend($ele);//给父标签的子标签最前面添加创建的新子标签
$ele.prependTo($(".c1"));//把创建的新子标签添加到父标签的子标签最前面
//2.外部插入：插入兄弟标签
$(".c1").after($ele);
$(".c1").before($ele);
$ele.insertAfter($(".c1"));
$ele.insertBefore($(".c1"));
//3.替换
$(".c1 p").replaceWith($ele);
//4.删除与清空
$(".c1").empty(); //清空标签的内容，但是标签还在
$(".c1").remove(); //删除标签
//5.复制
var $ele2=$(".c1").clone(); //clone()里写个true就不会复制事件
$(".c1").after($ele2);
})（9）练习-复制输入框
<div class="c1">文档操作
<p>ppp</p>
<button class="bo">add</button>
<div class="lxclone">练习-复制输入框
<div class="item">
<button class="bc">+</button>
<input type="text"></div>
</div>
</div>
$(".bc").click(function (){
var $cloneObj=$(".lxclone .item").clone(); // 这种方式复制的数量会以2的次方倍增，因为复制出来的也是一个class属性，也会被复制
var $cloneObj=$(this).parent().clone(); //应该通过这种方式复制，每次就是复制一个
$cloneObj.children(".bc").html("-").attr("onclick", "removeObj(this)");
$(".lxclone").append($cloneObj);
});
function removeObj(self){
$(self).parent().remove();
}3、css操作
<div class="cssop">CSS操作
<p id="ys">1.样式</p>
<div id="offsetdiv">2.位置
<div class="div1">2.1-offset相对视口偏移量</div>
<div class="div2">2.2-position相对已定位父级偏移量</div>
</div>
<div class="gotop hide" style="position: fixed;right: 20px;bottom: 20px;width: 90px;height: 50px;background-color: gray; color:white;text-align: center;line-height: 50px">返回顶部</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>3.1 样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});3.2 位置
//2.位置
$("*").css({"padding":"0px", "margin":"0px"});
$("#offsetdiv").css({position:"relative"});
$("#offsetdiv .div1").css({width: "200px", height: "200px", "background-color":"blue"});
$("#offsetdiv .div2").css({width: "200px", height: "200px", margin:"20px", padding:"20px", border:"1px solid red", "background-color":"green"});
//2.1-1offset()得到的是偏移量对象，有top和left两个属性：是相对于视口（窗口）的偏移量
console.log($("#offsetdiv .div1").offset().top)
console.log($("#offsetdiv .div1").offset().left)
console.log($("#offsetdiv .div2").offset().top)
console.log($("#offsetdiv .div2").offset().left)
//2.2-position()得到的是偏移量对象，有top和left两个属性：是相对于已定位的父级标签的偏移量
console.log($("#offsetdiv .div1").position().top)
console.log($("#offsetdiv .div1").position().left)
console.log($("#offsetdiv .div2").position().top)
console.log($("#offsetdiv .div2").position().left)
//2.3-scrollTop放在监听事件才有效
//练习-返回顶部
window.onscroll=function(){
if($(window).scrollTop()>100){ //窗口滚动滑轮距离顶部的距离
$(".gotop").removeClass("hide")
} else {
$(".gotop").addClass("hide")
}
}
$(".gotop").click(function(){
$(window).scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//练习-对标签元素应用scrollTop
// var $btEle=$("<button>");
// $btEle.html("回顶部")
// $btEle.addClass("aftb hide")
// $("#offsetdiv .div2").after($btEle);
$("#offsetdiv .div2").after("<button class='aftb hide'>回顶部</button>");
$("#offsetdiv .div2").html("<h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1>")
$("#offsetdiv .div2").css("overflow", "auto");
$("#offsetdiv .div2").scroll(function (){
if($(this).scrollTop()>0){ //窗口滚动滑轮距离顶部的距离
$(".aftb").removeClass("hide")
} else {
$(".aftb").addClass("hide")
}
});
$(".aftb").click(function(){
$("#offsetdiv .div2").scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//2.4-scrollLeft放在监听事件才有效,（左右滑轮，类似上下滑轮）3.3 尺寸
console.log($("#offsetdiv .div2").height()) // 获取内容的高度
$("#offsetdiv .div2").height("300px") // 修改内容的高度
console.log($("#offsetdiv .div2").innerHeight()) // 获取内容+内边距padding的高度
console.log($("#offsetdiv .div2").outerHeight()) // 获取内容+内边距padding+边框border的高度
console.log($("#offsetdiv .div2").outerHeight(true)) // 获取内容+内边距padding+边框border+外边距margin的高度
console.log($("#offsetdiv .div2").width()) // 获取内容的宽度
$("#offsetdiv .div2").width("300px") // 修改内容的宽度
console.log($("#offsetdiv .div2").innerWidth()) // 获取内容+内边距padding的宽度
console.log($("#offsetdiv .div2").outerWidth()) // 获取内容+内边距padding+边框border的宽度
console.log($("#offsetdiv .div2").outerWidth(true)) // 获取内容+内边距padding+边框border+外边距margin的宽度3.4 索引
$("ul li").index(); //获取标签集合的索引
![HTB：LinkVortex[WriteUP]](https://i-blog.csdnimg.cn/direct/987c4f45ea2e4c238f7f16523c7819b1.png)
