jQuery选择器——jQuery 元素筛选-白红宇

jQuery选择器——jQuery 元素筛选

阅读量：3965 次

发布时间：2019-05-24

本文共 3243 字，大约阅读时间需要 10 分钟。

eq() 获取给定索引的元素功能跟 :eq() 一样

first() 获取第一个元素功能跟 :first 一样

last() 获取最后一个元素功能跟 :last 一样

filter(exp) 留下匹配的元素

is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true

has(exp) 返回包含有匹配选择器的元素的元素功能跟 :has 一样

not(exp) 删除匹配选择器的元素功能跟 :not 一样

children(exp) 返回匹配给定选择器的子元素功能跟 parent>child 一样

find(exp) 返回匹配给定选择器的后代元素功能跟 ancestor descendant 一样

next() 返回当前元素的下一个兄弟元素功能跟 prev+next 功能一样

nextAll() 返回当前元素后面所有的兄弟元素功能跟 prev~siblings 功能一样

nextUntil() 返回当前元素到指定匹配的元素为止的后面元素

parent() 返回父元素

prev(exp) 返回当前元素的上一个兄弟元素

prevAll() 返回当前元素前面所有的兄弟元素

prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素

siblings(exp) 返回所有兄弟元素

add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

//(1)eq()  择索引值为等于 3 的 div 元素		$("#btn1").click(function(){
   			$("div").eq(3).css("background-color","#bfa");		});		//(2)first()择第一个 div 元素		 $("#btn2").click(function(){
   			 //first()   取第一个元素			$("div").first().css("background-color","#bfa");		});		//(3)last()择最后一个 div 元素		$("#btn3").click(function(){
   			//last()  取最后一个元素			$("div").last().css("background-color","#bfa");		});		//(4)filter()在div中择索引为偶数的		$("#btn4").click(function(){
   			//filter()  过滤   传入的是选择器字符串			$("div").filter(":even").css("background-color","#bfa");		});		 //(5)is()判断#one是否为:empty或:parent		//is用来检测jq对象是否符合指定的择器		$("#btn5").click(function(){
   			alert($("#one").is(":empty"));		});				//(6)has()择div中包含.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()在body中择所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为two的元素		$("#btn18").click(function(){
   			$("span").add("#two").css("background-color","#bfa");		});			});