DOM详解（一）—— jQuery

1.查找元素节点

<p title="选择你最喜欢的水果.">你最喜欢的水果？</p>
    <ul>
        <li title='苹果'>苹果</li>
        <li title='橘子'>橘子</li>
        <li title='菠萝'>菠萝</li>
    </ul>

    //获取<ul>里第二个<li>节点的文本内容并且打印出来
    alert($('ul li:eq(1)').text());
 
 
1
2
3
4
5
6
7
8
9

2.查找属性节点

通过attr(attributeName)方法来获取它的各种属性

    //获取p元素的title属性值
    alert($('p').attr('title'));
 
 
1
2

3.2.2创建节点

1.创建元素节点 $(html)

例：要创建两个li元素节点，并且要把它们作为ul元素节点的子节点添加到DOM节点数上。

解题步骤：

创建两个li新元素
将这两个新元素插入文档中

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回：

    var $li_1 =  $("<li></li>");//创建第一个li元素
    var $li_2 =  $("<li></li>");//创建第二个li元素

    可以使用jQuery的append()等方法将两个新元素插入文档中。

    $("ul").append($li_1).append($li_2); //添加到ul节点中，使之能在网页中显示
 
 
1
2
3
4
5
6
7
8

动态创建的新元素节点不会自动添加到文档中，而是需要使用其他方法将其插入文档中

2.创建文本节点

var $li_2 =  $("<li title="香蕉">香蕉</li>");

    $("ul").append($li_2);
 
 
1
2
3

3.2.3插入节点

3.2.3.1append() 向每个匹配的元素内部追加内容

<p>我想说</p>
    $("p").append("<b>你好</b>");
    结果
    <p>我想说<b>你好</b></p>
 
 
1
2
3
4

3.2.3.2appendTo() 将所有匹配的元素追加到指定的元素中。与appdend方法正好反方向

<p>我想说</p>
    $("<b>你好</b>").appendTo("p");
    结果
    <p>我想说<b>你好</b></p>
 
 
1
2
3
4

3.2.3.3prepend() 向每个匹配的元素内部前置内容

<p>我想说</p>
    $("p").prepend("<b>你好</b>");
    结果
    <p><b>你好</b>我想说</p>
 
 
1
2
3
4

3.2.3.4prependTo()

<p>我想说</p>
    $("<b>你好</b>").prependTo("p");
    结果
    <p><b>你好</b>我想说</p>
 
 
1
2
3
4

3.2.3.5after()添加到匹配元素标签结束符后面

$("p").after("<b>你好</b>");
    结果
    <p>我想说</p><b>你好</b>
 
 
1
2
3

3.2.3.6insertAfter()用法与after方法反方向

3.2.3.7before()在每个匹配的元素之前插入内容

    $("p").before("<b>你好</b>");
    结果
    <b>你好</b><p>我想说</p>
 
 
1
2
3

3.2.3.8insertBefore()

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。

3.2.3.9对原有的DOM元素进行移动

    var $one_li = $("ul li:eq(1)");
    var $two_li = $("ul li:eq(2)");

    $two_li.insertBefore($one_li);//移动节点
 
 
1
2
3
4

3.2.4删除节点

1.remove()方法

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。 
删除后，所有后代节点将同时删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

另外remove方法也可以通过传递参数来选择性的删除元素，

$("ul li").remove("li[title!=菠萝]");
 
 
1

2.empty()方法：

empty方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

3.2.5复制节点

复制节点也是常用的DOM操作之一，

商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并2将其跟随鼠标移动，从而达到以下购物效果

clone()
    clone(true) 绑定事件也被传递

    $("ul li").click(function(){
    $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中
})
 
 
1
2
3
4
5
6

3.2.6替换节点

1.replaceWith():将所有匹配的元素都替换成指定的HTML或者DOM元素。

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

2.replaceAll():与replaceWith使用反过来

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

3.注意事项

如果在替换之前，已经为元素绑定事件，替换后原来绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件

3.2.7包裹节点

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap().

1.wrap()方法

$("strong").wrap("<b></b>");//用b标签把strong元素包裹起来
 
 
1

2.wrapInner()方法

