• jQuery筛选--hasClass(class)和eq(index|-index)


       hasClass(class)

    概述

        检查当前的元素是否含有某个特定的类,如果有,则返回true

    参数

        class  用于匹配的类名

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("p").click(function(){
                        //hasClass(class)检查当前的元素是否含有某个特定的类,如果有,则返回true
                        if($(this).hasClass("paragraph")){
                            $(this).css("color","#0000FF");
                        }
                    });
                });
            </script>
            <style type="text/css">
                .paragraph{
                    color:#FF0000;
                }
            </style>
        </head>
        <body>
            <p class="paragraph">第一个段落。</p>
            <p>第二个段落。</p>
        </body>
    </html>

       eq(index|-index)

    概述

        获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1为倒数第一个

    参数

        index  一个整数,指示元素基于0的位置,这个元素的位置是从0算起;-index  一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(-1算起)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("p").eq(0).css("color","#FF0000");
                    $("p").eq(1).css("color","#0000FF");
                    $("p").eq(-1).css("color","#FF0000");
                });
            </script>
        </head>
        <body>
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <p>第三个段落。</p>
        </body>
    </html>
  • 相关阅读:
    sql server 2008 安装过程与创建建sql server登录用户
    Angularjs之controller 和filter(四)
    Angularjs之表单实例(三)
    antlr应用
    antlr4笔记(转)
    go升级版本
    go安装依赖包
    tsar
    java纤程
    HighLevelRestApi管理ES
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10078122.html
Copyright © 2020-2023  润新知