jQuery Dom 笔记

DOM 分类

  1. DOM Core 并不专属Javascript,也可用于XML
document.getElementsByTagName("form");
element.getAtteibute("src");
  1. HTML-DOM
document.forms
element.src
  1. CSS-DOM
element.style.color = "red"

jQuery 的 DOM 操作

<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>
<span id="print"></span>
var $print = $("#print");
var $li_fruit = $("ul li:eq(1)");
// $print.text($li_fruit.text());
$print.text($li_fruit.attr("title"));
$("ul").append($("<li title='banana'>香蕉</li>"))
       .append($("<li title='cherry'>樱桃</li>"));

插入

1.append()

$("p").append("<b>你好</b>");
<p>我想说:
    <b>你好</b>
</p>

2.appendTo()

3.prepend()

$("p").prepend("<b>你好</b>");
<p>
    <b>你好</b>我想说:
</p>

4.prependTo()

5.after()

$("p").after("<b>你好</b>");
<p>我想说:</p>
<b>你好</b>

6.insertAfter()

7.before()

$("p").before("<b>你好</b>");
<b>你好</b>
<p>我想说:</p>

8.insertBefore()

删除

  1. remove()
    可用于移动节点

    var $li = $("ul li:eq(1)").remove();
    $li.appendTo("ul");
    
    $("ul li:eq(1)").appendTo("ul");
    
    $("ul li").remove("li[title!=菠萝]");
    
  2. detach()

    $("ul li").click(
    function(){
        alert($(this).html);
    }
    )
    var $li = $("ul li:eq(1)").detach();
    $li.appendTo("ul");
    

    带着方法,remove()不带.

  3. empty()

    $("ul li:eq(1)").empty();
    

复制节点

$("ul li").click(
    function(){
        $(this).clone().appendTo("ul");
    }
)

替换节点

$("p").replaceWith("<strong>你最不喜欢的水果是</strong>>");

颠倒版本

$("<strong>你最不喜欢的水果是</strong>>").replaceAll("p");

需要重新绑定事件

包裹节点

wrap() 将某个节点用其他标记包裹起来

$("strong").wrap("<b></b>");
  1. wrapAll()
    将所有的匹配元素用一个元素包裹

  2. wrapInner()
    包裹匹配元素的子元素

    属性操作

    获取属性

    $("p").attr("title")
    

    设置属性

    $("p").attr("title","your title");
    
    $("p").attr("title":"your title","name":"test");
    

    删除属性

    $("p").removeAttr("title");
    

    样式操作

    设置样式

    $("p").attr("class","high");
    

    添加样式

    $("p").addClass("another");
    

    移除样式

    $("p").removeClass("high")
    

    切换样式

    $("p").toggleClass("another");
    

    判断是否有某个样式
    hasClass()

设置和获取 HTML 文本 和 值

  1. html()方法
    类似于 Javascript innerHTML

  2. text()方法
    类似于 Javascript innerText

  3. val()方法
    类似于 Javascript value

    $("#address").val();
    

    文本框的值

遍历节点

  1. children()

    for(var i=0,len=$ul.length;i<len;i++){
    alert($ul[i].innerHTML);
    }
    
  2. next()
    后面的同辈节点

  3. prev()
    前面的同辈节点

  4. siblings()
    前后所有的同辈节点

  5. closest
    取得最近的匹配元素
    从本身开始,逐级向上匹配
    parent() 父级元素
    parents() 祖先元素

还有一些遍历节点的方法 find() filter() nextAll() prevAll() 等

CSS-DOM 操作

$("p").css("color","red");
$("p").css(
    {
        "font-size":"30px",
        "background-color":"#888888"
    }
)

也可以写成 fontSize 和 backgroundColor

还有 height width

  1. offset()

    $("p").offset()
      .left   //左偏移
      .top    //右偏移
    
  2. position()
    relative absolute

    $("p").position()
      .left   //左偏移
      .top    //右偏移
    
  3. scrollTop 和 scrollLeft
    获取和设定元素(比如body)滚动条距顶端 和 左侧的距离

    $("textarea").scrollTop();
    $("textarea").scrollLeft(300);