8月19号上课内容

第一节课:

  • 1 事件

    1) 绑定事件添加命名空间
    2) trigger 自定义事件
    易错点:
    1) on在前面,trigger才能生效
    
    2) 注意阻止冒泡e.stopPropagation(), 阻止默认行为 e.preventDefault(), 可以通过return false 都阻止
    
  • 2 data

    http://api.jquery.com/data/

第二节课:

Sizzle获取元素

  • 1) 基础部分

    选择所有的
    #id ,.class, p 以及组合元素(注意逗号等得用法 )
    层级关系
      子节点 parent > child
      祖先节点 ancestor  descendant
      兄弟节点  prev + next(匹配紧挨着的兄弟节点) , prev ~ siblings (兄弟节点中所有)
    
  • 2) 属性选择符

    $('a[rel="nofollow self"]’) 注意区分单双引号的情况,这种是精确匹配的
    
    • 使用场景:

      $( "a[hreflang|='en']” )  匹配 hreflang=en 或者 hreflang=en-xx这种的,必须是匹配value或者value-这种 http://api.jquery.com/attribute-contains-prefix-selector/    
      $( "input[name^='news']” ) 匹配name 以news开头的,注意name=news这种也是匹配的到得
      $( "input[name$='news']” ) 匹配name 以news结尾的,注意name=news这种也是匹配的到得 
      $( "input[name~='man']” ) 匹配单词中含有man的name属性(单词以空格分隔),比如milk man匹配,letterman2,man-news,newlink都不匹配
      $( "input[name*='man']” ) 匹配字符串中含有man的name属性(单词以空格分隔) 比如milkman ,milk man,milk-man  都是匹配的
      //都是css selector
      $( "input[name!='newsletter']” ) 匹配要么不含有name属性,或者含有name属性,但是值不匹配的,等效于:not([attr='value’]),注意这个不是css 定义的     
      $( "input[name!='newsletter’][value=’sd']” ) 多重选择
      
  • 3) 元素过滤

    • 1) 跟序列相关的

      :eq(index) , index 从0开始计数,注意eq不是css 定义的,因此不能使用querySeclector,效率不高,可以使用$("your-pure-css-selector").eq(index)这种代替
      :even,(偶数) odd(奇数),也是0开始计数,方式:$( "tr:even” ),效率不高,可以使用.filter(":even")这种代替 
      :lt(index), :gt(index) 都是从0开始的
      
    • 2) 伪类

      :first,:last 匹配第一个或者最后一个,$(‘tr:first’),效率不高,可以使用.filter(‘:first’)
      :focus,:animated, 
      :header ,匹配h1-h6,同理可以用.filter(‘:header’)
      :not(selector), selector是任意selector, $( "input:not(:checked) + span" )
      
    • 3)子元素过滤

      :first-child,:last-child (http://api.jquery.com/first-child-selector/)
      注意区分:first,first的结果只有一个,first-child的结果是每个元素的第一个子元素,
      等效于:nth-child(1):first-of-type, :last-of-type 
      http://api.jquery.com/first-of-type-selector/ 
      父元素的首个匹配元素,比如$( "span:first-of-type" )
      :nth-child(index),从1开始,注意:nth-child(even)和:even是反的,可以通过nth-child(2n)
      http://api.jquery.com/nth-child-selector/
      :only-child
      
    • 4) 内容过滤

      :contains(text) $( "div:contains('John')” ),内容中罕有john的就匹配,区分大小写
      :empty,匹配没有子节点(包含文本节点)
      :has(selector) selector任意,比如$( "div:has(p)” ), 匹配所有含有p元素的div,p只要在div里面就可以,不用试子节点,另外这个可以通过has方法获取
      
    • 5) form 表单相关过滤

      :button, 过滤出所有的button,匹配input type=button 和 button 标签的
      :checkbox
      :checked $( "input:checked” ),匹配所有选中的元素(checked包含checked和selected)
      :disabled,:enabled 等http://api.jquery.com/category/selectors/form-selectors/
      
      • 6) 可视

        :hidden ,:visible (http://api.jquery.com/hidden-selector/) 注意4中hidden得情况

      • 7) 遍历相关的方法http://api.jquery.com/category/traversing/ (几种方法都比较重要)

        1) children([,selector]), 选取匹配元素的子元素,注意和find方法的区别,children只是选择子节点,find是子孙节点 2) each 遍历 3) end 方法 4) eq(index) 0开始