1：find筛选 例题为筛选加样式 <body> <div>111</div> <span>222</span> <p>333</p> <div id="test"> <div class="green">4444</div> <div class="green">6666</div> <span>5555</span> <span class="green">9999</span> </div> <div class="green">7777</div> <script type="text/javascript"> $(function(){ /*$("body").find("div").each(function(){ alert($(this).html()); });*/ //$("p,div,.green").css("background","green"); //$(".green","#test") ==$("#test").find(".green"); //$("#test .tm") var spanHtml = $("#test").find(".tm").html(); var length = $("#test .green span").length; $("#test .green").css("background","red"); }); </script> </body>
2：first last eq筛选 <body> <div>11</div> <div>22</div> <div>33</div> <span>44</span> <script type="text/javascript"> $(function(){ //:first :last alert("方式:first："+$("div:first").html()); alert("方式:last："+$("div:last").html()); //first() last() alert("方式:first()："+$("div").first().html()); alert("方式:last()："+$("div").last().html()); //eq alert("方式:eq()："+$("div").eq(0).html()); alert("方式:eq()："+$("div").eq(2).html()); //:eq alert("方式:eq："+$("div:eq(0)").html()); alert("方式:eq："+$("div:eq(2)").html()); }); </script> </body>
3：删除 及parents() closest()的比较 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <title>Document</title> <style> .gfather{640px;height:100px;border:1px solid red;margin-top:5px;} </style> </head> <body> <div class="gggather"> <div class="gfather"> <div id="father" class="father">22父亲 <span id="span">1111</span> <span>222</span> <p>333</p> <a href="javascript:void(0)" onclick="tm_delete(this)">删除</a> </div> </div> <div class="gfather"> <div id="father" class="father">22父亲 <span id="span">1111</span> <span>222</span> <p>333</p> <a href="javascript:void(0)" onclick="tm_delete(this)">删除</a> </div> </div> <div class="gfather"> <div id="father" class="father">22父亲 <span id="span">1111</span> <span>222</span> <p>333</p> <a href="javascript:void(0)" onclick="tm_delete(this)">删除</a> </div> </div> </div> <script type="text/javascript"> function tm_delete(obj){ var $this = $(obj); $this.parents(".gfather").fadeOut("slow",function(){ $(this).remove(); }); } $(function(){ //parent() children() /* var f = $("#span").parent().attr("class"); var cs = $("#father").children(); alert("在当前元素下有:"+cs.length+"子元素"); cs.each(function(i){ alert("第"+(++i)+"个元素的【"+$(this).context.tagName+"】的值是："+$(this).text()); }); */ //parents() closest(); //如果parents()没有指明范围，那么它就等同于parent(); //parents();从当前元素往上查找，找到最近的一个就返回 //closest(obj) var f = $("#span").parents(".father"); alert(f.html()); var cf = $("#span").closest(".father"); alert(cf.html());*/ }); </script> </body>
4：选项卡 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style> *{margin:0px;padding:0px;} #box{list-style:none;border:1px solid #ccc;100%;} li{list-style:none;list-style-image:none;} #box li{border-bottom:1px solid #ccc;75px;height:35px;padding:3px;float:left;cursor:pointer;} .active{background:red;} </style> </head> <body> <div style="border:1px solid red;486px;padding:5px;margin:10px auto;"> <ul id="box"> <li tab="#div1" class="active"><div>111111</div></li> <li tab="#div2"><div>222</div></li> <li tab="#div3"><div>3333</div></li> <li tab="#div4"><div>444</div></li> <li tab="#div5"><div>555</div></li> <li tab="#div6"><div>666</div></li> </ul> <div id="tabboxs"> <div id="div1">1111111</div> <div id="div2" style="display:none;">2222222</div> <div id="div3" style="display:none;">3333311111</div> <div id="div4" style="display:none;">4444444444</div> <div id="div5" style="display:none;">5555555555</div> <div id="div6" style="display:none;">6666666666</div> </div> </div> <script type="text/javascript"> $(function(){ //siblings() = prevAll() + nextAll() //$("#text").siblings().css("background","red"); //第一种方式 /*$("#box li").on("click",function(){ var index = $(this).index(); $(this).addClass("active") $(this).siblings().removeClass("active"); $("#tabboxs").find("div").eq(index).show(); $("#tabboxs").find("div").eq(index).show().siblings().hide(); });*/ //第二种方式 $("#box li").on("click",function(){ var tab = $(this).attr("tab"); $(this).addClass("active").siblings().removeClass("active"); $(tab).show().siblings().hide(); }); }); </script> </body>
5：filter筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>//jquery-1.11.1.min.js可在jquery.com上下载 <body> <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> <script type="text/javascript"> // attr prop html val text //find parent next is hasClass //hasClass("selected") //filter/is(className) $("p").filter(".selected").css("background","red"); $("p").filter(".selected , :first").css("background","red"); </script> </body>
6:is筛选 是根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> </head> <body> <div>1</div> <div>2</div> <div id="target">3</div> <div class="tmclass tm11">4</div> <div class="tmclass tm22">5</div> <div class="tmclass tm33">5</div> <div>6</div> <input type="text"> <label><input type="radio" id="male" name="male" value="1">男</label> <label><input type="radio" name="male" checked="checked" value="2">女</label> <label><input type="radio" name="male" value="3">保密</label> <div id="divbox"> <span class="span"></span> <span id="span" class="span"></span> <span class="span"></span> </div> <ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> </ul> <script type="text/javascript"> //hasClass():判断一个元素是否包含class //is(expression|object|function|elements) :选择器 //filter() //contents() //not() //筛选 $(function(){ //$(".tm22").css("background","red"); $(".tmclass").each(function(){ /*if($(this).hasClass("tm22")){ $(this).css("background","red"); }else{ $(this).css("background","green"); }*/ }); /* $("input").each(function(){ if($(this).is(":text")){ $(this).val("1111111111111111"); } }) $("input[type='radio'][name='male']").each(function(){ //if($(this).is(":checked")){ if($(this).prop("checked")){//prop判断是否选中 alert("您当前选中的值是:"+$(this).val()); } });*/ //var flag = $("#male").is("input"); //alert(flag); //var flag = $("#divbox").children().is("span"); //alert(flag); $("li").on("click",function(){ var flag = $(this).is(function(){ //return $(this).index()==1; return $("strong",this).length===2; }); if(flag){ $(this).css("background","green"); }else{ $(this).css("background","red"); } }) }); </script> </body>
7：content 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 ///在content.html中 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> </head> <body> <div id="parent">我是一个父亲窗口!</div> <iframe id="frame1" name="framename" src="children.html" width="690" height="420" scrolling="auto" style="border:1px solid #bbb;"></iframe><!--主要作用将主业务与副业务区分--> <input type="button" onclick="tm_click()" value="我想要调用iframe里面的事件"/> <script type="text/javascript"> $(function(){ //contents(); }); function getIframeObj(id){ return document.getElementById(id).contentWindow;//一切对象都要在document下面 } function tm_click(){ var iframeDom = getIframeObj("frame1"); /* //var iframeDom = document.frames["framename"].contentWindow; //事件能够调用 iframeDom.tm_children(); //javascript获取iframe元素内容 var html = iframeDom.document.getElementById("box").innerHTML;//一切对象都要在document下面 alert(html); //javascript转换成jquery对象的写法 var $html = $(iframeDom.document).find("#box").html(); alert($html); */ //contents(); var $iframe = $("#frame1").contents();//==$(iframeDom.document) var boxHtml = $iframe.find("#box").html(); alert(boxHtml); } function tm_parent(){ alert("您调用了父窗口的方法哦!"); } </script> </body> /////在children.html中 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> </head> <body> <div id="box">我是一个子类的页面哦!同学们好好听课!</div> <input type="button" onclick="tm_click()" value="我想要调用父窗体的事件"/> <script type="text/javascript"> function tm_children(){ alert("我是一个子类的页面哦!好好学习!"); } function tm_click(){ parent.tm_parent(); //javascript写法 //var phtml = parent.document.getElementById("parent").innerHTML; //alert(phtml); //jquery写法 var phtml = $(parent.document).find("#parent").html(); alert(phtml); } </script> </body>