第十八节（选择器） 







选择器1：javascript跟jquery的一些比较输出：
<body>
 <a href="">xxx</a>    
 <a href="">xxxxxx</a>    
 <div id="test">1111</div>
 <div class="tm-test">2222</div>
 <div class="tm-test">3333</div>
 <div class="tm-test">4444</div>
 <div class="test2">5555</div>
 <input type="text" id="username" name="sex" value="ddddd">


 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
 <input type="checkbox" name="newsletter" value="Cold Fusion" />
 <input type="checkbox" name="accept" value="Evil Plans" />

 <script type="text/javascript">
    $(function(){
        //jquery本身并不是一门语言。他就是对javascript语言的封装。
        //id:唯一标识符
        //格式:$() == jquery格式
        /*
            如果:id选择器:$("#id");class选择器:$(".className");
            document.getElementById("test")//javascript
            $("#test")//jquery
        */
        var html = document.getElementById("test").innerHTML;
        var $html = $("#test").html();
        var value = document.getElementById("username").value;
        //alert("用户名的值是:"+value);
        //val()--->针对于form元素 text password select raido checkbox textarea 
        var $value = $("#username").val();
        //alert($value);
        


        //class 选择器
        var length  =  $(".tm-test").length;
        //alert("含有相同class=tm-test的div的数量是:"+length);
        var value = $(".tm-test").html();
        //如果获取所有相同class的值
        //$(".tm-test").each(function(){
        //    alert($(this).html());
        //});    
        
        
        //元素选择器
        alert($("div").length);
        alert($("a").length);

        //获取所有的元素选择器
        $("body").find("*").attr("xxx","xxxx");
        //快速选择器
        $("input[name='newsletter']").attr("checked",true);
        
    });
        


    //$(document).ready(function(){
    //    alert(3);
    //});
  </script>
 </body>






2：以某字目开头的选择器

 <body>
    <input type="text" name="username" id="username" opid="shanchen" value="单晨">
    <input type="text" name="cusername" username="zhaolong" value="K小龙">
    <input type="text" name="username" kid="kid" value="KID">

    <script type="text/javascript">
        $(function(){
            //var value = $("input[name='username'][opid='shanchen']").val();
            //var value = $("input[opid]").val();
            //var value =$("#username").val();
            //var value = $("input[name='username']").eq(0).val();
            //alert(value);

            //知识点：[attribute!=value] 不等于某个元素的其他元素
            //var length = $("input[name!='cusername']").length;
            //$("input[name!='cusername']").each(function(){
            //    alert($(this).val());
            //});

            //知识点:[attribute^=value] 以什么开头的元素
            //$("input[value^='K']").each(function(){
            //    alert($(this).val());    
            //});


    
            //知识点:[attribute$=value] 以什么开头的元素
            $("input[value$='D']").each(function(){
                alert($(this).val());    
            });

            var length = $("input[name*='cu']").length;
            alert(length);
            
        });
    </script>
 </body>






3：选择器改变样式

 <body>
    <div class="tm_background"></div>
    <div class="tm_background"></div>
    <div class="tm_background"></div>
    <div class="tm_background"></div>
    <div class="tm_background"></div>
    <div class="tm_background"></div>
    <div class="tm_background"></div>
    <div class="tm_background"></div>

    <script type="text/javascript">
        $(function(){
            //:even:单行 :odd:双行
            $(".tm_background:odd").addClass("red");
            $(".tm_background:even").addClass("green");
            
            $(".tm_background").hover(function(){
                $(this).removeClass("red").removeClass("green").addClass("f1414");
            },function(){
                $(".tm_background").removeClass("f1414");
                $(".tm_background:odd").addClass("red");
                $(".tm_background:even").addClass("green");
            });
        });
    </script>
 </body>






4：选择器获取值
<body>
    <select>
        <option selected="selected">11</option>
        <option>22</option>
    </select>
    <input type="radio" name="c" checked="checked" value="1"/>
    <input type="radio" name="c"  value="2"/>
    <input type="radio" name="c" value="3"/>
    <input type="checkbox" name="t" checked="checked" value="音乐"/>
    <input type="checkbox" name="t" value="电影"/>
    <input type="checkbox" name="t" checked="checked" value="游泳"/>
    <input type="text"/>
    <textarea></textarea>
    <script type="text/javascript">
        $(function(){
            //selected:option
            //checked radio checkbox
            //:checked :selected :input :text :even :odd :radio :checkbox
            var radioValue = $("input[type='radio'][name='c']:checked").val();
            alert(radioValue);
            var arr = [];
            $("input[type='checkbox'][name='t']:checked").each(function(){
                arr.push($(this).val());
            })
            alert(arr.toString());
            //:input  匹配所有 input, textarea, select 和 button 元素

            alert($(":checkbox").length);
        });
    </script>
 </body>




 






		

		
posted @ 
2015-02-02 11:19 
哥的笑百度不到 
阅读(213) 
评论(0) 
 
收藏 
举报