selector （选择器） 的三种方式：
<!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>1.BasicSelectors - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//$("p").css("border", "5px solid pink");
//$(".a").css("border", "6px outset purple");
$("#domain").css("border", "5px groove darkviolet");
});
</script>
<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>
</head>
<body>
<ul id="domain">
<li class="a">www.caopeng.ORG</li>
<li class="a">www.caopeng.COM</li>
<li class="b">www.caopeng.NET</li>
<li class="a">www.caopeng.BIZ</li>
</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="a">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>
</html>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//$("p").css("border", "5px solid pink");
//$(".a").css("border", "6px outset purple");
$("#domain").css("border", "5px groove darkviolet");
});
</script>filter（进一步的 select）：
<!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>2.basicFilters - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//last:最后一个；fist:第一个。
//$("p:last").css("border", "3px dashed chocolate");
//even:偶数。数组脚标是从0开始的，所以是第一行和第三行是0和2。
// $("p:even").css("border", "3px dashed chocolate");
//odd:奇数。
//$("p:odd").css("border", "2px solid gray");
//gt: greater than. gt(1): 大于1。
$("p:gt(1)").css("border","2px dotted fuchsia");
});
</script>
<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>
</head>
<body>
<ul id="domain">
<li class="a">www.caopeng.ORG</li>
<li class="a">www.caopeng.COM</li>
<li class="b">www.caopeng.NET</li>
<li class="b">www.caopeng.BIZ</li>
</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>
</html>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//last:最后一个；fist:第一个。
//$("p:last").css("border", "3px dashed chocolate");
//even:偶数。数组脚标是从0开始的，所以是第一行和第三行是0和2。
// $("p:even").css("border", "3px dashed chocolate");
//odd:奇数。
//$("p:odd").css("border", "2px solid gray");
//gt: greater than. gt(1): 大于1。
$("p:gt(1)").css("border","2px dotted fuchsia");
});
</script>hierarchy（层级）：
<!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>3.HierCombo - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//,的意思是：都要选。
//$("p,li.b").css("background-color", "#ffebcd");
//空格的意思是：li.a 是属于 ul 的。
//$("ul li.a").css("background-color", "#8fbc8f");
//+的意思是：紧邻着 ul 的 p 元素。
//$("ul + p").css("background-color", "#483d8b");
//~的意思是：（sibling）兄弟姊妹，同级同辈的。
//与 #domin 这个 id 同级的 p 元素。
$("#domain ~ p").css("background-color", "#8b008b");
});
</script>
<style type="text/css">
p{ font-size:22px; }
.a { color: #F33;}
.b { color: #9C6;}
</style>
</head>
<body>
<ul id="domain">
<li class="a">www.caopeng.ORG</li>
<li class="a">www.caopeng.COM</li>
<li class="b">www.caopeng.NET</li>
<li class="b">www.caopeng.BIZ</li>
</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>
</html>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//,的意思是：都要选。
//$("p,li.b").css("background-color", "#ffebcd");
//空格的意思是：li.a 是属于 ul 的。
//$("ul li.a").css("background-color", "#8fbc8f");
//+的意思是：紧邻着 ul 的 p 元素。
//$("ul + p").css("background-color", "#483d8b");
//~的意思是：（sibling）兄弟姊妹，同级同辈的。
//与 #domin 这个 id 同级的 p 元素。
$("#domain ~ p").css("background-color", "#8b008b");
});
</script>child（还是限定条件的 select）：
和 filter 一样都用了 ":" 。
<!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>4.ChildVisCont - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//包含 "文" 这个字的段落(p)。
//$("p:contains(文)").css("background-color", "#1e90ff");
//ul 中第 "3" 个 li 。
$("ul li:nth-child(3)").css("border", "3px dotted #b8860b");
});
</script>
<style type="text/css">
p{ font-size:22px; border:}
.a { color: #F33;}
.b { color: #9C6;}
</style>
</head>
<body>
<ul id="domain">
<li class="a">www.caopeng.ORG</li>
<li class="a">www.caopeng.COM</li>
<li class="b">www.caopeng.NET</li>
<li class="b">www.caopeng.BIZ</li>
</ul>
<p class="a">曹鹏· 编程之邦</p>
<p>曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p>曹鹏· 创意商城</p>
</body>
</html>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//包含 "文" 这个字的段落(p)。
//$("p:contains(文)").css("background-color", "#1e90ff");
//ul 中第 "3" 个 li 。
$("ul li:nth-child(3)").css("border", "3px dotted #b8860b");
});
</script>
attribute_filter（属性匹配器）：
<!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>5.AttrFilters - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//所有包含 class 属性的 p 。
//$("p[class]").css("background-color", "#fffaf0");
//id=bczb1 的 p 。
//$("p[id=bczb1]").css("color", "#1e90ff");
//id 是以 bczd 开始的 p 。
//$("p[id^=bczb]").css("background-color", "firebrick");
//同时符合[id以bczd开始]、[lang包含en-]这两个条件的p。
$("p[id^=bczb][lang*=en-]").css("border", "5px solid darkorange");
});
</script>
<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>
</head>
<body>
<ul id="domain">
<li class="a">www.caopeng.ORG</li>
<li class="a">www.caopeng.COM</li>
<li class="b">www.caopeng.NET</li>
<li class="b">www.caopeng.BIZ</li>
</ul>
<p class="a">曹鹏· 编程之邦</p>
<p id="bczb1">曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p id="bczb4" lang="en-us">曹鹏· 创意商城</p>
</body>
</html><script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//所有包含 class 属性的 p 。
//$("p[class]").css("background-color", "#fffaf0");
//id=bczb1 的 p 。
//$("p[id=bczb1]").css("color", "#1e90ff");
//id 是以 bczd 开始的 p 。
//$("p[id^=bczb]").css("background-color", "firebrick");
//同时符合[id以bczd开始]、[lang包含en-]这两个条件的p。
$("p[id^=bczb][lang*=en-]").css("border", "5px solid darkorange");
});
</script>traverse（拿到网页里面一些element、object的信息，然后再使用一些函数，对它进行一些适当的折腾）
<!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>6.traversing - 曹鹏Jquery(Javascript)</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//弹出警示窗口，内容是："There are n(p段落的个数) <p> elements"。
//alert("There are " + $("p").length + " <p> elements");
//找 ul 里面 class 值是 b 的 li，给它加上css的一些规则。
$("ul").find("li.b").css("background-color", "#CF6");
});
</script>
<style type="text/css">
p{ font-size:22px;}
.a { color: #F33;}
.b { color: #9C6;}
</style>
</head>
<body>
<ul id="domain">
<li class="a">www.caopeng.ORG</li>
<li class="a">www.caopeng.COM</li>
<li class="b">www.caopeng.NET</li>
<li class="b">www.caopeng.BIZ</li>
</ul>
<p class="a">曹鹏· 编程之邦</p>
<p id="bczb1">曹鹏· 刀特卡姆</p>
<p class="b">曹鹏· 博客文摘</p>
<p id="bczb2">曹鹏· 创意商城</p>
<p id="bczb2">曹鹏· 创意商城</p>
<p id="bczb2">曹鹏· 创意商城</p>
</body>
</html><script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
//弹出警示窗口，内容是："There are n(p段落的个数) <p> elements"。
//alert("There are " + $("p").length + " <p> elements");
//找 ul 里面 class 值是 b 的 li，给它加上css的一些规则。
$("ul").find("li.b").css("background-color", "#CF6");
});
</script>
auto_icon（自动添加图标）：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<span style="white-space:pre"> </span><title>7.AutoIcons - 曹鹏Jquery(Javascript)</title>
<span style="white-space:pre"> </span><script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<span style="white-space:pre"> </span><script type="text/javascript">
<span style="white-space:pre"> </span>$("document").ready(function() {
<span style="white-space:pre"> </span>$("a[href$=pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span></script>
<span style="white-space:pre"> </span><style type="text/css">
<span style="white-space:pre"> </span>li {
<span style="white-space:pre"> </span>margin: 5pt 0 0 5pt;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span></style>
</head>
<body>
<h1>Example</h1>
<p></p>
<ul class="navlist" id="navlinks">
<li><a href="http://www.caopeng.ws">链接 #1</a></li>
<li><a name="#ws">链接名称</a></li>
<li><a href="http://www.caopeng.org">链接 #2</a></li>
<li><a href="http://www.caopeng.com.pdf">链接 #3</a></li>
<li><a href="http://www.caopeng.info">链接 #4</a></li>
<li><a href="http://www.caopeng.biz">链接 #5</a></li>
<li><a href="http://www.caopeng.net.pdf">链接 #6</a></li>
<li><a href="http://www.caopeng.tv.">链接 #7</a></li>
<li><a href="mailto:ccaopengg@hotmail.com">Email</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("a[href$=pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
<span> </span>});
</script>
扫一扫
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
