JQuery操作元素（核心）

属性操作

属性分为两种：attr、prop

attr: 在开始标签中显式定义的属性
    读: $("selector").attr("属性名")=>getAttribute("属性名")
    改: $("selector").attr("属性名",值)=>setAttribute("属性名",值);

    问题: 无法访问不在开始标签中的内存中的prop属性，比如: checked   selected   disabled

prop: 读取不在开始标签中定义的内存中的元素属性prop
    读: $("selector").prop("属性名")=>elem.属性名
    改: $("selector").prop("属性名",值)

移除属性

$(...).removeAttr("属性名")=>removeAttribute("属性名")；

总结: jquery中很多方法都是两用，如果不提供新值，就读取；如果提供新值，就修改
内容

html原文

读: $(...).html()           =>       elem.innerHTML
    改: $(...).html('html片段')      => elem.innerHTML='html片段'

纯文本
读: (...).text('文本')

清空元素内容

    $(...).empty();          =>         elem.innerHTML="";

表单元素的value

读: $(...).val()
    改: $(...).val(值)

样式

直接操作css属性

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

简化: 同时修改多个属性值

    $(...).css({属性名1:值1, 属性名2:值2, ...})

    强调: 属性名都要去横线变驼峰

总结: css()能读所有属性，但只能改内联样式中的属性

修改与添加

    完整修改class属性: $(...).attr("class","类名")

   追加class属性:
         $(...).addClass("类名")
         class="cell" : $(...).addClass("n8")  => class="cell n8"

移除与清除

移除class属性: $(...).removeClass("类名")
    class="cell n8": $(...).removeClass("n8")=>class="cell"

   清除class:
         $(...).attr("class","")或$(...).removeClass();
      $(...).toggleClass("类名"): 在有或没有指定类名之间切换。

判断是否有指定class

$(...).hasClass("类名");

技巧: 因为class有时容易发生变化。所以，如果class有可能发生变化时，尽量不要用class查找。

解决: 可使用自定义属性来保存固定值作为查找条件

节点间关系

父子关系

    $(...).parent()
   $(...).children([selector]) 只获得直接子元素
   $(...).find(selector) 获得所有子代元素

    强调: children可不加selector，但find必须加selector
DOM: elem.parentNode、elem.parentElement

兄弟关系

$(...).next([selector])  下一个兄弟元素
   $(...).prev([selector])  前一个兄弟

   如果加selector，必须满足:1. 必须是相邻，2. 必须满足selector的要求

   $(...).siblings([selector]) 其它兄弟

DOM: elem.nextElementSibling、elem.previousElementSibling

添加

DOM: 3步: 

   1. 创建空元素对象，
   2. 设置关键属性, 
   3. 添加到父元素下

   jq: 2步:  

  1. 创建节点: var $elem=$("完整html元素代码段");
  2. 将节点添加到指定父元素下: 
      追加: $(parent).append($elem); 
      追加到parent下的所有子节点末尾——appendChild
      插入: $(parent).prepend($elem); 作为parent下的第一个子节点插入
               $(child).after($elem); 插入到child之后
               $(child).before($elem); 插入到child之前

删除
    $(要删除的元素).remove();
             强调: 删除时，不必查找父元素

复制（clone）
    var $clone=$(...).clone() ；浅克隆: 仅复制普通属性，不复制事件处理函数
           $(...).clone(true)；深克隆: 不但复制普通属性，而且还复制事件处理函数
替换
    $(old).replaceWith(新元素)
             $(新元素).replaceAll(old)

总结（jQuery的核心和本质）

jQuery是对DOM操作的终极简化函数库，学jQuery，其实还是在学DOM

查找：选择器

修改:

  属性: attr()   prop()
  内容: html()   text()   val()   empty()
  样式: css()  
      addClass()   removeClass()  hasClass() toggleClass()

添加: 2步:

 1. 创建: var $elem=$(html代码段)
 2. 追加: $(parent).append($elem); ...

删除: remove();
克隆: clone([true])

修改标准属性:

$("selector").attr("标准属性名","值") 等效: getAttribute和setAttribute
所有这类方法，只要省掉第二个参数，就是读取属性值

attr只能获取或设置元素开始标签中的attribute，无法获取或设置不在开始标签中的property

prop方法专门读取内存中对象的属性，比如: checked属性只能用prop读取