JQuery笔记6: JQuery过滤选择器

除了前面的选择器外,JQuery还有过滤选择器。

基本过滤选择器:
(1) :first  选取第一个元素。
 $("div:first") 选取第一个



(2):last  选取最后一个元素。
 $("div:last") 选取最后一个


(3) :not( 选择器 )  选取不满足 “ 选择器 ” 条件的元素:
$("input:not(.myClass)") 选取样式名不是 myClass 的

(4) :even 、 :odd ,选取索引是奇数、偶数的元素:
 $("input:even") 选取索引是奇数的
(5) :eq( 索引序号 ) 、 :gt( 索引序号 ) 、 :lt( 索引序号 )   选取索引等于、大于、小于索引序号的元素:
 $("input:lt(5)") 选取索引小于 5 的
(6) $(":header") 选取所有的 h1 …… h6 元素( 很少用)
(7) $("div:animated") 选取正在执行动画的
元素。   ( 很少用 )

案例:
 成绩表:第一行是表头,所以显示大字体( fontSize=30 ),最后一行是汇总,所以显示红色字体。正文的前三行是前三名,所以显示大的字体( 28 )表格的奇数行是黄色背景。



    
    
    


   
姓名成绩
Tom100
hengheng100
miemie100
jim96
haha92
平均分96


相对定位:不仅可以使用选择器进行进行绝对定位,还可以进行相对定位,

只要在 $() 指定第二个参数,第二个参数为相对的元素 .  $("ul", $(this)).css("background", "red");



    
    
    


    
        
                
  • 是大家看法是的浪费
  •             
  • 上的防伪日
  •             
  • 问问
  •         
    
    
        
                
  • 上的防伪
  •             
  • 所答非所问而非
  •             
  • 是得分为二
  •         
    


相对定位案例:修改点击行的所有 td 的背景色



    
    
    


dddd
dddd
dddd



属性过滤选择器:
(1) $("div[id]") 选取有 id 属性的

(2)$("div[title=test]") 选取 title 属性为 “ test ” 的
,相当于getElementsByName 。 JQuery 中没有对getElementsByName 进行封装,用 $("input[name=abc]")
(3) $("div[title!=test]") 选取 title 属性不为 “ test ” 的

(4) 还可以选择开头、结束、包含等,条件还可以复合。( * )



    
    
    

南京
北京
上海
杭州




 表单对象选择器(过滤器):
(1) $("#form1:enabled") 选取 id 为 form1 的表单内所有启用的元素
(2) $("#form1:disabled") 选取 id 为 form1 的表单内所有禁用的元素
(3) $("input:checked") 选取所有选中的元素( Radio 、 CheckBox )
(4) $("select:selected") 选取所有选中的选项元素(下拉列表)

� 练习:图片版评分控件
� 练习:单选超链接

你可能感兴趣的:(JQuery)