find jquery 控件id jquery find name

问题

• 1.表单对象属性过滤器
• 2.jQuery 元素筛选
• 3.选择索引值为等于 3 的 div 元素
• 4.选择第一个 div 元素
• 5.选择最后一个 div 元素
• 6.在div中选择索引为偶数的
• 7.判断#one是否为:empty或:parent
• 8.选择div中包含.mini的
• 9.选择div中class不为one的
• 10.在body中选择所有class为one的div子元素
• 11.在body中选择所有class为mini的div元素
• 12.#one的下一个div
• 13.#one后面所有的span元素
• 14.#one和span之间的元素
• 15..mini的父元素
• 16.#two的上一个div
• 17.span前面所有的div
• 18.span向前直到#one的元素
• 19. #two的所有兄弟元素
• 20.选择所有的 span 元素和id为two的元素

1.表单对象属性过滤器

:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的单选， 复选， 和下拉列表中选中的 option 标签对象
:selected 匹配所有选中的 option

2.jQuery 元素筛选

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 对象中

3.选择索引值为等于 3 的 div 元素

$("#btn1").click(function(){
 $("div").eq(3).css("background-color","#bfa");
});

4.选择第一个 div 元素

$("#btn2").click(function(){
 //first()   选取第一个元素
 $("div").first().css("background-color","#bfa");
});

5.选择最后一个 div 元素

$("#btn3").click(function(){
 //last()  选取最后一个元素
 $("div").last().css("background-color","#bfa");
});

6.在div中选择索引为偶数的

$("#btn4").click(function(){
 //filter()  过滤   传入的是选择器字符串
 $("div").filter(":even").css("background-color","#bfa");
});

7.判断#one是否为:empty或:parent

//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
 alert( $("#one").is(":empty") );
});

8.选择div中包含.mini的

$("#btn6").click(function(){
 //has(selector)  选择器字符串    是否包含selector
 $("div").has(".mini").css("background-color","#bfa");
});

9.选择div中class不为one的

$("#btn7").click(function(){
 //not(selector)  选择不是selector的元素
 $("div").not('.one').css("background-color","#bfa");
});

10.在body中选择所有class为one的div子元素

$("#btn8").click(function(){
 //children()  选出所有的子元素
 $("body").children("div.one").css("background-color","#bfa");
});

11.在body中选择所有class为mini的div元素

$("#btn9").click(function(){
 //find()  选出所有的后代元素
 $("body").find("div.mini").css("background-color","#bfa");
});

12.#one的下一个div

$("#btn10").click(function(){
 //next()  选择下一个兄弟元素
 $("#one").next("div").css("background-color","#bfa");
});

13.#one后面所有的span元素

$("#btn11").click(function(){
 //nextAll()   选出后面所有的元素
 $("#one").nextAll("span").css("background-color","#bfa");
});

14.#one和span之间的元素

$("#btn12").click(function(){
 $("#one").nextUntil("span").css("background-color","#bfa")
});

15…mini的父元素

$("#btn13").click(function(){
 $(".mini").parent().css("background-color","#bfa");
});

16.#two的上一个div

$("#btn14").click(function(){
 $("#two").prev("div").css("background-color","#bfa")
});

17.span前面所有的div

$("#btn15").click(function(){
 //prevAll()   选出前面所有的元素
 $("span").prevAll("div").css("background-color","#bfa")
});

18.span向前直到#one的元素

$("#btn16").click(function(){
 //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
 $("span").prevUntil("#one").css("background-color","#bfa")
});

19. #two的所有兄弟元素

$("#btn17").click(function(){
 //siblings()    找到所有的兄弟元素，包括前面的和后面的
 $("#two").siblings().css("background-color","#bfa")
});

20.选择所有的 span 元素和id为two的元素

$("#btn18").click(function(){
 //$("span,#two,.mini,#one")
 $("span").add("#two").css("background-color","#bfa");
});