• 1. jQuery应用编程 02 选择与过滤 答疑:周一、周三 19:00-21:00 综合楼4楼 软件系教师办公室@钟迅科
  • 2. Query----重头戏jQuery
  • 3. DOM树记住:除了元素作为结点,属性和文本也是作为结点保存的哟。 DOM 把 HTML 文档表示为带有元素、属性和文本等结点的树结构。
  • 4. DOM结点的获取getElementById() getElementsByTagName() 以上两种获取DOM结点的方法,是HTML DOM的标准方法,各浏览器均支持。 当描述条件较为简单时,可使用以上方法获取DOM结点。 因为以上方法是浏览器原生支持的,所以执行速度快,效率高。 当描述条件较为复杂时,采用jQuery选择器则可以使程序语句简化。实际开发往往是这种情况。
  • 5. CSS选择器 #content div.post { width:650px; height:300px; float:right; /*浮动到右边*/ background-color:#eeffee; }此部分称为选择器 SelectorjQuery选择器一部分借用了CSS选择器的语法。
  • 6. CSS选择器常用CSS3选择器:* 任何元素E 任何类型为 E 的元素E[foo] 具有 foo 属性的类型为 E 的元素E[foo="bar"] 具有 foo 属性且值为 bar 的类型为 E 的元素E[foo~="bar"] 具有 foo 属性且其中一个值为 bar 的类型为 E 的元素E[foo^="bar"] 具有 foo 属性且值的开头为 bar 的类型为 E 的元素E[foo$="bar"] 具有 foo 属性且值的末尾为 bar 的类型为 E 的元素E[foo*="bar"] 具有 foo 属性且值的含有 bar 的类型为 E 的元素
  • 7. CSS选择器常用CSS3选择器:E#myid ID 为 "myid"的类型为 E 的元素 E:not(s) 不符合选择器 s 的类型为 E 的元素 E F 作为 E 元素后代的 F 元素E > F 作为 E 元素孩子的 F 元素E + F 作为 E 元素直接后继的 F 元素 (E与F的父亲相同)E ~ F 作为 E 元素后继的 F 元素 (E与F的父亲相同)
  • 8. CSS选择器常用CSS3选择器:E:nth-child(n) E 元素, 作为其父亲的第 n 个孩子结点。 如 n 为常数5 ,选择第5个孩子; n 为表达式 2n+1,选择位置为奇数的孩子。E:nth-last-child(n) E 元素, 作为其父亲的第 n 个孩子结点,倒序E:nth-of-type(n) E 元素, 同类型中的第 n 个元素。E:nth-last-of-type(n) E 元素, 同类型中的第 n 个元素。倒序 E:first-child E 元素, 作为其父亲的第一个孩子结点。E:last-child E 元素, 作为其父亲的最后一个孩子结点。更多请参考:http://www.w3.org/TR/css3-selectors
  • 9. jQuery选择器基本选择器:选择器作用"*"所有选择器".class"类选择器"element"元素选择器"#id"ID选择器"selector1, selector1,selectorN"联合选择器
  • 10. jQuery选择器层级选择器: ancestor descendant parent > child prev + next (需同一父亲) prev ~ siblings(需同一父亲) 例子: A B A > B A + B A ~ BAABCBABBA
  • 11. jQuery选择器属性选择器: [attribute] [attribute=value] [attribute!=value]没有这个属性,或有这个属性,但值不相等 [attribute^=value] [attribute$=value] [attribute*=value] [attribute|=value] hreflang="en-UK" [attribute~=value] name="milk man" [attribute][attribute2]
  • 12. jQuery选择器注意:属性选择器的书写方式: 属性值必须使用单引号或双引号括起来。 四种写法: $('a[rel="nofollow self"]') 推荐 $("a[rel='nofollow self']") 推荐 $('a[rel=\'nofollow self\']') $("a[rel=\"nofollow self\"]")
  • 13. 特殊jQuery对象$(document) $(this) 直接根据现成的DOM对象构造jQuery对象。 注意:$(…)中不需要引号。
  • 14. jQuery过滤器过滤器在选择器选择的同时,进一步筛选元素。 过滤器语法:(类似于CSS的伪类) 选择器:过滤器 如:$("tr:first") 过滤器包括: 基本过滤器、子元素过滤器、内容过滤器、表单过滤器、可见性过滤器。 详细参考请查阅课本第61-68页或官网文档。
  • 15. 同时使用“选择”与“过滤”$('input:radio[name=bar]:checked') $('input:text.items') 当同时使用“选择”与“过滤”时,jQuery按照条件的书写顺序从左到右进行筛选。
  • 16. 选择的效率$('.post') $('*.post') $('div.post')
    $('#content .post') $('#content div.post') $('div#content div.post')限制条件越具体,选择效率越高。
  • 17. 选择之后再过滤当已经得到jQuery对象集合后,还可以再使用jQuery API进行过滤。 常用API: eq(index) not(selector) find(selector) children(selector) parent(selector) next(selector) nextAll(selector) siblings(selector)…更多请参考课本第74-77页在使用此类API时,请体会链式语法的运用。
  • 18. find() 选择符合条件的后代
    a
    b
    c
    b
    $('div.a').find('div'); $('div.a').find('.a'); $('div.a').find('.b');
  • 19. 扩展阅读有关jQuery选择器的实现原理,感兴趣的同学可阅读下列源码: 文件:jquery-1.8.1.js 行数:第100行—第182行
  • 20. 100%