2 Jquery 的选择器

作者: 流光已至 | 来源:发表于2018-08-02 20:43 被阅读0次

jquery选择器书目录
JQUERY一
jQuser有选择器
jQuery 基础
jQuery
选择器
jQuery笔记
JQuery基础知识
jQuery选择器
jQuery选择器

1 id选择器

2 元素选择器

跳出循环使用： return false;

3 类选择器

多种选择器可以叠加，用逗号分隔即可。

4 层次选择器

中间空格隔开，在给定祖先元素下匹配所有的后代元素

中间 > 隔开，匹配所有的子元素，即不包括孙子元素

prev + next , 匹配所有紧接在prev元素后的next一个元素，中间不能隔有元素

prev~siblings, 匹配prev元素之后的所有的siblings(兄弟，同辈)元素，不包含该元素，并且是后面元素。

5 过滤选择器

: last 最后一个元素：even 偶数元素 (从0开始) ：odd 奇数元素

效果和相应的代码如下：

<script type="text/javascript">
  
    $(function(){
      
       $("tr:even").css({background:'yellow'})   // 后面为Json,可加多个    
    })
    
    
    function myclick(){
        
        $("tr:first").each(function(){
            
              alert($(this).html());
        
        })
    }
   
</script>
<style type="text/css">
    table{
       border-collapse: collapse  <!--将线变成单线 -->
    }
</style>
</head>
<body>
   <table border="1">
       <tr><td>李逵</td><td>30</td></tr>
       <tr><td>李鬼</td><td>28</td></tr>
        <tr><td>宋江</td><td>34</td></tr>
        <tr><td>花荣</td><td>29</td></tr>
   </table>
  <input value="点击" type="button" onclick="myclick()">
</body>
</html>

实现全选，与反选

// 全选
    function  checkAll(){
        
   /*     $("td input").each(function(){
           
           $(this).attr("checked","checked")
           
       }) */
       
       $("td input").attr("checked","checked");
    }
    
    function reverseCheck(){
        
        $("td input").each(function(){
            
            var checkState = $(this).attr("checked");
            
            if(checkState=='checked'){
                $(this).removeAttr("checked");
            }else{
                
                 $(this).attr("checked","checked")
            }
            
        })
        
        
    }