文章目录
- 一、筛选器补充
- 二、jQuery属性操作
- 三、jQuery文档处理
一、筛选器补充
1、过滤筛选器
就是查看某个标签中是否存在另外一个标签
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");
console.log($("div").attr("name"));
2、prop修改属性(常用于固有的属性)
console.log($("div").prop("class"));
$("div").prop("class","div2");
console.log($("div").prop("class"));
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("感谢配合");
5、设置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>
$("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'));
});
}
</script>
</body>
</html>
三、jQuery文档处理
1、内部插入
- append,prepend添加标签
- appendTo,prependTo添加到标签
$(".c1").append($ele);
$ele.appendTo(".c1");
$(".c1").prepend($ele);
$ele.prependTo(".c1");
2、外部插入
- after,before添加
- insertAfter,insertBefore添加到
$(".c1").after($ele);
$(".c1").before($ele);
$ele.insertAfter(".c1");
$ele.insertBefore(".c1");
3、替换:replaceWith
$("p").replaceWith($ele);
4、删除与清空:remove,empty
$(".c1").empty();
$(".c1").remove();
5、克隆:clone
var $ele2=$(".c1").clone();
$(".c1").after($ele2);
6、创建jQuery变量
var $ele=$("<h1></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(){
var $ele=$("<h1></h1>");
$ele.html("新加内容");
$ele.css("color","red");
$("p").replaceWith($ele);
$(".c1").empty();
$(".c1").remove();
var $ele2=$(".c1").clone();
$(".c1").after($ele2);
})
</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)