文章目录
一、筛选器补充二、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的值改为n2console.log($("div").attr("name"));
2、prop修改属性（常用于固有的属性）
console.log($("div").prop("class"));$("div").prop("class","div2");console.log($("div").prop("class"));// 未定义的属性则会返回false，而不是undefinedconsole.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的内容删除（整个标签都没了）//克隆：clonevar $ele2=$(".c1").clone(); //将c1赋值一份$(".c1").after($ele2); //将克隆的内容添加到c1后面})</script></body></html>
