jQuery选择器

back>>

1. 表格各行变色

 

    HTML & CSS:

<style type="text/css">
           body{font-size:12px;text-align:center}
           #tbStu{width:260px;border:solid 1px #666;background-color:#eee}
           #tbStu tr{line-height:23px}
           #tbStu tr th{background-color:#ccc;color:#fff}
           #tbStu .trOdd{background-color:#fff}
</style>

<table id="tbStu" cellpadding="0" cellspacing="0">
    <tr>
      <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
    </tr>
    <!--奇数行-->
    <tr>
      <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
    <!--偶数行-->
    <tr>
      <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
</tr>
</table>

 JavaScript & jQuery

//Javascript：
<script type="text/javascript">
         window.onload=function(){
         var oTb=document.getElementById("tbStu");
         for(var i=0;i<oTb.rows.length-1;i++){
             if(i%2){
             oTb.rows[i].className="trOdd";
             }
           }
         }
</script>

//Jquery：
<script type="text/javascript">
      $(function(){
            $("#tbStu tr:nth-child(even)").addClass("trOdd");
         })
</script>

 

2. jQuery检测机制

    javascript操作元素时，对为空的元素需要进行判断，如果不为空，才能进行下一步的操作。如果对为空的元素不判断就进行操作，浏览器会报错。而jQuery自身具有检测机制，无需再添加判断。

//javaScript:
<script type="text/javascript">
        window.onload=function(){
         if(document.getElementById("divT"))
           {
            var oDiv=document.getElementById("divT");
            oDiv.innerHTML="这是一个检测页面";
           }
        }
</script>
//要想操作id为divT的元素，需要判断该元素是否存在，即if(document.getElementById("divT"))。如果不判断，浏览器就会提示错误，页面会中断执行。
//Jquery:
<script type="text/javascript">
          $(function(){
            $("#divT").html("这是一个检测页面");
         })
</script>
//Jquery中无需判断，如果divT不存在，页面也会正常执行。

 

3. 基本选择器

    ID选择器，标签选择器，类选择器

<script type="text/javascript">
            $(function(){ //ID匹配元素
              $("#divOne").css("display","block");
            })
            $(function(){ //元素名匹配元素 （div元素下的span元素进行显示）
              $("div span").css("display","block");
            })
            $(function(){ //类匹配元素 （class为.clsFrame元素下的class为.clsOne的元素进行显示）
              $(".clsFrame .clsOne").css("display","block");
            })
            $(function(){ //匹配所有元素
              $("*").css("display","block");
            })
            $(function(){ //合并匹配元素（id为divOne的元素和span元素进行显示）
              $("#divOne,span").css("display","block");
            })
</script>

4. 层次选择器

    层次选择器通过DOM元素之间的层次关系获取元素，层次关系包括后代、父子、相邻、兄弟关系。

<style type="text/css">
           body{font-size:12px;text-align:center}
           div,span{float:left;border:solid 1px #ccc;margin:8px;display:none}
</style>
<div class="clsFraA">Left</div>
<div class="clsFraA" id="divMid">
         <span class="clsFraP" id="Span1">
              <span class="clsFraC" id="Span2"></span>
         </span>
</div>
<div class="clsFraA">Right_1</div>
<div class="clsFraA">Right_2</div>
//Jquery:
<script type="text/javascript">
            $(function(){ //匹配后代元素 
              $("#divMid").css("display","block");
              $("div span").css("display","block");//div下的所有span元素（包括子和孙子）
            })
            $(function(){ //匹配子元素
              $("#divMid").css("display","block");
              $("div>span").css("display","block");//仅仅是div下的所有子span元素
            })
            $(function(){ //匹配后面元素（#divMid紧跟着的下一个元素）
              $("#divMid + div").css("display","block");//if#divMid后面紧跟的元素不是div，则不报错也不显示。
              $("#divMid").next().css("display","block");
            })
            $(function(){ //匹配所有后面元素
              $("#divMid ~ div").css("display","block");
              $("#divMid").nextAll().css("display","block");
            })
            $(function(){
              $("#divMid").siblings().css("display","block");//匹配所有相邻元素 包括前后
$("#divMid").siblings(“div”).css("display","block");//匹配所有相邻的div元素
            })
</script>

 

5. 简单过滤选择器

<script type="text/javascript">
            $(function(){ //为第一个li元素增加类别
              $("li:first").addClass("GetFocus");
            })
            $(function(){ //为最后一个li元素增加类别
              $("li:last").addClass("GetFocus");
            })
            $(function(){ //为所有除了class为.NotClass的li元素增加类别
              $("li:not(.NotClass)").addClass("GetFocus");
            })
            $(function(){ //为所有索引值为偶数的li元素增加类别,从0开始计数
              $("li:even").addClass("GetFocus");
            })
            $(function(){ //为所有索引值为奇数的li元素增加类别,从0开始计数
              $("li:odd").addClass("GetFocus");
            })
            $(function(){ //为索引值为1的li元素增加类别,从0开始计数
              $("li:eq(1)").addClass("GetFocus");
            })
            $(function(){ //为索引值大于1的li元素增加类别,从0开始计数
              $("li:gt(1)").addClass("GetFocus");
            })
            $(function(){ //为索引值小于4的li元素增加类别,从0开始计数
              $("li:lt(4)").addClass("GetFocus");
            })
            $(function(){ //增加标题类元素类别
              $("div h1").css("width","238");
              $(":header").addClass("GetFocus");//获取所有标题类型元素，如h1，h2…
            })
            $(function(){ 
              animateIt(); //增加动画效果元素类别
              $("#spnMove:animated").addClass("GetFocus");//获取所有有动画效果的并且id为spnMove的元素
            })
            function animateIt() { //动画效果   
              $("#spnMove").slideToggle("slow", animateIt);   
            }
    </script>

 

6. 内容过滤选择器

 

<style type="text/css">
body{font-size:12px;text-align:center}
div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee;display:none}
    </style>
    <script type="text/javascript">
            $(function(){ //获取包含给定文本div的元素
              $("div:contains('A')").css("display","block");
            })
            $(function(){ //获取所有不包含子元素或者文本的空div元素
              $("div:empty").css("display","block");
            })
            $(function(){ //获取含有选择器所匹配的元素(span)的div元素
              $("div:has(span)").css({"display":"block","border":"1px solid blue"});
            })
            $(function(){ //获取含有子元素或者文本的div元素
              $("div:parent").css("display","block");
            })
    </script>
