一、篩選器補充
1、過濾篩選器
就是查看某個標籤中是否存在另外一個標籤
// console.log($("div").hasClass("div1")); //判斷div中是否存在class爲div1的標籤，返回布爾值
2、查找篩選器
請區分文章：JavaScript之jQuery夠用即可（jQuery的引入、查找選擇器、左側菜單欄）中的選擇器，這裏介紹的是篩選器。
它們主要功能是差不多的，但是用法上有一定區別，不過它們和JS中的用法幾乎一樣，JS篩選器的用法請查閱文章
- $(“div”).children(".test")——> 查找子元素
- $(“div”).find(".test")——> 查找子元素
- $(".test").next()——>查找下一個元素
- $(".test").nextAll()——>查找往下所有元素
- $(".test1").nextUntil(".test2") ——>查找往下的元素，直到某個元素停止
- $(“div”).prev()——查找前一個元素
- $(“div”).prevAll()——>查找前面所有元素
- $(“div”).prevUntil()——>查找往前的元素，直到某個元素停止
-
$(".test").parent()——>查找直屬父級元素
-
$(".test").parents()——>查找父級的父級的父級…
-
$(".test1").parentUntil(“test2”)——>查找父級的父級…直到某個元素停止
- $(“div”).siblings()——查找非本身元素
二、jQuery屬性操作
1、attr修改屬性（常用於自定義的屬性）
console.log($("div").attr("name")); //只有一個參數時會取對應屬性的值
$("div").attr("name","n2"); //兩個參數則，表示將屬性name的值改爲n2
console.log($("div").attr("name"));
2、prop修改屬性（常用於固有的屬性）
console.log($("div").prop("class"));
$("div").prop("class","div2");
console.log($("div").prop("class"));
// 未定義的屬性則會返回false，而不是undefined
console.log($("input:first").prop("checked"));
console.log($("input:last").prop("checked"));
3、html()和text()更改標籤內容
console.log($("#id1").html()); //取標籤和文本內容
console.log($("#id1").text()); //只取文本內容
$("#id1").html("<h1>我是新的</h1>"); //重新設置標籤內容並且更改樣式
$("#id1").text("<h1>我是新的</h1>"); //重新設置內容，但不能改變樣式
4、val()查看和修改固有value屬性的值，自定義的無法顯示
console.log($(":text").val()); //無參數時是查看
console.log($(":text").next().val());
$(":text").val("感謝配合"); //帶參數則重新設置value值
5、設置CSS屬性
//CSS屬性，因爲CSS代碼都是鍵值對組成的；
// 因此傳入兩個參數，第一個是要設置的CSS屬性，第二個是設置的樣式值
$("div").css("color","red"); //一對鍵值對
$("[value='self_value']").css({"color":"yellow","background-color":"green"}); //多個鍵值對
6、測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery屬性操作</title>
</head>
<body>
<div class="div1" name="n1"></div>
<input type="checkbox">選項一
<input type="checkbox" checked="checked">選項二
<div id="id1">
<p>一個P標籤</p>
</div>
<input type="text" value="請輸入">
<div value="self_value">DIVVVV</div>
<!--div裏的value是自定義的屬性-->
<script src="jquery-3.4.1.js"></script>
<script>
//過濾篩選器
// console.log($("div").hasClass("div1")); //判斷div中是否存在class爲div1的標籤，返回布爾值
//attr修改屬性（常用於自定義的屬性）
// console.log($("div").attr("name")); //只有一個參數時會取對應屬性的值
// $("div").attr("name","n2"); //兩個參數則，表示將屬性name的值改爲n2
// console.log($("div").attr("name"));
//prop修改屬性（常用於固有的屬性）
// console.log($("div").prop("class"));
// $("div").prop("class","div2");
// console.log($("div").prop("class"));
// // 未定義的屬性則會返回false，而不是undefined
// console.log($("input:first").prop("checked"));
// console.log($("input:last").prop("checked"));
// console.log($("#id1").html()); //取標籤和文本內容
// console.log($("#id1").text()); //只取文本內容
// $("#id1").html("<h1>我是新的</h1>"); //重新設置標籤內容並且更改樣式
// $("#id1").text("<h1>我是新的</h1>"); //重新設置內容，但不能改變樣式
// val查看和修改固有value屬性的值，自定義的無法顯示
// console.log($(":text").val()); //無參數時是查看
// console.log($(":text").next().val());
// $(":text").val("感謝配合"); //帶參數則重新設置value值
//CSS屬性，因爲CSS代碼都是鍵值對組成的；
// 因此傳入兩個參數，第一個是要設置的CSS屬性，第二個是設置的樣式值
$("div").css("color","red"); //一對鍵值對
$("[value='self_value']").css({"color":"yellow","background-color":"green"}); //多個鍵值對
</script>
</body>
</html>
7、jQuery實現的正反選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正反選</title>
</head>
<body>
<button onclick="allSelect()">全選</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反選</button>
<table border="2px">
<tr>
<td><input type="checkbox"></td>
<td>培根</td>
<td>雞排套餐</td>
<td>白開水</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>牛肉飯</td>
<td>雞腿</td>
<td>冰淇淋</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>漢堡</td>
<td>瘦肉粥</td>
<td>奶茶</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>雞排</td>
<td>薯條</td>
<td>奶昔</td>
</tr>
</table>
<script src="jquery-3.4.1.js"></script>
<script>
function allSelect(){
$(":checkbox").each(function(){
$(this).prop("checked",true);
});
}
function cancel(){
$(":checkbox").each(function(){
$(this).prop("checked",false);
});
}
function reverse(){
$(":checkbox").each(function(){
$(this).prop("checked",!$(this).prop('checked')); //此處用非“！”，原來是true就變成false，反之亦然
});
}
</script>
</body>
</html>
三、jQuery文檔處理
1、內部插入
- append，prepend添加標籤
- appendTo，prependTo添加到標籤
$(".c1").append($ele); //向下累加，在名爲c1的div標籤中添加變量$ele
$ele.appendTo(".c1"); //向下累加，將變量$ele添加到c1的標籤裏
$(".c1").prepend($ele); //向上累加，向名爲c1的div標籤里加$ele變量
$ele.prependTo(".c1"); //向上累加，將變量$ele添加到c1的標籤裏
2、外部插入
- after，before添加
- insertAfter，insertBefore添加到
$(".c1").after($ele); //在其後面添加內容
$(".c1").before($ele); //在其前面添加內容
$ele.insertAfter(".c1"); //將$ele添加到c1的後面
$ele.insertBefore(".c1"); ////將$ele添加到c1的前面
3、替換：replaceWith
$("p").replaceWith($ele); //用$ele替換p標籤
4、刪除與清空：remove，empty
$(".c1").empty(); //將c1的內容清空（只是內容沒了）
$(".c1").remove(); //將c1的內容刪除（整個標籤都沒了）
5、克隆：clone
var $ele2=$(".c1").clone(); //將c1賦值一份
$(".c1").after($ele2); //將克隆的內容添加到c1後面
6、創建jQuery變量
var $ele=$("<h1></h1>"); //用jQuery創建一個名爲$ele的變量，它是一個<h1>標籤
$ele.html("新加內容"); //設置文本內容
$ele.css("color","red"); //改變樣式
7、測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>第一個P標籤</p>
</div>
<button>點我</button>
<script src="jquery-3.4.1.js"></script>
<script>
$("button").click(function(){ //jquery中的事件都少了一個on
//內部插入：append，prepend添加標籤；appendTo，prependTo添加到標籤
//$(".c1").append("<h1>新加內容</h1>"); //直接添加文本內容
var $ele=$("<h1></h1>"); //用jQuery創建一個名爲$ele的變量，它是一個<h1>標籤
$ele.html("新加內容"); //設置文本內容
$ele.css("color","red"); //改變樣式
// $(".c1").append($ele); //向下累加，在名爲c1的div標籤中添加變量$ele
// $ele.appendTo(".c1"); //向下累加，將變量$ele添加到c1的標籤裏
//
// $(".c1").prepend($ele); //向上累加，向名爲c1的div標籤里加$ele變量
// $ele.prependTo(".c1"); //向上累加，將變量$ele添加到c1的標籤裏
//外部插入：after，before添加，insertAfter，insertBefore添加到
// $(".c1").after($ele); //在其後面添加內容
// $(".c1").before($ele); //在其前面添加內容
// $ele.insertAfter(".c1"); //將$ele添加到c1的後面
// $ele.insertBefore(".c1"); ////將$ele添加到c1的前面
//替換：replaceWith
$("p").replaceWith($ele); //用$ele替換p標籤
//刪除與清空：remove，empty
$(".c1").empty(); //將c1的內容清空（只是內容沒了）
$(".c1").remove(); //將c1的內容刪除（整個標籤都沒了）
//克隆：clone
var $ele2=$(".c1").clone(); //將c1賦值一份
$(".c1").after($ele2); //將克隆的內容添加到c1後面
})
</script>
</body>
</html>