很好很强大。
基本选择器和层级选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;}
.red{
color:red;
}
.colorBlue{
color:blue;
}
</style>
<script src="./jQuery-1.7.1/jQuery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 1.基本选择器
// 1.1ID选择器 语法：$("标签ID")
//$("#p1").css("border","1px solid blue");
// 1.2类选择器 语法：$("标签类名")
//$(".red,.colorBlue").css("color","gray");
// 1.3标签选择器 语法：$("标签名")
//$("p").css({"font-family":"微软雅黑","font-size":"16px","color":"green"});// css的参数还可以是一个数组
// 1.4组合选择器 语法：$("选择器1,选择器2,.........选择器n")
//$("#p1,#dv").css("border","1px solid blue");
// 1.5全部选择器 语法：$("*")
//$("*").css("border","1px solid red");
// 2层次选择器
// 2.1子选择器
// 2.1.1子元素选择器（嵌套元素选择器） 语法：$("父选择器>子选择器")
//$("#dv>p").css("color","red");
//$("#dv>*").css("color","red");
//$("#dv>p,#dv>a").css("color","green");
//$("#dv>.red").css("color","pink");
// 2.1.2后代元素选择器 语法：$("父选择器 子选择器")
//$("#dv p,#dv span").css("color","#778899");
//$("#dv .red").css("color","green");
//$("#dv *").css("color","red");
// 2.2同级元素选择器
// 2.2.1后续元素选择器 语法：$("目标选择器~后续元素选择器")
//$(".red~p").css("color","blue");
//$(".red~*").css("color","yellow");
//$("#dv>p~span").css("color","pink");
//$("#p1~span").css("color","pink");
// 2.2.2紧跟元素选择器 语法：$("目标选择器+紧跟元素选择器")
//$("#p1+span").css({"color":"#623456","border":"1px solid red"});
//$(".red+*").css({"color":"#623456","border":"1px solid red"});
// 2.3反选元素 语法：$("目标选择器").siblings("需要改变的同级元素选择器")
//$("#dv").siblings().css("color","green");// siblings()如果无参表示除#dv外的所有同级元素，等价于siblings("*")
//$("#dv").siblings("span").css("color","yellow");
//$("#dv").siblings(".colorBlue").text("你好，暗世界。");
// 2.4扩展-等价方法
// 2.4.1 next("选择器")方法 等价于"+"，目标元素的紧跟元素
//$("#dv").next("p").text("我在#dv元素后。");
//$(".red").next().text("你好，暗世界。");// 无参表示任何紧跟的元素
// 2.4.2 nextAll("选择器")方法 等价于"~"，目标元素的后续元素
//$(".red").nextAll().text("你好，暗世界。");// 无参表示所有的后续元素
//$("#p1").nextAll("span").text("你好，暗世界。");
//$("#p1").nextAll(".colorBlue").text("你好，暗世界。");
// 2.4.3 prev("选择器")方法 表示目标元素之前的紧跟元素
//$("#p1").prev().text("你好，暗世界。");// 无参表示距目标元素最近的元素
//$(".red").prev("a").text("你好，暗世界。");
// 2.4.4 prevAll("选择器")方法 表示目标元素之前的所有元素
//$("#p1").prevAll().text("你好，暗世界。").css("color","red");
//$("#p1").prevAll("#dv").text("你好，暗世界。").css("color","red");
});
</script>
</head>
<body>
<div id="dv">
<p>我是一个段落</p>
<span>这是一个span</span>
<p>我是一个段落</p>
<span>这是一个span</span>
<p class="red">我是一个段落</p>
<p>我是一个段落</p>
<a>我是一个a标签</a>
<span>这是一个span</span>
<a>我是一个a标签</a>
<p class="red">我是一个段落</p>
<p>我是一个段落</p>
<p class="red">我是一个段落</p>
<a>我是一个a标签</a>
</div>
<p>这是一个段落。111</p>
<span>这是一个span</span>
<p>这是一个段落。222</p>
<span>这是一个span</span>
<p>这是一个段落。333</p>
<span>这是一个span</span>
<p id="p1">这是一个段落。444</p>
<span>这是一个span</span>
<p>这是一个段落。555</p>
<span>这是一个span</span>
<p class="colorBlue">这是一个段落。666</p>
<span>这是一个span</span>
<p>这是一个段落。555</p>
<span>这是一个span</span>
<p>这是一个段落。777</p>
<span>这是一个span</span>
<p class="colorBlue">这是一个段落。888</p>
<span>这是一个span</span>
<p>这是一个段落。555</p>
<span>这是一个span</span>
</body>
</html>过滤选择器和属性选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;}
</style>
<script src="./jQuery-1.7.1/jQuery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 3过滤选择器
// 3.1基本过滤选择器
// 过滤器使用后还可继续过滤，每次都用上一次过滤的结果
// 3.1.1条件约束选择器
// :first 第一个元素
//$("#s1>p:first").css("background-color","olive");
// :last 最后的一个元素
//$("#s1>p:last").css("background-color","olive");
// :even 索引为偶数的元素
//$("#s1>p:even").css("background-color","olive");
// :odd 索引为奇数的元素
//$("#s1>p:odd").css("background-color","olive");
// :eq(索引) 指定索引的元素
//$("#s1>p:eq(4)").css("background-color","olive");
// :gt(索引) 所有索引大于指定索引的元素，指定索引的元素取不到。
//$("#s1>p:gt(4)").css("background-color","olive");
// :lt(索引) 所有索引小于指定索引的元素，指定索引取不到。
//$("#s1>p:lt(4)").css("background-color","olive");
// :not(选择器) 不包含指定选择器的元素。
//$("#s1>p:not(.c)").css("background-color","olive");
// 多次过滤
//$("#s1>p:gt(4):lt(4)").css("background-color","olive");
// 3.1.2标签选择器
// :header 索引h标签
//$(":header").css("background-color","green");
// :animated 动画
// 3.2属性选择器
// 可叠加使用。
// 3.2.1含有属性选择器
// [属性]
//$("#s1>p[class]").css("background-color","green");
// 3.2.2验证属性值选择器
// 3.2.2.1等于与不等于
// [属性=值]
//$('#s1>p[class="c"]').css("background-color","green");
// [属性!=值]
//$('#s1>p[class!="c"][class!="b"]').css("background-color","green");
// 3.2.2.2开头与结尾
// [属性^=值]
//$('#s1>p[class^="c"]').css("background-color","green");
// [属性$=值]
//$('#s1>p[class$="b"]').css("background-color","green");
// 3.2.2.3包含与前缀
// [属性*=值] 类似SQL中的模糊查询 %值%
//$(':header[class*="v"]').css("background-color","green");
// [属性~=值] 含有多个属性值时，查询其中一个值。
//$('#s1>p[class~="cb"]').css("background-color","green");
// [属性|=值] 以该值开头并紧跟连字符"-"，或者就是值本身。
//$('#s1>p[class|="b"]').css("background-color","green");
});
</script>
</head>
<body>
<div id="h">
<h1 class="v">hhhhhhhhhhhhhhh1111111111111</h1>
<h2>hhhhhhhhhhhhhhh2222222222222</h2>
<h3 class="dvd">hhhhhhhhhhhhhhh3333333333333</h3>
<h4>hhhhhhhhhhhhhhh4444444444444</h4>
<h5>hhhhhhhhhhhhhhh5555555555555</h5>
<h6 class="d">hhhhhhhhhhhhhhh6666666666666</h6>
</div>
<div id="s1">
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p class="cb">这是一个段落。</p>
<p>这是一个段落。</p>
<p class="c">这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p class="c">这是一个段落。</p>
<p>这是一个段落。</p>
<p class="b-b">这是一个段落。</p>
<p>这是一个段落。</p>
<p class="b">这是一个段落。</p>
<p>这是一个段落。</p>
<p class="b c">这是一个段落。</p>
<p>这是一个段落。</p>
<p class="b cb">这是一个段落。</p>
<p>这是一个段落。</p>
</div>
</body>
</html>未完待续。
5775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
