6、jQuery元素筛选
eq()
获取给定索引的元素
功能跟:eq()一样
first()
获取第一个元素
功能跟:first一样
last()
获取最后一个元素
功能跟:last一样
flter(exp)
留下匹配的元素
is()
判断是否匹配给定的选择器,只要有一个匹配就返回,true
has(exp)
返回包含有匹配选择器的元素的元素
功能跟:has一样
not(exp)
删除匹配选择器的元素
功能跟:not一样
children(exp)
返回匹配给定选择器的子元素
功能跟:parent>child一样
find(exp)
返回匹配给定选择器的后代元素
功能跟:ancestor descendant 一样
next()
返回当前元素的下一个兄弟元素
功能跟prev+next一样
nextAll()
返回当前元素后面所有的兄弟元素
功能跟prev~siblings一样
nextUntil()
返回当前元素到指定匹配的元素为止的后面元素 parent() 返回父元素
parent()
返回父元素
prev(exp)
返回当前元素的上一个兄弟元素
prevAll()
返回当前元素前面所有的兄弟元素
prevUnit(exp)
返回当前元素到指定匹配的元素为止的前面元素
siblings(exp)
返回所有兄弟元素
add(expr|ele|html|obj|[,con])
把add匹配的选择器的元素添加到当前jquery对象中
09元素筛选方法_.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; | height: 55 px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="../script/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { function anmateit() { $("#mover").slideToggle("show", anmateit); } anmateit(); }); $(document).ready(function () { //1.eq()选择索引值为等于3的div元素 $("#btn1").click(function () { $("div").eq(3).css("background-color", "#bbffaa"); ; }); //2.first()选择第一个div元素 $("#btn2").click(function () { $("div").first().css("background-color", "#bbffaa"); }); //3.last()选择最后一个div元素 $("#btn3").click(function () { $("div").last().css("background-color", "#bbffaa"); }); //4.filter()在div选取索引值为偶数的 //filter过滤传入的是选择器字符串 $("#btn4").click(function () { $("div").filter(":even").css("background-color", "#bbffaa"); }); //5.is()判断#one是不是:empty或:parent //is用来检测jq对象是否符号指定选择器 $("#btn5").click(function () { alert($("#one").is(":empty")); }); //(6)has()选择di中包含.mini的 $("#btn6").click(function () { //has(selector)选择器字串 是否包含selector $("div").has(".mini").css("background-color", "#bfa"); }); //(7)not()选择div中class不为one的 $("#btn7").click(function () { //not(selector)选择不是selector的元素 $("div").not('.one').css("background-color", "#bfa"); }); //(8)children()在body中选择所有class为one的div子元素 $("#btn8").click(function () { //children()选出所有的子元素 $("body").children("div.one").css("background-color", "#bfa"); }); //(9)find()在pdy中选择所有class为mini的div元素 $("#btn9").click(function () { //find()选出所有的后代元素 $("body").find("div.mini").css("background-color", "#bfa"); }); //(10)next() #one的下一个div $("#btn10").click(function () { //next()选择下一个兄弟元素 $("#one").next("div").css("background-color", "#bfa"); }); //(11)nextAll() #one后面所有的span元素 $("#btn11").click(function () { //nextAll()选出后面所有的元素 $("#one").nextAll("span").css("background-color", "#bfa"); }); //(12)nextUntil() #one和span之间的元案 $("#btn12").click(function () { $("#one").nextUntil("span").css("background-color", "#bfa") }); //(13)parent().mini的父元素 $("#btn13").click(function () { $(".mini").parent().css("background-color", "#bfa"); }); //(14)prev()#two的上一个div $("#btn14").click(function () { //prev() $("#two").prev("div").css("background-color", "#bfa") }); //(15)prevAll() span前面所有的div $("#btn15").click(function () { //prevAll()选出前面所有的元素 $("span").prevAll("div").css("background-color", "#bfa") }); //(16)prevUntil() span向前直到one的元素 $("#btn16").click(function () { //prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止 $("span").prevUntil("#one").css("background-color", "#bfa"); }); //(17)siblings()#two的所有兄弟元素 $("#btn17").click(function () { //siblings()找到所有的兄弟元素,包括前面的和后面的 $("#two").siblings().css("background-color","#bfa") }); //(18)add()选择所有的span元素和id为wo的元素 $("#btn18").click(function() { // $("span,#two,.mini,#one") $("span").add("#two").css("background-color", "#bfa"); }); }); </script> </head> <body> <!-- <div> 筛选 过滤 eq(index|-index) first() last() hasClass(class) filter(expr|obj|ele|fn) is(expr|obj|ele |fn) map(callback) has(expr|ele) not(expr|ele|fn) slice(start,[end]) 查找 children([expr]) closest(expr, [con]|obj|ele) find(expr|obj|ele) next([expr]) nextAll([expr]) nextUntil[exp|ele][,fil])] offsetParent() parent([expr) parents([expr]) parentsUntil([exp|ele]L,f]) prev([expr]) prevail([expr) prevUntil([exp|ele][,fil]) siblings([expr] 串联 add(expr|ele|html|obj|[,con]) </div> --> <input type="button" value="eq()选择索引值为等于3的div元素" id="btn1"/> <input type="button" value="first()选择第一个div元素" id="btn2"/> <input type="button" value="last()选择最后一个div元素" id="btn3"/> <input type="button" value="filter()在div选取索引值为偶数的" id="btn4"/> <input type="button" value="is()判断#one是不是:empty或:parent" id="btn5"/> <input type="button" value="has()选择di中包含.mini的" id="btn6"/> <input type="button" value="not()选择div中class不为one的" id="btn7"/> <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8"/> <input type="button" value="find()在pdy中选择所有class为mini的div元素" id="btn9"/> <input type="button" value="next() #one的下一个div" id="btn10"/> <input type="button" value="nextAll() #one后面所有的span元素" id="btn11"/> <input type="button" value="nextUntil() #one和span之间的元案" id="btn12"/> <input type="button" value="parent().mini的父元素" id="btn13"/> <input type="button" value="prev()#two的上一个div" id="btn14"/> <input type="button" value="prevAll() span前面所有的div" id="btn15"/> <input type="button" value="prevUntil() span向前直到one的元素" id="btn16"/> <input type="button" value="siblings()#two的所有兄弟元素" id="btn17"/> <input type="button" value="add()选择所有的span元素和id为wo的元素" id="btn18"/> <br> <h3>基本选择器.</h3> <div class="one" id="one"> id为one,class 为one的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <span>^^span元素111^^</span> <div class="hide">class为"hide"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div <input type="hidden" size="8"> </div> <span>^^span元素222^^</span> <div id="mover"> 正在执行动画的div元素 </div> </body> </html>
------------------------------正文分割线----------------------------------
如何隐晦的救出所有人4
上期答案:
假设监狱内有三名囚犯:1号、2号和3号,他们各自都看到两个是绿色眼睛的人,但不确定另外两个人是不是也看到一个或两个绿色眼睛的人,他们第一天和之前一样等待。但到了第二天,他们还是不确定。1号想,如果我没有绿色眼睛,2号和3号只是看对方,那么他们在第二天晚上就会离开,他意识到2号和3号应该也在思考同样的问题,然后第三天晚上,他们三个人都便离开了。
用这种归纳性推理的方法,我们能看到这种模式会一直循环重复。不论犯人的数量有多少都可以进行推理。这个监狱的规则就在于大家都能获取到的新知识都在每个人的行动中。现在所有的囚犯都知道,每个犯人除了知道他们中至少有一人是绿色眼睛,也知道其他人都在观察并记录所有绿色眼睛的人。而且每个人都是数学家,都能得到同样的想法,虽然每个囚犯不知道自己是不是绿色的眼睛,但经过和囚犯同等数量的天数之后,他们就能确定自己是否是绿色的眼睛。
但如果你告诉他们至少有99个人拥有绿色眼睛,那么这100名数学家,第几天会全部离开呢?
来源于网络