JQ 2

1. 查找:

  表单过滤

  状态

2. 修改

3. 添加，删除，替换，复制

 

1. 查找:

 表单过滤: 利用表单中的元素名和type属性来选择表单中元素

       强调: 只能选择表单元素

    何时: 今后只要在表单中查找表单元素时

    包括:  :input  可匹配: input  textarea  select  button

                  如果希望单独匹配select  input textarea...

                      可用元素选择器

              按type属性选择:

              :text  :password  :radio  :checkbox 

              :submit  :reset  :button

              :image   :file

 

 状态选择器:  :enabled    :disabled    :checked    :selected

 

2. 修改:

  属性:  鄙视: attr vs prop

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

       相当于attribute: 即可访问HTML标准属性，又可访问自定义扩展属性

       问题: 不能修改三大状态

       解决: $("...").prop("属性名"[,值]) 可读取内存对象中的属性

            比如: 可访问HTML标准属性，又可访问状态属性

                     不能访问自定义扩展属性

   无论attr还是css返回的属性值，都是字符串类型。要计算，必须先转为数字。

 

  内容: 3种:

   DOM:  innerHTML   textContent    value

   $(...).html([html片段]): 获取或设置元素的innerHTML内容

   $(...).text([文本]): 获取或设置元素的textContent内容

 

   $(...).empty(): 清除元素的内容

 

   $(...).val([值]): 获取或设置表单元素的value内容

 

  样式: 2种:

    1. 直接修改css属性

       $(...).css("css属性名")  => getComputedStyle(elem).css属性

       只修改一个css属性

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

       批量修改多个css属性:

       $(...).css({

          css属性:值,

                 ... : ...

       })

       强调: css属性名强烈建议使用去横线变驼峰

                修改css属性值时, 不用加单位也行

      问题: 代码量大

 

    2. 通过修改class批量修改一套css属性:

      $(...).hasClass();

      $(...).addClass("class1","...",...); $(...).removeClass();

      $(...).toggleClass();

 

 

 

 

 

1. 添加，删除，替换，复制

2. 事件

 

1.  添加，删除，替换，复制

  添加: 2步:

    1. 创建节点: var $elem=$(html代码片段)

    2. 将节点添加到DOM树:

       $(parent).append/prepend($elem)

           将$elem添加到parent的结尾/开头

       $(child).before/after($elem)

           将$elem插入到现有子元素child之前/之后

  删除: $(...).remove();

 

  替换: $(oldElem).replaceWith("html代码片段")

          用html代码片段创建新元素，替换现有旧元素   右替换左

           $("html代码片段").replaceAll("selector")

          用html代码片段创建新元素，替换所有符合有边选择器要求得旧元素。左替换右

 

  克隆: var $elem_copy=$(...).clone();

      问题: 浅克隆: 仅复制属性，不复制事件行为

      解决: 深克隆: 即复制属性，又复制事件行为

           如何: $(...).clone(true);

 

2. 事件:

  鄙视: jQuery中共有几种绑定事件的方式

     1. $(...).bind("事件名",fn) =>addEventListener()

                .unbind("事件名",fn) => removeEventListener();

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

                            .unbind() 解除当前元素上所有事件处理函数绑定

                        优点: 不必非要使用有名的函数。

                                 同样可以移除匿名函数的绑定！

      优化: 在删除任何DOM元素前，都要先解绑元素上所有事件监听 

     2. $(...).one("事件名",fn)   只触发一次事件后，就自动解除绑定  

     3. 简化版: $(...).事件名(fn)  只对部分最常用的事件提供了简化

     4. 利用冒泡:

        DOM: parent.addEventListener("事件名",function(e){

                 //this->parent

                         //难题1: 获得目标元素: e.target DOM

                 //难题2: 判断是否想要的目标元素

                               //e.target.nodeName  或 e.target.属性

                   });

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

                  //简化1: this->e.target->$(this)

                          //简化2: 用预定义的selector，代替了手写的if判断

                      })

    5. $(...).live/die("事件名", fn) 废弃: 因为将所有事件集中绑定到document上。

    6. $(...).on(): 统一了之前所有绑定方式:

           2种用法:

              1. 代替bind，直接为子元素绑定事件:

                 $(child).on("事件名", fn)

                              .off("事件名", fn)

                                 只有一种重载: .off("事件名")

              2. 代替delegate, 用于利用冒泡:

                 $(parent).on("事件名", "selector", fn)

                     

 

 

 

 

 

      

 

转载于:https://www.cnblogs.com/Hale-Proh/p/7199705.html