选择器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>