第二章.jquery选择器

第二章 jQuery选择器
    1.基本选择器
            #id             $("#one")选择 id为 one 的元素
        .class         $(".mini")选择 class 为 mini 的所有元素
        element    $("p")选择元素名是 p 的所有元素
               *                           $("*")选择所有的元素 
              s1,s2   $("span,#two")选择所有的span元素和id为two的div元素


     2.层次选择器
         $("body div") 选择 body内的所有div元素.
          $("body > div") 在body内选择元素名是div的第一级子元素.


         $(".one + div") 选择 所有class为one 的紧接着的下一个div元素.
         $("#two ~ div") 选择 id为two的元素后面的所有div兄弟元素.
         补充:$(".one + div")可用$(".one").next("div")代替
         补充:$("#two ~ div")可用$("#two").nextAll("div")代替


     3.过滤选择器
           3.1位置过滤选择器     【大小等动画始终不是奇偶】
                :first   $('div:first')选择所有div中的第一个div元素
                :last  $('div:last')选择所有div中的最后一个div元素.
                :not(se)  $('div:not(.one)')选择class不为one的所有div元素.
                :even  $('div:even')选择 索引值为偶数 的div元素。
                :odd   $('div:odd')选择 索引值为奇数 的div元素。
                :eq(n)  $('div:eq(3)')选择索引等于 3 的div元素
                :gt(n)  $('div:gt(3)')选择索引大于 3 的div元素
                :lt(n)  $('div:lt(3)')选择索引小于 3 的div元素
                :header  $(':header')选择 所有的标题元素.比如h1, h2, h3等等...
                :animated  $(':animated')选择 当前正在执行动画的所有元素.
         3.2内容过滤选择器         【内容包含空有子】
               :contains(text)  $('div:contains(di)')选取含有文本"di"的div元素.
               :empty  $('div:empty')选取不包含子元素(或者文本元素)的div空元素.
               :has(se)  $('div:has(.mini)')选取含有class为mini元素 的div元素.
              :parent   $('div:parent')选取含有子元素(或者文本元素)的div元素.
         3.3可见性过滤器              【可见不可见】
              :hidden   $(":hidden")选取所有不可见的元素.包括<input type="hidden"/>.
              :visible  $('div:visible')选取所有可见的div元素.
         3.4属性过滤器                      【属性有等不等 始终含有复合】
              [att]  $('div[title]')选取含有属性title 的div元素.
              [att=val]  $('div[title=test]')选取属性title值等于test的div元素.
              [att!=val]  $('div[title!=test]')选取属性title值不等于test 的div元素.
              [att^=val]  $('div[title^=te]')选取属性title值 以 te 开始 的div元素.
              [att$=val]  $("div[title$=est]")选取属性title值 以 est 结束 的div元素.
              [att*=val]  $("div[title*=es]")选取属性title值 含有 es  的div元素.
              [se1][se2]  $("div[id][title*=es]")组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素.
         3.5子元素过滤选择器         【子元素第几始终有一个】
             :nth-child(n)  $('div.one :nth-child(2)')选取每个父元素下的第2个子元素
             :first-child  $('div.one :first-child')选取每个父元素下的第一个子元素
             :last-child  $('div.one :last-child')选取每个父元素下的最后一个子元素
             :only-child  $('div.one :only-child')如果父元素下的仅仅只有一个子元素,那么选中这个子元素
          3.6表单属性选择器            【表单属性可用不可用选中】
             :enabled  $("#form1 input:enabled")选择表单内 可用input元素
             :disabled  $("#form1 input:disabled")选择表单内 不可用input元素.
             :checked  $("input:checked") 选择所有被选中的input元素
             :selected  $("select :selected")选择所有被选中的选项元素


    4.表单选择器             【针对type】
        :text  $("#form1 :text")选取所有的单行文本框
        :password  $("#form1 :password")选取所有的密码框
        :radio  $("#form1 :radio")选取所有的单选框
        :checkbox  $("#form1 :checkbox")选取所有的复选框
        :submit  $("#form1 :submit")选取所有的提交按钮
        :image  $("#form1 :image")选取所有的图像按钮
        :reset  $("#form1 :reset")选取所有的重置按钮
        :button  $("#form1 :button")选取所有的按钮
        :file  $("#form1 :file")选取所有的上传域
        :hidden  $("#form1 :hidden")选取所有的不可见元素
        :input  $("#form1 :input")选取所有的元素,上面所有

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)查找id号为tigerLily的元素 (2)查找拥有类myList的元素 (3)查找所有的input元素 (4)查找所有img元素和tr元素 (5)查找id号为coffeePot和id号为someDiv的元素 (6)选择具有id属性的所有元素 (7)选择具有id属性的input元素 (8)选择其value属性等于A的元素 (9)选择其value属性等于A或等于C的元素 (10)选择其title属性值中含有dog的img元素 (11)选择其href属性值以http开头的a元素 (12)选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (13)选择元素li,该元素作为拥有myList类的ul元素的直接子元素 (14)选择id号为radioA的input元素后面的第一个input兄弟元素 (15)选择id号为radioA的input元素后面的所有input兄弟元素 (16)选择dom sample页面中第3个tr元素 (17)选择其type属性值checkbox且索引为偶数的input元素 (18)选择非最后一行的tr元素 (19)选择所有的checkbox元素 (20)选择所有被选中的表单元素 (21)选择含有1972的td元素 (22)选择包含有sapn元素的div元素 (23)选择表格中每行的第一个单元格和最后一个单元格 (24)选择表格中第3行,标题行不算(要求用nth-child()过滤) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)将拥有alt属性的倒数第二个图片元素应用yellow类 (2)将第一个checkbox表单元素应用.green样式 (3)求id值为checkbox3的元素在所有表单元素里的顺序号 (4)用一条链式语句完成:先对所有img元素应用seeThrough样式,再为所有img元素和tr元素应用yellow样式 (5)用filter方法实现:选择单元格内容为Java或Smalltalk的单元格 (6)取图片集中的第2,3,4张图片 (7)用has方法实现:选择那些包含有ul元素的li元素 (8)将tbody每个单元格里的文字设为:我爱jQuery (9)查找form元素的后代元素中标签为label的元素 (10)查找表单元素中是否有id值为checkbox5的元素 提示: 为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值