• 1. 第二章jQuery选择器
  • 2. CSS选择器回顾选择器语法ID选择器#ID{CSS规则}类选择器.className{CSS规则}分组选择器E1,E2,E3{CSS规则}包含选择器E F{CSS规则}通配符选择器*{CSS规则}
  • 3. jQuery选择器的优势 写法简单 支持CSS1至CSS3选择器 完善的处理机制jQuery选择器
  • 4. jQuery选择器分类jQuery选择器的分类: 1、基本选择器 2 、层次选择器 3 、过滤选择器 3.1 、基本过滤选择器 3.2、内容过滤选择器 3.3 、可见性过滤选择器 3.4 、属性过滤选择器 3.5 、子元素过滤选择器 3.6 、表单对象属性过滤选择器 4、表单选择器
  • 5. 选择器描述返回示例#id根据指定的id匹配元素单个元素$(“#hel”)选择id=hel的元素.class根据类匹配元素集合元素$(“.hel”)选择class=hel的元素Element根据元素名匹配元素集合元素$(“div”)选择所有的div元素*匹配所有元素集合元素$(“*”)选择所有元素E1,E2,E3分组匹配元素集合元素$(“div,span,.hotclass”)选择所有div,span,和class为hotcalss的元素2.1、jQuery基本选择器
  • 6. 2.2、层次选择器选择器描述返回值示例 $(“E1 E2”)选择E1下所有E2集合元素$(“div span”)选择div下所有span$(“E1> E2”)选择E1下的子E2,不包含E2下满足的元素集合元素$(“div > span”)选择div下的span元素,不包含span下的span元素$(“E1+ E2”)选择E1后紧相邻的E2集合元素$(“.one + div”)选择class=one的下一个div元素$(“E1~ E2”)选择E1之后的所有E2集合元素$(“#one ~ div”)选择id为one后的所有div元素补充说明: $(“E1 + E2”)可以用$(E1).next(E2)代替 $(“E1 ~ E2”)可以用$(E1).nextAll(E2)代替
  • 7. 2.3、过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即过滤选择器都是以冒号(:)开头。 过滤选择器分类: 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 表单对象属性过滤选择器
  • 8. 2.3.1、基本过滤选择器选择器描述返回示例 :first选择第1个元素单个元素$(“div:first”)选择第1个div元素:last选择最后1个元素单个元素$(“div:last”)选择最后1个div元素:not(E1)去除所有E1选择器匹配的元素集合元素$(“input:not(.my)”)选择class不是.my的所有input元素:even选择索引是偶数的所有元素,索引从0开始集合元素$(“tr:even”)选择表格中所有偶数的行:odd选择索引是奇数的所有元素,索引从0开始集合元素$(“tr:odd”)选择表格中所有奇数的行:eq(index)选择索引值是index的元素,index从0开始单个元素$(“tr:eq(1)”)选择表格行索引等于1的行:gt(index)选择索引值大于index的元素,index从0开始集合元素$(“tr:gt(1) ”)选择表格行索引大于1的行:lt(index)选择索引值小于index的元素,index从0开始集合元素$(“tr:lt(1)”)选择表格行索引小于1的行:header所取所有的标题元素,h1~h6集合元素$(“:header”)选择网页中所有的

    ,

    :animated选择当前正在执行动画的所有元素集合元素$(“div:animated”)选择正在执行动画的div元素
  • 9. 2.3.2、内容过滤选择器选择器描述返回值示例 :contains(text)选择含有text文本内容的元素集合元素$(“div:contains(‘我’)”)选择内容里包含我的所有div:empty选择不包含子元素或文本的空元素集合元素$(“div:empty”)选择不包含子元素(含文本)的所有div元素:has(E1)选择包含有(E1选择器匹配的元素)的所有元素集合元素$(“div:has(p)”)选择含有p元素的所有div元素:parent选择含有子元素或文本的元素集合元素$(“div:parent”)选择拥有子元素(包含文本)的所有div元素
  • 10. 2.3.3、可见性过滤选择器选择器描述返回值示例:hidden选择所有不可见元素集合元素$(“:hidden”)选择所有不可见元素,包括:,
    等,如果只选择元素,则可以使用 $(“input:hidden”):visible选择所有可见元素集合元素$(“div:visible”)选取所有可见的div元素
  • 11. 2.3.4、属性过滤选择器选择器描述返回值示例 [attribute]选择拥有此属性的元素集合元素$(“div[id]”)选择拥有id属性的div元素[attribute=value]选择属性值为value的元素集合元素 $(“div[id=test]”)选择id属性值为test的div元素[attribute!=value]选择属性值不为value的元素集合元素 $(“div[id!=test]”)选择id属性值不为test的div元素,没有id属性的div也会被选择[attribute^=value]选择属性值以value开始的元素集合元素 $(“div[id^=test]”)选择id属性值以test开始的所有div元素[attribute$=value]选择属性以value值结束的元素集合元素 $(“div[id$=test]”)选择id属性值以test结束的所有div元素[attribute*=value]选择属性中含有value的元素集合元素 $(“div[id*=test]”)选择id属性值中含有test的所有div元素[A1][A2]…A[N]用属性选 择器合并成一个复合属性选择器。满足多个条件。集合元素 $(“div[id][title$=test]”)选择拥有id属性,并且title属性以test结束的所有div元素
  • 12. 2.3.5、子元素过滤选择器选择器功能描述返回值简单示例:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或奇偶元素.(index从1开始)集合元素:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始.:first-child选择每个父元素的第1个子元素集合元素:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如: $(“ul li:first-child”)选择每个ul下的第一个
  • :last-child选取每个父元素的最后1个子元素集合元素$(“ul li:last-child”)选择每个ul下的最后一个
  • :only-child如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配集合元素$(“ul li:only-child”)在
      中选取是惟一子元素的
    • 13. 2.3.5、子元素过滤选择器:nth-child()选择器详细功能描述: :nth-child(even)能选择每个父元素下的索引值是偶数的元素 :nth-child(odd)选择出每个父元素下的索引值是奇数的元素 :nth-child(2)选取每个父元素下的索引值等于2的元素 :nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始 :nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始
    • 14. 2.3.6、表单对象属性过滤选择器选择器描述返回值示例:enabled选择所有可用元素集合元素$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素:disabled选择所有不可用元素集合元素$(“#form1 :disabled”)选取id为form1的表单内所有不可用元素:checked选择忾有被选中的元素(单选框,复选框)集合元素$(“input:checked”)选择所有被选中的:selected选择所有被选中的选项元素(下拉列表)集合元素$(“select :selected”)选取所有被选中的选项元素
    • 15. 2.4、表单选择器选择器描述返回值示例:input匹配所有