首页 > 代码库 > 第十八节（选择器）
第十八节（选择器）
选择器1：javascript跟jquery的一些比较输出：<body> <a href=http://www.mamicode.com/"">xxx</a> <a href=http://www.mamicode.com/"">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=http://www.mamicode.com/"ddddd"> <input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Hot Fuzz" /> <input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Cold Fusion" /> <input type="checkbox" name="accept" value=http://www.mamicode.com/"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 = http://www.mamicode.com/document.getElementById("username").value; //alert("用户名的值是:"+value); //val()--->针对于form元素 text password select raido checkbox textarea var $value = http://www.mamicode.com/$("#username").val(); //alert($value); //class 选择器 var length = $(".tm-test").length; //alert("含有相同class=tm-test的div的数量是:"+length); var value = http://www.mamicode.com/$(".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=http://www.mamicode.com/"单晨"> <input type="text" name="cusername" username="zhaolong" value=http://www.mamicode.com/"K小龙"> <input type="text" name="username" kid="kid" value=http://www.mamicode.com/"KID"> <script type="text/javascript"> $(function(){ //var value = http://www.mamicode.com/$("input[name=‘username‘][opid=‘shanchen‘]").val(); //var value = http://www.mamicode.com/$("input[opid]").val(); //var value =http://www.mamicode.com/$("#username").val(); //var value = http://www.mamicode.com/$("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=http://www.mamicode.com/"1"/> <input type="radio" name="c" value=http://www.mamicode.com/"2"/> <input type="radio" name="c" value=http://www.mamicode.com/"3"/> <input type="checkbox" name="t" checked="checked" value=http://www.mamicode.com/"音乐"/> <input type="checkbox" name="t" value=http://www.mamicode.com/"电影"/> <input type="checkbox" name="t" checked="checked" value=http://www.mamicode.com/"游泳"/> <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 = http://www.mamicode.com/$("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>
第十八节（选择器）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。