jQuery 改写 javascript代码
例子1：给网页中所有的<p>元素添加onclick事件。
例子2：使用一个特定的表格隔行变色。
例子3 对多选框进行操作，输出选中的多选框个数。
使用jQuery选择器重写例子
$("p").click(function(){
})
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script language="javascript" >
$(function(){
$("p").click(function(){
alert("suc!");
})
})
</script>
</head>
<body>
<p>测试1</p>
<p>测试2</p>
</body>
</html>
$('#tb tbody tr:even').css("backgroundColor","#888");
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script language="javascript" >
$(function(){
$('#tb tbody tr:even').css("backgroundColor","red");
})
</script>
</head>
<body>
<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>
</body>
</html>
$("#btn").click(function(){
var length = $("input[name='check']:checked").length;
alert(length);
});
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script language="javascript" >
$(function(){
$('#btn').click(function(){
var items = $("input[name='check']:checked");
alert( "选中的个数为："+items.length )
})
})
</script>
</head>
<body>
<input type="checkbox" value="1" name="check" checked/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked/>
<input type="button" value="测试选中的个数" id="btn"/>
</body>
</html>
选择器中含有特殊字符注意事项
1.选择器中含有".","#","(",或者"]" 等特殊字符
根据W3C的规定，属性值中是不能含有这些特殊字符的。
如果碰到特殊字符这样来去是有错误的
$('#id#b');
$('#id[1]');
以上代码不能正确获取到元素，正确的写法如下:
$('#id\\#b');
$('#id\\[1\\]');
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script type="text/javascript">
$(function(){
var $id_a = $('#id.a');
var $id_b = $('#id#b');
var $id_c = $('#id[1]');
alert( $id_a.html() );
alert( $id_b.html() );
alert( $id_c.html() );
var $id_right_a = $('#id\\.a');
var $id_right_b = $('#id\\#b');
var $id_right_c = $('#id\\[1\\]');
alert( $id_right_a.html() );
alert( $id_right_b.html() );
alert( $id_right_c.html() );
})
</script>
</head>
<body>
<div id="id.a">aa</div>
<div id="id#b">bb</div>
<div id="id[1]">cc</div>
</body>
</html>
选择器注意事项
1.3.1 前
$('div[@title="test"]');
1.3.1 后
$('div[title="test"]');
选择器中含有空格的注意事项
<div class="test">
<div style="display:none">aa</div>
<div style="dispaly:none">bb</div>
<div systel="display:none">cc</div>
<div class="test" style="dispaly:none">dd</div>
</div>
<div class="test" style="dispaly:none">ee</div>
<div class = "test" style="dispaly:none">ff</div>
使用如下的jQuer选择器分别获取它们
var $t_a = $('.test :hidden');
var $b_b = $('.test:hidden');
var len_a = $t_a.length;
var len_b = $t_b.length;
alert("$('.test :hidden')="+len_a); 输出4
alert("$('.test:hidden')="+len_b); 输出3
之所以会出现不同的结果，是因为后代选择器与过滤选择器的不同。
var $t_a=$('.test :hidden');
以上代码取class为test的元素里面的隐藏元素.
var $t_b=$('.test:hidden');
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script type="text/javascript">
$(function(){
var $t_a = $('.test :hidden');
var $t_b = $('.test:hidden');
var len_a = $t_a.length;
var len_b = $t_b.length;
alert("$('.test :hidden') = "+len_a);
alert("$('.test:hidden') = "+len_b);
})
</script>
</head>
<body>
<div class="test">
<div style="display:none;">aa</div>
<div style="display:none;">bb</div>
<div style="display:none;">cc</div>
<div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>
</body>
</html>