<body>
    <div>ABCD</div>
    <div><span></span></div>
    <div>EFaH</div>
    <div></div>
</body>

 

7. 可见性过滤选择器

 

显示函数：show()
隐藏函数：hide()
<script type="text/javascript">
            $(function(){ //:hidden获取不可见span元素，包括display:none和type=hidden以及visibility:hidden的元素
              $("span:hidden").show();
              $("div:visible").addClass("GetFocus");//获取所有可见的div元素
            })
            $(function(){
              $("span:hidden").show().addClass("GetFocus");
            })
</script>

 

 

8. 属性过滤选择器

 

 

<script type="text/javascript">
            $(function(){ //显示所有含有id属性的div元素
              $("div[id]").show(3000);
            })
            $(function(){ //显示所有属性title的值是"A"的divdiv元素
              $("div[title='A']").show(3000);
            })
            $(function(){ //显示所有属性title的值不是"A"的div元素
              $("div[title!='A']").show(3000);
            })
            $(function(){ //显示所有属性title的值以"A"开始的div元素
              $("div[title^='A']").show(3000);
            })
            $(function(){ //显示所有属性title的值以"C"结束的div元素
              $("div[title$='C']").show(3000);
            })
            $(function(){ //显示所有属性title的值中含有"B"的div元素
              $("div[title*='B']").show(3000);
            })
            $(function(){ //显示所有属性title的值中含有"B"且属性id的值是"divAB"的div元素
              $("div[id='divAB'][title*='B']").show(3000);
            })
</script>

 

9. 子元素过滤选择器

<script type="text/javascript">
            $(function(){ //获取所有索引为2的li元素
              $("li:nth-child(2)").addClass("GetFocus");
            })
            $(function(){ //获取所有索引为0的li元素 
              $("li:first-child").addClass("GetFocus");
            })
            $(function(){ //增加每个父元素下的最后一个子元素类别
              $("li:last-child").addClass("GetFocus");
            })
            $(function(){ //增加每个父元素下只有一个子元素类别
              $("li:only-child").addClass("GetFocus");
            })
</script>

 

10. 表单对象属性过滤选择器

$(function(){ //增加表单中所有属性为可用的元素类别
              $("#divA").show(3000);
              $("#form1 input:enabled").addClass("GetFocus");
            })
            $(function(){ //增加表单中所有属性为不可用的元素类别
              $("#divA").show(3000);
              $("#form1 input:disabled").addClass("GetFocus");
            })
            $(function(){ //增加表单中所有被选中的元素类别
              $("#divB").show(3000);
              $("#form1 input:checked").addClass("GetFocus");
            })
            $(function(){ //显示表单中所有被选中option的元素内容
              $("#divC").show(3000);
              $("#Span2").html("选中项是："+$("select option:selected").text());
            })

 
11. 表单选择器

<script type="text/javascript">
            $(function(){ //显示Input类型元素的总数量
              $("#form1 div").html("表单共找出 Input 类型元素:"+$("#form1 :input").length);
//:input 表示获取所有input，textarea，select表单元素
              $("#form1 div").addClass("div");
            })
            $(function(){ //显示所有文本框对象
              $("#form1 :text").show(3000);
            })
            $(function(){ //显示所有密码框对象
              $("#form1 :password").show(3000);
            })
            $(function(){ //显示所有单选按钮对象
              $("#form1 :radio").show(3000);
              $("#form1 #Span1").show(3000);
            })
            $(function(){  //显示所有复选框对象
              $("#form1 :checkbox").show(3000);
              $("#form1 #Span2").show(3000);
            })
            $(function(){ //显示所有提交按钮对象
              $("#form1 :submit").show(3000);
            })
            $(function(){ //显示所有图片域对象
              $("#form1 :image").show(3000);
            })
            $(function(){ //显示所有重置按钮对象
              $("#form1 :reset").show(3000);
            })
            $(function(){ //显示所有按钮对象
              $("#form1 :button").show(3000);
            })
            $(function(){ //显示所有文件域对象
              $("#form1 :file").show(3000);
            })
</script>

 

 

 

评论

2 楼 zzqrj 2011-10-10  

完整代码：jQuery权威指南的源码
<!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>使用jQuery选择器实现隔行变色</title>
    <script language="javascript" type="text/javascript"
            src="Jscript/jquery-1.4.2.min.js"></script>
    <style type="text/css">
           body{font-size:12px;text-align:center}
           #tbStu{width:260px;border:solid 1px #666;background-color:#eee}
           #tbStu tr{line-height:23px}
           #tbStu tr th{background-color:#ccc;color:#fff}
           #tbStu .trOdd{background-color:#fff}
    </style>
    <script type="text/javascript">
      $(function(){
            $("table tr:nth-child(even)").addClass("trOdd");
         })
    </script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">

    <tr>
      <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
    </tr>
    <!--奇数行-->
    <tr>
      <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
    <!--偶数行-->
    <tr>
      <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
</table>
</body>
</html>

1 楼 八岭书生 2011-10-07  

表格各行变色

js 用了 没反应 啊