JQ选择的链式写法

最新推荐文章于 2022-03-30 00:42:04 发布

Rose777

最新推荐文章于 2022-03-30 00:42:04 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_35918095/article/details/52878483

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<div class="box1">

</div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<ul id="u">
<li class="l">1</li>
<li>2
<ul>
<li class="l"></li>
</ul>
</li>
<li class="l">3</li>
</ul>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//6.JQ强大的好处：可以实现链式写法
//执行玩JQ的方法仍然会返回一个JQ对象
$("#div1").addClass("box").css({width:100,height:100,backgroundColor:"red"});
var a=(function(){
function fn1(){
console.log("fn1");
return this;
}
function fn2(){
console.log("fn2");
return this;
}
return{
fn1:fn1,
fn2:fn2
}
})()
a.fn1().fn2()//a.fn1()->a-->a.fn2()

//7.文档处理
//append 加在父级元素的后面
//父级容器元素.append(新加的元素)
var oDiv=document.createElement("div");
$("#div1").append(oDiv);
//appendTo
//新加的元素.appendTo.父级容器元素
var oS=document.createElement("span");
$(oS).appendTo(oDiv);
//prepend/prependTo 加在父级元素的前面
//after/ before 加在当前元素的后面/前面
$("#div1").after(oS)
$("#div1").before(oDiv)
//insertBefore/insertAfter 把JQ选择器选择的元素追加到指定元素的前面/后面
$("#p2").insertBefore($("#p1"));
$("#p2").insertAfter($("#p1"));

//replaceAll(选择器) 用匹配的结果去替换所有的选择器选出来的
oDiv.className="oo";
$(oDiv).replaceAll("#p1");//将#p1替换成oDiv
//remove()
$(oDiv).remove();//删除oDiv
//$("#div1").remove(".box1")
//$("div").remove(".box1");//把类名叫box1的div删掉

//8筛选
//eq(index),first(),last()
var lis=$("#u>li").eq(1);
console.log(lis);
var lis=$("#u>li").last();
console.log(lis);
var lis=$("#u>li").first();
console.log(lis);
//hasClass()检测当前元素中是否含有某个类名
$("#div1").hasClass(".box");//-->false
//filter:同级过滤首先通过过滤选择器选取一组JQ元素集合在获取的集合中进行第二次筛选
console.log($("#u>li").filter(".l"))
//chidren():子集过滤
console.log($("#u").children(".l"));//父级下边类名是l的孩子
//find():后代过滤
console.log($("#u").find(".l"));
//map遍历JQ集合区别each
//parent父亲节点
console.log($(".box1").parent());
//parents所有的父亲节点父亲父亲的父亲。。。。。
console.log($(".box1").parents())
//next/nextAll/prev/prevAll,siblings（所有的兄弟）
</script>
</body>
</html>

Rose777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ选择的链式写法

123//6.JQ强大的好处：可以实现链式写法//执行玩JQ的方法仍然会返回一个JQ对象$("#div1").addClass("box").css({width:100,height:100,backgroundColor:"red"});var a=(function(){function fn1(){console.log("fn1
复制链接

扫一扫