您的位置：首页 > Web前端 > JQuery

jQuery 学习笔记之四 (jQuery 选择器)

2011-03-07 16:11 716 查看 
jQuery 改写  javascript代码

例子1：给网页中所有的<p>元素添加onclick事件。
例子2：使用一个特定的表格隔行变色。
例子3 对多选框进行操作，输出选中的多选框个数。

使用jQuery选择器重写例子
$("p").click(function(){
//doing something!
})

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){ // dom元素加载完毕
$("p").click(function(){//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
//doing something...
alert("suc!");
})
})
</script>
</head>
<body>
<p>测试1</p>
<p>测试2</p>
</body>
</html>

$('#tb tbody tr:even').css("backgroundColor","#888");

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){// dom元素加载完毕
$('#tb tbody tr:even').css("backgroundColor","red");
//获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
//改变它的背景色.
})
</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);
});

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){// dom元素加载完毕
$('#btn').click(function(){ //获取id为btn的元素,给它添加onclick事件
var items =  $("input[name='check']:checked");
//获取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\\]');  //转义特殊字符[]

<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $id_a  = $('#id.a');//jQuery对象
var $id_b  = $('#id#b');//jQuery对象
var $id_c =  $('#id[1]'); 	//jQuery对象
alert( $id_a.html() );//这样会获取不到，输出null
alert( $id_b.html() );//这样会获取不到，输出null
alert( $id_c.html() );//这样会获取不到，输出null

var $id_right_a  = $('#id\\.a');//jQuery对象,对特殊字符,我们转义一下
var $id_right_b  = $('#id\\#b');//jQuery对象,对特殊字符,我们转义一下
var $id_right_c  = $('#id\\[1\\]'); 			//对特殊字符，我们转义一下
alert( $id_right_a.html() );//正确输出"aa"
alert( $id_right_b.html() );//正确输出"bb"
alert( $id_right_c.html() );//正确输出"cc"
})
</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');//带空格的jQuery选择器
var $b_b = $('.test:hidden'); //不带空格的jQeruy选择器
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');//不带空格的则是选取隐藏的class为"test"的元素。

<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<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);  //输出 4
alert("$('.test:hidden') = "+len_b);  //输出 3
})
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航