JQUERY-修改-API-事件绑定

正课:

1. 修改:

2. 按节点间关系查找:

3. 添加，删除，克隆，替换:

4. 事件绑定:

1. 修改:

 内容: 

  html片段: .html(["html片段"])     .innerHTML

  text文本: .text(["文本"])      .textContent

  表单元素值: .val(["值"])     .value

 属性:

  HTML标准属性: 

   $elem.attr("属性名"[,"值"])

    代替: setAttribute()  getAttribute();

    简写: 可用一个attr，修改多个属性值:

      $elem.attr({

        属性名: "值",
          ... : ...

      })

  状态属性: 

   $elem.prop("状态名"[,true/false])

   attr vs prop

    本质: attr: 读取HTML中开始标签中的任意属性

         prop: 读取内存对象中的属性

  自定义扩展属性:

    $elem.data("自定义扩展属性名"[,"值"])

        //.dataset

 样式:

  $elem.css("css属性名","属性值")

   强调: 单个数值，不用加px单位

   修改时: 等效于elem.style.css属性

   获取时: 等效于getComputedStyle()

   简写: 同时修改多个css属性:

    $elem.css({

      css属性名:"值",

        ... : ...

    })

   问题: 代码繁琐

   解决: 用class批量应用/撤销样式

    $elem.addClass("class");

    $elem.removeClass("class");

    $elem.hasClass("class");

   

    $elem.toggleClass("class")

     等效: if(hasClass())  removeClass()  else  addClass()

2. 按节点间关系查找:

 2大类关系:

 1. 父子: 

   .parent()     .parentNode

   .children(["selector"])    .children

     .find("selector")  在所有后代中查找符合条件的

   .children().first()  .firstElementChild

   .children(":first")

   .children(":first-child")

   .children().last()   .lastElemenChild

   .children(":last")

   .children(":last-child")

 2. 兄弟:

  .prev()     .previousElementSibling

    .prevAll(["selector"])

  .next()     .nextElementSibling

    .nextAll(["selector"])

  .siblings(["selector"])

3. 添加，删除，替换，克隆:

 添加: 2步:

   1. 用HTML代码片段创建新元素:

      var $elem=$("html片段")

   2. 将新元素添加到DOM树

      $parent.append ($elem) //返回父元素，无法继续对新元素操作

      $elem.appendTo("parent") //返回新元素，可继续对新元素操作

   

      $parent.prepend($elem)

      $elem.prependTo($parent)

      $child.before($elem)

      $child.after($elem)

  简化: $parent.append/prepend("html")

 删除: $elem.remove();

 替换: $旧.replaceWith($新) //$旧

      $新.replaceAll($旧)  //$新

 克隆: $elem.clone();

   默认: 浅克隆: 只复制属性和样式，不复制行为

        深克隆: 即复制属性和样式，又复制行为

               $elem.clone(true)

4. 事件绑定:

 鄙视: jquery中共有几种事件绑定方式，有什么不同?

  DOM: .addEventListener();

       .removeEventListener();

  1. .bind()/.unbind()

    .unbind() 3种重载:

      .unbind("事件名",处理函数) 移除指定事件上的一个指定的处理函数

      .unbind("事件名")  移除指定事件上绑定的所有处理函数

      .unbind()  移除所有事件上的所有处理函数

  2. .one()  绑定后，只触发一次处理函数，触发后自动解绑

  3. .delegate() 事件委托

   其实就是利用冒泡的简化版

    $parent.delegate("selector","事件",function(){

      var $tar=$(this);

      

    })

    .undelegate(...)

  4. 废弃: .live/die()  废弃

  5. .on()/off()

   2个重载:

    1. 代替bind， 2个参数: .on("事件名",function(){ ... })

    2. 代替delegate, 3个参数:

.on("事件名","选择器",function(){ ... })

  6. 更简化:  .事件名()