闂瀵艱锛?
1. Jquery 鏈夊摢浜涘父鐢ㄥ寘瑁呴泦锛?
2. 浠€涔堟槸Jquery 鍖呰闆嗛摼寮忕紪绋嬶紵
瑙ｅ喅鏂規锛?
Jquery 鍖呰闆?/h2> 鍖呰闆嗙殑鍩烘湰鎿嶄綔
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
</head>
<body>
<table>
<tr id="fir"><td>1</td><td>1</td></tr>
<tr class="sed" ><td>2</td><td>1</td></tr>
<tr><td>3</td><td>1</td></tr>
<tr><td>4</td><td>1</td></tr>
</table>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 鑾峰彇鍖呰闆嗙殑涓暟
console.log($("table").length + " " + $("tr").length);
// 鑾峰彇鍖呰闆嗕腑鏌愪釜鍏冪礌(js 鍏冪礌)
$($("tr").get(1)).css("color","red");
// 鍒ゆ柇鍏冪礌鍦ㄥ寘瑁呴泦涓殑浣嶇疆
console.log($("tr").index($("tr#fir")) + " " + $("tr").index($("tr.sed")));
$()
});
</script>
</body>
</html>
Jquery - Jquery 包裝集 add
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
</head>
<body>
<table>
<tr><th>涔﹀悕</th><th>浣滆€?lt;/th></tr>
<tr id="fir"><td>澶╅緳鍏儴</td><td>閲戝焊</td></tr>
<tr class="sed" ><td>灏忔潕椋炲垁</td><td>鍙ら緳</td></tr>
<tr><td>鍥涘ぇ鍚嶆崟</td><td>娓╃憺瀹?lt;/td></tr>
<tr><td>鐧藉彂榄斿コ浼?lt;/td><td>姊佺窘鐢?lt;/td></tr>
</table>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
鍚戝寘瑁呴泦涓坊鍔犲厓绱? */
$("tr:eq(2)").add("tr th:eq(0)").css("color","red");
});
</script>
</body>
</html>
Jquery - Jquery 包裝集 not
<script type="text/javascript">
$(document).ready(function(){
$("tr").not("tr#fir, tr.sed").css("color","red");
});
</script>
聽 Jquery - Jquery 包裝集 filter
<script type="text/javascript">
$(document).ready(function(){
// 灏忎簬3(鍓?涓?
$("tr").filter("tr:lt(3)").css("color","red");
});
</script>
Jquery - Jquery 包裝集 slice
<script type="text/javascript">
$(document).ready(function(){
// 閫夊彇涓€涓柊鐨勫寘瑁呴泦
$("tr").slice(1,2).css("color","red");
$("tr").slice(1,3).css("background","yellow");
});
</script>
Jquery - Jquery 包裝集 find
<script type="text/javascript">
$(document).ready(function(){
$("table").find("tr.sed").css("color","orange");
});
</script>
Jquery - Jquery 包裝集 is 琛ㄧず褰撳墠鍖呰闆嗕腑鏄惁鍖呭惈鏌愪釜鍏冪礌
<script type="text/javascript">
$(document).ready(function(){
console.log($("table tr td").css("color","red").is("td:contains('澶╅緳鍏儴')"));
console.log($("td").css("background","orange").is("td:contains('澶╅緳鍏儴')"));
console.log($("table").css("border","2px solid blue").is("td:contains('澶╅緳鍏儴')"));
});
</script>
Jquery - Jquery 包裝集 children
<script type="text/javascript">
$(document).ready(function(){
// 姣忎釜tr 鎵€鏈夌殑td 涓€夊彇 td:eq(5)
$("tr").children("td:eq(5)").css("color","red");
$("tbody").children("tr:eq(2)").css("color","pink");
/*
瀵逛簬琛ㄦ牸锛岃繕瑕佹敞鎰?lt;tr>鏈変竴涓殣鍚殑鐖惰妭鐐?lt;tbody>銆? 鎵€浠ユ病鏈夊厓绱犲瓧浣撳彉钃濊壊
*/
$("table").children("tr:eq(2)").css("color","blue");
});
</script>
Jquery - Jquery 包裝集 next 鐩擱偦涓嬩竴涓厓绱犮€乶extAll 鐩擱偦涓嬩竴缁勫厓绱犅犺繑鍥炴柊鐨勫寘瑁呴泦
<script type="text/javascript">
$(document).ready(function(){
/*
next 褰撳墠鍏冪礌涓嬩竴涓悓绾у厓绱? nextAll 褰撳墠鍏冪礌鐩擱偦鎵€鏈夊厓绱? */
$("tr#fir").next().css("color","red").nextAll().css("color","pink");
});
</script>
Jquery - Jquery 包裝集 parent 鐩存帴鐖跺厓绱犮€?parents
<script type="text/javascript">
// 杩斿洖姣忎釜鍖呰鍏冪礌鐩存帴鐖跺厓绱? $("td:contains('鍥涘ぇ鍚嶆崟')").parent().css("background","yellow");
// 杩斿洖姣忎釜鍖呰鍏冪礌鎵€鏈夌殑绁栧厛鍏冪礌
$("td:contains('鍥涘ぇ鍚嶆崟')").parents().css("color","blue");
</script>
Jquery - Jquery 包裝集 siblings
<script type="text/javascript">
// siblings 杩斿洖鍚岀駭鎵€鏈夌殑鍖呰闆? $("tr.sed").siblings().css("color","orange");
</script>
Jquery - Jquery 包裝集 Jquery 鍖呰闆嗛摼寮忕紪绋?/h2> end 涓婁竴涓寘瑁呭櫒
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
</head>
<body>
<table id="books1">
</table>
<table id="books">
<tr><th>涔﹀悕</th><th>浣滆€?lt;/th></tr>
<tr id="fir"><td>澶╅緳鍏儴</td><td>閲戝焊</td></tr>
<tr class="sed" ><td>灏忔潕椋炲垁</td><td>鍙ら緳</td></tr>
<tr><td>鍥涘ぇ鍚嶆崟</td><td>娓╃憺瀹?lt;/td></tr>
<tr><td>鐧藉彂榄斿コ浼?lt;/td><td>姊佺窘鐢?lt;/td></tr>
</table>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
/*
閾懼紡鎿嶄綔
end 涓婁竴涓寘瑁呭櫒
*/
$("#books tbody").clone().appendTo("#books1").find("tr:odd").css("color","pink")
.end().end().find("tr:even").css("color","orange");
</script>
</body>
</html>
Jquery - Jquery 包裝集 andSelf 鍓嶄袱涓寘瑁呴泦
<script type="text/javascript">
/*
閾懼紡鎿嶄綔
andSelf 鍓嶄袱涓寘瑁呴泦
*/
$("#books tbody").clone().appendTo("#books1").andSelf().find("td:contains('灏忔潕椋炲垁')").css("color","red");
</script>
Jquery - Jquery 包裝集
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
</head>
<body>
<table>
<tr id="fir"><td>1</td><td>1</td></tr>
<tr class="sed" ><td>2</td><td>1</td></tr>
<tr><td>3</td><td>1</td></tr>
<tr><td>4</td><td>1</td></tr>
</table>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 鑾峰彇鍖呰闆嗙殑涓暟
console.log($("table").length + " " + $("tr").length);
// 鑾峰彇鍖呰闆嗕腑鏌愪釜鍏冪礌(js 鍏冪礌)
$($("tr").get(1)).css("color","red");
// 鍒ゆ柇鍏冪礌鍦ㄥ寘瑁呴泦涓殑浣嶇疆
console.log($("tr").index($("tr#fir")) + " " + $("tr").index($("tr.sed")));
$()
});
</script>
</body>
</html> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
</head>
<body>
<table>
<tr><th>涔﹀悕</th><th>浣滆€?lt;/th></tr>
<tr id="fir"><td>澶╅緳鍏儴</td><td>閲戝焊</td></tr>
<tr class="sed" ><td>灏忔潕椋炲垁</td><td>鍙ら緳</td></tr>
<tr><td>鍥涘ぇ鍚嶆崟</td><td>娓╃憺瀹?lt;/td></tr>
<tr><td>鐧藉彂榄斿コ浼?lt;/td><td>姊佺窘鐢?lt;/td></tr>
</table>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
鍚戝寘瑁呴泦涓坊鍔犲厓绱? */
$("tr:eq(2)").add("tr th:eq(0)").css("color","red");
});
</script>
</body>
</html> <script type="text/javascript">
$(document).ready(function(){
$("tr").not("tr#fir, tr.sed").css("color","red");
});
</script> <script type="text/javascript">
$(document).ready(function(){
// 灏忎簬3(鍓?涓?
$("tr").filter("tr:lt(3)").css("color","red");
});
</script> <script type="text/javascript">
$(document).ready(function(){
// 閫夊彇涓€涓柊鐨勫寘瑁呴泦
$("tr").slice(1,2).css("color","red");
$("tr").slice(1,3).css("background","yellow");
});
</script> <script type="text/javascript">
$(document).ready(function(){
$("table").find("tr.sed").css("color","orange");
});
</script> <script type="text/javascript">
$(document).ready(function(){
console.log($("table tr td").css("color","red").is("td:contains('澶╅緳鍏儴')"));
console.log($("td").css("background","orange").is("td:contains('澶╅緳鍏儴')"));
console.log($("table").css("border","2px solid blue").is("td:contains('澶╅緳鍏儴')"));
});
</script> <script type="text/javascript">
$(document).ready(function(){
// 姣忎釜tr 鎵€鏈夌殑td 涓€夊彇 td:eq(5)
$("tr").children("td:eq(5)").css("color","red");
$("tbody").children("tr:eq(2)").css("color","pink");
/*
瀵逛簬琛ㄦ牸锛岃繕瑕佹敞鎰?lt;tr>鏈変竴涓殣鍚殑鐖惰妭鐐?lt;tbody>銆? 鎵€浠ユ病鏈夊厓绱犲瓧浣撳彉钃濊壊
*/
$("table").children("tr:eq(2)").css("color","blue");
});
</script> <script type="text/javascript">
$(document).ready(function(){
/*
next 褰撳墠鍏冪礌涓嬩竴涓悓绾у厓绱? nextAll 褰撳墠鍏冪礌鐩擱偦鎵€鏈夊厓绱? */
$("tr#fir").next().css("color","red").nextAll().css("color","pink");
});
</script> <script type="text/javascript">
// 杩斿洖姣忎釜鍖呰鍏冪礌鐩存帴鐖跺厓绱? $("td:contains('鍥涘ぇ鍚嶆崟')").parent().css("background","yellow");
// 杩斿洖姣忎釜鍖呰鍏冪礌鎵€鏈夌殑绁栧厛鍏冪礌
$("td:contains('鍥涘ぇ鍚嶆崟')").parents().css("color","blue");
</script> <script type="text/javascript">
// siblings 杩斿洖鍚岀駭鎵€鏈夌殑鍖呰闆? $("tr.sed").siblings().css("color","orange");
</script> end 涓婁竴涓寘瑁呭櫒
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
</head>
<body>
<table id="books1">
</table>
<table id="books">
<tr><th>涔﹀悕</th><th>浣滆€?lt;/th></tr>
<tr id="fir"><td>澶╅緳鍏儴</td><td>閲戝焊</td></tr>
<tr class="sed" ><td>灏忔潕椋炲垁</td><td>鍙ら緳</td></tr>
<tr><td>鍥涘ぇ鍚嶆崟</td><td>娓╃憺瀹?lt;/td></tr>
<tr><td>鐧藉彂榄斿コ浼?lt;/td><td>姊佺窘鐢?lt;/td></tr>
</table>
<script type="text/javascript" src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
/*
閾懼紡鎿嶄綔
end 涓婁竴涓寘瑁呭櫒
*/
$("#books tbody").clone().appendTo("#books1").find("tr:odd").css("color","pink")
.end().end().find("tr:even").css("color","orange");
</script>
</body>
</html> andSelf 鍓嶄袱涓寘瑁呴泦
<script type="text/javascript">
/*
閾懼紡鎿嶄綔
andSelf 鍓嶄袱涓寘瑁呴泦
*/
$("#books tbody").clone().appendTo("#books1").andSelf().find("td:contains('灏忔潕椋炲垁')").css("color","red");
</script>