jQuery选择器
1.给网页所有<p>标签加上点击事件.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
<body>
<p>测试1</p>
<p>测试2</p>
<script type="text/javascript">
$("p").click(function()
{
alert("hello");
});
</script>
</body>
</html>
2.使表格隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
<body>
<!-- <p>测试1</p>
<p>测试2</p> -->
<table id="tb">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
<script type="text/javascript">
$("#tb tbody tr:even").css("backgroundColor","#888");
</script>
</body>
</html>
3.对多选框进行操作，输出选择的多选框的个数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> <body> <input type="checkbox" value="1" name="check" checked="checked"> <input type="checkbox" value="2" name="check"> <input type="checkbox" value="3" name="check" checked="checked"> <input type="button" value="你选择的个数" id="btn"> <script type="text/javascript"> $("#btn").click(function(){ var items = $("input[name='check']:checked") alert("选择的个数为"+items.length); }); </script> </body> </html>
4. 折叠--》显示全部（部分高亮）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
*{margin: 0;padding: 0;}
body{font-size: 12px;text-align: center;}
a{color:#04D;text-decoration:none;}
a:hover{color: #F50;text-decoration:underline; }
.SubCategoryBox{width: 600px;margin: 0 auto;text-align: center;margin-top: 40px;}
.SubCategoryBox ul{list-style: none}
.SubCategoryBox ul li{display: block;float: left;width: 200px;line-height: 20px;}
.showmore{clear: both;text-align: center;padding-top: 10px}
.showmore a{display: block;with:120px;margin:0 auto;line-height: 24px;border: 1px}
.showmore a span{padding-left: 15px;}
.promoted a {color: #F50;}
</style>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440)</i> </li>
<li><a href="#">索尼</a><i>(27220)</i> </li>
<li><a href="#">三星</a><i>(20808)</i> </li>
<li><a href="#">尼康</a><i>(17821)</i> </li>
<li><a href="#">松下</a><i>(12289)</i> </li>
<li><a href="#">卡西欧</a><i>(8242)</i> </li>
<li><a href="#">富士</a><i>(14894)</i> </li>
<li><a href="#">柯达</a><i>(9520)</i> </li>
<li><a href="#">宾得</a><i>(2195)</i> </li>
<li><a href="#">理光</a><i>(4114)</i> </li>
<li><a href="#">奥林巴斯</a><i>(12205)</i> </li>
<li><a href="#">明基</a><i>(1466)</i> </li>
<li><a href="#">爱国者</a><i>(3091)</i> </li>
<li><a href="#">其他品牌相机</a><i>(7275)</i> </li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
<script type="text/javascript">$(function () {
var $category= $("ul li:gt(5):not(:last)");
$category.hide();
var $toggleBtn=$("div.showmore>a");
$toggleBtn.click(function () {
if ($category.is(":visible")){
$category.hide();
$(this).find("span")
.text("显示全部品牌");
$('ul li ').removeClass("promoted");
} else {
$category.show();
$(this).find('span')
.text("精简显示品牌");
$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted");
}
return false;
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号