$("strong").wrapInner("<b></b>");//用b标签把strong元素里面的内容包裹起来
 
 
1

3.2.8属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性

1.1.获取和设置属性attr()

var $para = $("p");//获取p节点
    var p_txt = $para.attr("title")//获取p元素节点属性title

    $("p").attr("title","your title");//设置单个的属性值

    设置多个属性值

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

    jQuery中还有很多方法都是同一个函数实现获取和设置的。html(),text(),height(),width(),val()css()等
 
 
1
2
3
4
5
6
7
8
9
10

2.删除属性removeAttr()

$("p").removeAttr("title");//删除p元素的属性title
 
 
1

3.2.9样式操作

1.获取样式和设置样式

获取样式 var p_class = $("p").attr("class"); //获取p元素的class
    设置样式 $("p").attr("class","high");//设置p元素的class为high
 
 
1
2

2.追加样式:addClass(“样式名称”);

<p class="abc"></p>

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

    <p class="abc  wen"></p>

    两个样式合并， wen样式中与abc样式中有同样的属性时，以后wen为准。
 
 
1
2
3
4
5
6
7

3.移除样式removeClass()

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

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

    $("p").removeClass("high  another"); 移除class中 high和another样式

    $("p").removeClass(); //移除p元素所有class属性

 
 
1
2
3
4
5
6
7
8

4.切换样式toggleClass()

样式切换toggleClass(“another”):如果another类名存在则删除它，不存在则添加它。

$toggleBtn.toggle(function(){//显示元素
    代码①
},function(){
    //隐藏元素
    代码②
})
    toggle()方法此处作用是交替执行代码①和代码②两个函数。
 
 
1
2
3
4
5
6
7

5.判断是否含有某个样式hasClass(“another”)

hasClass("another"):存在class为another则返回true，不存在则返回false
 
 
1

3.2.10 设置和获取HTML、文本和值

1.html()方法：

<p title="选择你最喜欢的水果."><strong>你最喜欢的水果？</strong></p>

    alert($("p").html());//获取p节点中的内容，包括html元素。弹出的内容为<strong>你最喜欢的水果？</strong>

    $("p").html("<strong>你最最最喜欢的水果是？</strong>");//设置p节点中的内容，原来内容被覆盖，

    注意：该方法可以用于XHTML文档，但不能用于XML文档
 
 
1
2
3
4
5
6
7

2.text()方法

与javaScript的innerText属性类似。用来读取或者设置某个元素中的文本内容

    alert($("p").text());//获取p节点中的内容，包括html元素。弹出的内容为你最喜欢的水果？

    $("p").text("<strong>你最最最喜欢的水果是？</strong>");//设置p节点中的内容，原来内容被覆盖，标签也会当做文本输出

    注意：javascript中的innerText属性并不能再Firefox浏览器下运行，而jquery的text()方法支持所有的浏览器

    text()方法对HTML文档和XML文档都有效
 
 
1
2
3
4
5
6
7
8
9

3.val()方法

此方法类似于javaScript中的value属性，可以用来设置和获取元素的值。

<script type="text/javascript">
$(function(){//网页加载时
    $('#address').focus(function(){//获得地址焦点时
    var txt_value = $(this).val();//获取地址文本框的值
    if(txt_value=="请输入邮箱地址"){
        $(this).val("");
    }
    })

    $('#address').blur(function(){//失去地址焦点时
    var txt_value = $(this).val();//获取地址文本框的值
    if(txt_value==""){
        $(this).val("请输入邮箱地址");
    }
    })

    //对密码框进行操作
    $('#password').focus(function(){//获得密码焦点时
    var txt_value = $(this).val();//获取密码文本框的值
    if(txt_value==this.defaultValue){//使用defaultValue属性
        $(this).val("");
    }
    })

    $('#password').blur(function(){//失去密码焦点时
    var txt_value = $(this).val();//获取密码文本框的值
    if(txt_value==""){
        $(this).val(this.defaultValue);
    }

    })

})


        </script>

  <body>
    <input type="text" id="address" value="请输入邮箱地址" />
    <input type="text" id="password" value="请输入邮箱密码"/>
    <input type="button" value="登录"/>
  </body>
this指向当前的文本框，this.defaultValue就是当前文本框的默认值