jQuery 对象、基本选择器、筛选选择器

时间  2019-11-15
标签 jquery 对象 基本 选择器 筛选 栏目 JQuery 繁體版
原文   原文链接

DOM对象转化成jQuery对象

若是传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象javascript

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<script type="text/javascript">
    var div = document.getElementsByTagName('div'); //dom对象         
    //将dom节点div转化为$div的jquery对象
    $div = $(div);          
    var $first = $div.first(); //找到第一个div元素
    $first.css('color', 'red'); //给第一个元素设置颜色
</script>
</body>
</html>

jQuery基本选择器

id选择器

id选择器：一个用来查找的ID，即元素的id属性：$("#id")css

注：id是惟一的，每一个id值在一个页面中只能使用一次。若是多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不该该发生;有超过一个元素的页面使用相同的id是无效的html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>   
     <div id="aaron">
        <p>id="aaron"</p>
        <p>选中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery未选中</p>
    </div>
    <script type="text/javascript">
       //经过原生方法处理
        var div = document.getElementById('aaron');
        div.style.border = "3px solid blue";
    </script>
    <script type="text/javascript">
        //经过jQuery直接传入id
        //id的惟一，只选择到了第一个匹配的id为imooc的div节点
        $("#aaron").css("border", "3px solid red");
    </script>
</body>
</html>

类选择器

类选择器，经过class样式类名来获取节点：$( ".class" )java

类选择器，相对id选择器来讲，效率相对会低一点，可是优点就是能够多选jquery

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>

    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
        //经过原生方法处理
        //样式是能够多选的，因此获得的是一个合集
        //须要经过循环给合集中每个元素修改样式
        var divs = document.getElementsByClassName('aaron');
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.border = "3px solid blue";
        }
    </script>

    <script type="text/javascript">
        //经过jQuery直接传入class
        //class选择器能够选择多个元素
        $(".imooc").css("border", "3px solid red");
    </script>


</body>

</html>

元素选择器

元素选择器，根据给定(html)标记名称选择全部的元素：$( "element" )浏览器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
    //经过原生方法处理
    //获取到全部的节点标记名为div的元素
    //给每个div加上蓝色的边框
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "3px solid blue";
    }
    </script>
    <script type="text/javascript">
    //经过jQuery直接传入标签名p
    //标签是能够多个的，因此获得的一样也是一个合集
    $("p").css("border", "3px solid red");
    </script>
</body>

</html>

全选择器（*选择器）

传递*选择器来选中文档页面中的元素：$( " * " )dom

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
        //获取页面中全部的元素
        var elements1 = document.getElementsByTagName('*');
    </script>
    <script type="text/javascript">
        //获取页面中全部的元素
        var elements2 = ?       ;
        //原生与jQuery方法比较
        //===表示数据和类型都相等
        if(elements2.length === elements1.length){
           elements2.css("border","1px solid red");
        }
    </script>
</body>
</html>

层级选择器

选择器中的层级选择器就是用来处理如下关系：函数

子元素 后代元素 兄弟元素 相邻元素

clipboard.png

层级选择器之间的类似点与不一样点：布局

  1. 层级选择器都有一个参考节点
  2. 后代选择器包含子选择器的选择的内容
  3. 通常兄弟选择器包含相邻兄弟选择的内容

  4. 相邻兄弟选择器和通常兄弟选择器所选择到的元素，必须在同一个父元素下测试

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子选择器与后代选择器</h2>
    <div class="left">
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
    </div>
    <div class="right">
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
    </div>

    <script type="text/javascript">
        //子选择器
        //$('div > p') 选择全部div元素里面的子元素P
        $('div > p').css("border", "1px groove red");
    </script>

    <script type="text/javascript">
        //后代选择器
        //$('div  p') 选择全部div元素里面的p元素
        $('div  p').css("border", "1px groove red");
    </script>


    <h2>相邻兄弟选择器与通常兄弟选择器</h2>
    <div class="bottom">
        <div>兄弟节点div, +~选择器不能向前选择</div>
        <span class="prev">选择器span元素</span>
        <div>span后第一个兄弟节点div</div>
        <div>兄弟节点div
            <div class="small">子元素div</div>
        </div>
        <span>兄弟节点span,不可选</span>
        <div>兄弟节点div</div>
    </div>

    <script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $(".prev + div").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
        //通常相邻选择器
        //选取prev后面的全部的div兄弟节点
        $(".prev ~ div").css("border", "3px groove blue");
    </script>

</body>

</html>

jQuery筛选选择器

基本筛选选择器

筛选选择器的用法与CSS中的伪元素类似，选择器用冒号“：”开头，以下是基本筛选器的描述：

