zoukankan      html  css  js  c++  java
  • jQuery通过过滤器获取元素

        通过过滤器("滤镜"),主要用来获取集合性的元素,尤其适用于需要操作的列表或表标签的情况下,通过("元素名:过滤器名")来使用这种方法

    html代码

    View Code
     <ul>
          
    <li>第0个li元素变为红色</li>
          
    <li><h1>第1个li元素不变色</h1></li>
          
    <li>第2个li元素不变色dd</li>
          
    <li>第3个li元素不变色</li>
          
    <li>第4个li元素不变色</li>
          
    <li>第5个li元素不变色</li>
           
    <li></li>
          
    <li>aaaa<span>aaaaa</span></li>
        
    </ul>

    1.获取第一个li元素

    var li_query=$("li:first");

    2.获取最后一个li元素

    var li_query=$("li:last");

    3.获取第指定li外元素

    var li=$("li:not(:first)").css("fontSize","25");

    4.获取偶数序号的元素

    var li=$("li:even").css("color","blue");

    5.获取奇数序号的元素

    var li=$("li:odd").css("color","blue");

    6.获取指定序号的元素

    var li=$("li:eq(2)").css("fontSize","25");

    7.获取指定序号后的元素

    var li=$("li:gt(2)").css("fontSize","20");

    8.获取指定序号前的元素

    var li=$("li:lt(2)").css("fontSize","12");

    9.获取页面所有<h>标题元素

    var li=$("li:header").css("fontSize","30");

    10.获取包含指定字符串的元素

    var li=$("li:contains('dd')").css("color","blue");

    11.获取空元素

    var li=$("li:empty").text("空元素").css("color","red");

    12.获取非空元素

    var li=$("li:parent").css("color","red");

    13.获取有子孙元素的元素

    var li=$("li:has(span)").css("fontSize","50");

    14.获取所有正在执行动画效果的元素

    var li=$("li:animated");

    上面是对li列表标签操作的,当然也可以对页面中的input,特别是表格进行操作,比如对表格的偶数行和奇数行显示不通的样色,为了区分页面中的表格,可以用id区分一下

    View Code
     <table id="tt">
          
    <tr>
            
    <td>第一个td</td>
          
    </tr>
          
    <tr>
            
    <td>第二个td</td>
          
    </tr>
          
    <tr>
            
    <td>第三个td</td>
          
    </tr>
          
    <tr>
            
    <td>第四个td</td>
          
    </tr>
          
    <tr>
            
    <td>第五个td</td>
          
    </tr>
       
    </table>
         
    <table>
          
    <tr>
            
    <td>第一个td</td>
          
    </tr>
          
    <tr>
            
    <td>第二个td</td>
          
    </tr>
          
    <tr>
            
    <td>第三个td</td>
          
    </tr>
          
    <tr>
            
    <td>第四个td</td>
          
    </tr>
          
    <tr>
            
    <td>第五个td</td>
          
    </tr>
       
    </table>

    jquery:

    $("#tt tr:even").css("background-color", "#bbbbff");
    $("#tt tr:odd").css("background-color", "red");


     

    多思考,多创新,才是正道!
  • 相关阅读:
    20、虚拟内存的目的是什么?
    19、进程间通信有哪几种方式?把你知道的都说出来
    18、进程通信方法(Linux和windows下),线程通信方法(Linux和 windows下)
    17、操作系统在对内存进行管理的时候需要做些什么?
    16、进程同步的四种方法?
    python学习——生成器表达式
    python学习——闭包
    细说websocket
    git hg提交拉取
    切换samba用户
  • 原文地址:https://www.cnblogs.com/shuang121/p/2078240.html
Copyright © 2011-2022 走看看