总目录：https://blog.csdn.net/qq_41106844/article/details/105553392
前端 - 子目录：https://blog.csdn.net/qq_41106844/article/details/105553354
第一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<script src="../jquery-3.4.1.js"></script>
<script>
$("div").css("color","red")
</script>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
</head>
<body>
<div>hello</div>
<p id="p1">world</p>
<a href="http://www.baidu.com">click</a>
<div class="outer">
outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>outer p1</p>
<p>outer p2</p>
</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
<p id="name1" name="zhangsan">zhangsan</p>
<p id="name2" name="lisi">lisi</p>
<p id="name3" name="lisi">Lisi</p>
<p id="name4" name="wangwu">wangwu</p>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="../jquery-3.4.1.js"></script>
<script>
/*
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
*/
<!--基本选择器：-->
<!--$("div").css("color","red") //所有div标签变红-->
<!--$("*").css("color","red")//全部都变红-->
<!--$("#p1").css("color","red") //id为p1的变红-->
<!--$(".inner").css("color","red") //class为inner的变红-->
<!--$(".outer").css("color","red") //父标签操作会继承给子标签-->
<!--$(".inner,p,div").css("color","red") //基本标签多选-->
<!--层级选择器：-->
<!--$(".outer p").css("color","red") //将class为outer下所有p标签变红-->
<!--$(".outer>p").css("color","red") //将class为outer下的子标签p变红-->
<!--$(".inner+p").css("color","red") //将class为inner的毗邻向下的兄弟标签p变红-->
<!--$(".inner~p").css("color","red") //将class为inner向下的所有兄弟标签p变红-->
<!--基本筛选器 主要用于li标签这种层次性标签-->
<!--$("li:first").css("color","red") //first将列表第一个变红-->
<!--$("li:last").css("color","red") //last将列表最后一个变红-->
<!--$("li:eq(2)").css("color","red") //eq指定列表索引变红-->
<!--$("li:even").css("color","red") //偶数行变红-->
<!--$("li:odd").css("color","red") //奇数行变红-->
<!--$("li:ge(3)").css("color","red") //从索引五之后开始变红-->
<!--属性选择器-->
<!--$("[name]").css("color","red") //所有带name属性的标签变红-->
<!--$("[name='lisi']").css("color","red") //只让name属性等于lisi的标签变红-->
<!--$("[name='lisi'][id='name2']").css("color","red") //让name属性等于lisi且id属性等于name2的标签变红-->
<!--表单选择器 用于input这种表单提交标签-->
<!--$("[type='text']").css("width","200px")-->
$(":text").css("width","400px")
</script>
</body>
</html>
筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选器</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li id="end">666</li>
<li>777</li>
<li>888</li>
</ul>
<div class="outer">
outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>outer p1</p>
<p>outer p2</p>
</div>
<script src="../jquery-3.4.1.js"></script>
<script>
<!--过滤筛选器-->
$("li").eq(2).css("color","red");
$("li").first().css("color","red");
$("li").last().css("color","red");
<!--查找筛选器 ***-->
$(".outer").children("p").css("color","red") //找到class属性为outer下所有p标签
$(".outer").find("p").css("color","red") //找到class属性为outer下所有子p标签
$("li").eq(2).next().css("color","red") //next代表当前，这样操作后，只有索引3的li标签变红
$("li").eq(2).nextAll().css("color","red") //表示所有
$("li").eq(2).nextUntil("#end").css("color","red") //从索引2到id为end的标签变红
$("li").eq(4).prev().css("color","red") //和next同理，不过向上查找
$("li").eq(4).prevAll().css("color","red") //和nextAll同理，不过向上查找
$("li").eq(4).prevUntil("li:eq(1)").css("color","red") //和nextUntil同理，不过向上查找
$(".outer").siblings().css("color","red") //查找所有的兄弟标签
console.log($(".outer .inner p").parent().html()) //显示p标签的父标签的内容
$(".outer .inner p").parents().css("color","red") //对所有的父标签操作
$(".outer .inner p").parentsUntil("body").css("color","red") //对查找的父标签层次进行限制
</script>
</body>
</html>
属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性方法</title>
<style>
.font{
font-family:sans-serif;
}
.re{
color:red;
}
.ye{
color:yellow;
}
</style>
</head>
<body>
<div id="div1" class="font">div1</div>
<div id="div2" class="font ye">div2</div>
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<p id="p1" align="left">p1</p>
<p id="p2">p2</p>
<script src="../jquery-3.4.1.js"></script>
<script>
/*属性操作
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
*/
//css类
<!--$("#div1").addClass("re"); //向id为div1的标签添加class属性outer-->
<!--$("#div2").removeClass("ye"); //删除id为div2标签的class属性inner-->
//属性
console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
$("#p1").removeAttr("align");
$("#p2").prop("align","left");
$("#p2").removeProp("align");
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
</script>
</body>
</html>
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