clipboard.png

注意事项：

  1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据以前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引

  2. gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一个div
    $(".div:first").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //找到最后一个div
    $(".div:last").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //:even 选择所引值为偶数的元素，从 0 开始计数
    $(".div:even").css("border", "3px groove red");
    </script>
    
    <script type="text/javascript">
    //:odd 选择所引值为奇数的元素，从 0 开始计数
    $(".div:odd").css("border", "3px groove blue");
    </script>
    
    
    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //选择单个
    $(".aaron:eq(2)").css("border", "3px groove blue");
    </script>
http://img.mukewang.com/57cd1df2000146de06020498.jpg    
    <script type="text/javascript">
    //:gt 选择匹配集合中全部索引值大于给定index参数的元素
    $(".aaron:gt(3)").css("border", "3px groove blue");
    </script>
    
     <script type="text/javascript">
    //:lt 选择匹配集合中全部索引值小于给定index参数的元素
    //与:gt相反
    $(".aaron:lt(2)").css("color", "#CD00CD");
    </script>
    
    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其余</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择全部元素去除不匹配给定的选择器的元素
        //选中全部紧接着没有checked属性的input元素后的p元素，赋予颜色
        $("input:not(:checked) + p").css("background-color", "#CD00CD");
    </script>
</body>

</html>

内容筛选选择器

基本筛选选择器针对的都是元素DOM节点，若是要经过内容来过滤，使用内容筛选选择器，其规则体如今它所包含的子元素或者文本内容上，内容过滤器描述以下表：

clipboard.png

注意事项：

  1. :contains与:has都有查找的意思，可是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
    若是:contains匹配的文本包含在元素的子元素中，一样认为是符合条件的。

  2. :parent与:empty是相反的，二者所涉及的子元素，包括文本节点

    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>内容筛选器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>

    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"contains"的元素节点
        //而且设置颜色
        $(".div:cotains(':contains')").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"span"的元素节点
        //而且设置颜色
        $(".div:has(span)").css("color", "blue");
    </script>


    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //选择全部包含子元素或者文本的a元素
       //增长一个蓝色的边框
       $("a:parent").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
       //找到a元素下面的全部空节点(没有子元素)
       //增长一段文本与边框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>

</body>

</html>

可见性筛选选择器

元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden。描述以下：

clipboard.png

:hidden选择器，不只仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

隐藏元素有以下的方法：

  1. CSS display的值是none
  2. type=" hidden "的表单元素
  3. 宽度和高度都显式设置为0
  4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0

若是元素中占据文档中必定的空间,元素被认为是可见的。可见元素的宽度或高度，是大于零。元素的visibility: hidden 或 opacity: 0被认为是可见的，由于他们仍然占用空间布局

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>可见性筛选选择器</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a>
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a>
            <a>height</a>
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a>
            <a>opacity</a>
            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
    </div>

    <p id="show"></p>
    <script type="text/javascript">
        function show (ele) {
            if (ele instanceof jQuery) {
                $("#show").html('元素的长度的 = ' + ele.length)
            } else {
                alert(ele+' 不是jQuery对象')
            }
        }
    </script>


    <script type="text/javascript">
        //查找id = div1的DOM元素,是否可见
        show( $('#div1:visible') );
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否可见
        show( $('#div2:visible') );
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否可见
        show( $('#div3:visible') );
    </script>

    <script type="text/javascript">
        //查找id = div1的DOM元素,是否隐藏
        show( $('#div1:hidden') );
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否隐藏
        show( $('#div2:hidden') );
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否隐藏
        show( $('#div3:hidden') );
    </script>

</body>

</html>

属性筛选选择器

属性选择器能够基于属性来定位一个元素。只需指定该元素的某个属性，那么全部使用该属性且不考虑其属性值的元素都将被定位，也可更加明确并定位在这些属性上使用特定值的元素

clipboard.png

其中，[attr="value"]和[attr*="value"]最为实用：

  • [attr="value"]能定位不一样类型的元素，特别是表单form元素的操做，好比input[type="text"],input[type="checkbox"]等
  • [attr*="value"]能在网站中帮助咱们匹配不一样类型的文件

