JavaScript之jQuery够用即可（查找筛选器、属性操作、jQuery文档处理）
文章目录
- 一、筛选器补充
- 二、jQuery属性操作
- 三、jQuery文档处理
一、筛选器补充
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("我是新的
"); //重新设置标签内容并且更改样式
$("#id1").text("我是新的
"); //重新设置内容，但不能改变样式
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("我是新的
"); //重新设置标签内容并且更改样式
// $("#id1").text("我是新的
"); //重新设置内容，但不能改变样式
// 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=$(""); //用jQuery创建一个名为$ele的变量，它是一个标签
$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("新加内容
"); //直接添加文本内容
var $ele=$(""); //用jQuery创建一个名为$ele的变量，它是一个标签
$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>