3

DOM对象转化成jQuery对象

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

<!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")

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

<!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" )

类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选

<!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>

全选择器(*选择器)

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

<!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>

布still
461 声望32 粉丝

数据挖掘、用户行为研究、用户画像