$(selector)中selector有三种形式:
①字符串：用于元素的选取；②DOM元素：封装Dom元素，提供一系列jquery方法；③function 就是初始化时的$(fn)形式
$("div[data=pmx]")括号里能够是单引号，也能够是双引号。目的是表示$(selector)里面的参数是个字符串。[attribute = value]这种形式中value能够不加引号，若是要加引号，须要参照selector。若是selector是单引号，那么value必须是双引号

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>属性筛选选择器</h2>
    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
    </div>

    <script type="text/javascript">
         //查找全部div中，属性name=p1的div元素
         $("div[name=p1]"]).css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有属性p2的div元素
        $("div[p2]").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有属性name中的值只包含一个连字符“-”的div元素
        $("div[name|='-']").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有属性name中的值包含一个连字符“空”和“a”的div元素
        $("div[name~='a']").css("border", "3px groove #668B8B"); 
    </script>


    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
        <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>
    </div>


    <script type="text/javascript">
         //查找全部div中，属性name的值是用imooc开头的
         $("div[name^='imooc']").css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
         //查找全部div中，属性name的值是用imooc结尾的
         $("div[name$='imooc']").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有属性name中的值包含一个test字符串的div元素
        $("div[name*=test]").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有属性testattr中的值没有包含"true"的div
        $("div[name!=true]").css("border", "3px groove #668B8B"); 
    </script>


</body>

</html>

子元素筛选选择器

子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点

子元素筛选选择器描述表：

clipboard.png

注意事项：

  1. :first只匹配一个单独的元素，可是:first-child选择器能够匹配多个：即为每一个父级元素匹配第一个子元素。这至关于:nth-child(1)
  2. :last 只匹配一个单独的元素， :last-child 选择器能够匹配多个元素：即，为每一个父级元素匹配最后一个子元素
  3. 若是子元素只有一个的话，:first-child与:last-child是同一个
  4. :only-child匹配某个元素是父元素中惟一的子元素，就是说当前子元素是父元素中惟一的元素，则匹配
  5. jQuery实现:nth-child(n)是严格来自CSS规范，因此n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
  6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前日后计算，后者从后往前计算
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子元素筛选选择器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="first-div"下的第一个a元素
        //针对全部父级下的第一个
        $(".first-div a:first-child").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的最后一个a元素
        //针对全部父级下的最后一个
        //若是只有一个元素的话，last也是第一个元素
        $(".first-div a:last-child").css("color", "red");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的只有一个子元素的a元素
        $(".first-div a:only-child").css("color", "blue");
    </script>


    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>第三个元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>第三个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="last-div"下的第二个a元素
        $('.last-div a:nth-child(2)').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="last-div"下的倒数第二个a元素
        $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>

</body>

</html>

表单元素选择器

表单选择器的具体方法描述：

clipboard.png

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style> 
        input{
            display: block;
            margin: 10px;
            padding:10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子元素筛选选择器</h2>
    <h3>input、text、password、radio、checkbox</h3>
    <h3>submit、image、reset、button、file</h3>
    <div class="left first-div">
        <form>
            <input type="text" value="text类型"/>
            <input type="password" value="password"/>
            <input type="radio"/> 
            <input type="checkbox"/>
            <input type="submit" />
            <input type="image" />
            <input type="reset" />
            <input type="button" value="Button" />
            <input type="file" />
        </form>
    </div>

    <script type="text/javascript">
        //查找全部 input, textarea, select 和 button 元素
        //:input 选择器基本上选择全部表单控件
        $(':input').css("border", "1px groove red"); 
    </script>

    <script type="text/javascript">
        //匹配全部input元素中类型为text的input元素
        $('input:text').css("background", "#A2CD5A");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中类型为password的input元素
        $('input:password').css("background", "yellow");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的单选按钮,并选中
        $('input:radio').attr('checked','true');
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的复选按钮,并选中
        $('input:checkbox').attr('checked','true'); 
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的提交的按钮,修改背景颜色
        $('input:submit').css("background", "#C6E2FF");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中的图像类型的元素,修改背景颜色
        $('input:image').css("background", "#F4A460");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中类型为按钮的元素
        $('input:button').css("background", "red");
    </script>

    <script type="text/javascript">
        //匹配全部input元素中类型为file的元素
        $('input:file').css("background", "#CD1076");
    </script>

</body>

</html>
  • 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
  • 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，因此保险起见换用选择器input:checked，确保只会选取<input>元素

特殊选择器this

this，表示当前的上下文对象是一个html对象，能够调用html对象所拥有的属性和方法。$(this),表明的上下文对象是一个jQuery的上下文对象，能够调用jQuery的方法和属性值

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>特殊选择器this</h2>

    <p id="test1">点击测试：经过原生DOM处理</p>
    
    <p id="test2">点击测试：经过原生jQuery处理</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接经过dom的方法改变颜色
            this.style.color = "red"; 
        },false);
    </script>

    <script type="text/javascript">
        $('#test2').click(function(){
            //经过包装成jQuery对象改变颜色
            $(this).css('color','blue');
        })
    </script>

</body>

</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程