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

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>
 
posted @ 2013-06-06 14:38  moyiqun  阅读(158)  评论(0)    收藏  举报