jQuery学习笔录3（jQuery学习笔记——DOM【1.DOM Core】）

来源：互联网发布：战地1优化补丁编辑：程序博客网时间：2024/05/16 23:55

DOM是Document Object Model的缩写，是文本对象模型的意思。

一概述

1 DOM 能够让开发者获取和操作网页中的数据，脚本和表现层对象。

dom结构，树形的，如下图

DOM操作分3个方面：DOM Core， HTML- DOM , CSS- DOM

jQuery中DOM Core的操作
1查找元素节点
1）查找元素节点

var $li=$("ul li:eq(0)");//查找元素节点，获取<ul>里第1个<li>节点

2）查找属性节点

使用attr()方法来获取它的各种属性

var $para=$("p");
var p_txt=$para.attr("title");

3）动态添加元素节点

i 创建新的元素

ii 将新的元素插入到文档中，将新的元素插入到文档最简单的方法是，让其作为文档中某个节点的子节点

$("HTML标记字符串")：创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

$("HTML标记字符串").append("新建元素")

$("ul").append($li_1)

除了append()之外，还有别的方法可以将新的节点插入到文档中，

比如 appendTo(),before()。

4）删除元素节点

remove() 和 empty()

remove()删掉元素节点以及他下面的所有子节点都一并删掉

$("ul li:eq(3)").remove()

empty() 清空节点，及元素中所有的后代节点。

5）复制节点

clone(),如果想让复制后的节点同样拥有复制功能，这样写：clone(true)

6)替换节点

replaceWith(), replaceAll()

7)包裹节点

wrap(),wrapAll(),wrapInner()

$("strong").wrap("<em></em>")//用<em>标签把strong括起来

firebug中看到的：

<em><strong>你最爱的水果呢？</strong></em>

2获取属性和设置属性

1)如果要获取p元素的属性，只要给attr()传递一个参数（属性名称）。

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

2)设置属性，传递2个参数：1个属性名称，1个属性的值

$("ul li[title=香蕉]").attr("title","your turn");//设置属性值

类似获取属性，设置元素属性值的方法：html(),text(),val(),css()等。

3)删除属性

removeAttr()

3样式操作

1）用样式A替换样式B

$("p").attr("class","A") //class="A"

2)添加样式 addClass("C")

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

3)删除样式 removeClass("A")

$("p").removeClass("testColor").removeClass("myClass");

4设置和获取html、文本和值

$("p").html();

相当于js 的innerHTML()，抓取元素中【HTML内容】:文本内容 + p元素内的标签 html

$("p").text();

相当于js的innerText() ,读取或设置元素的【文本内容】

$(this).val();

类似js的value属性，设置和抓取元素的【值】，无论是textbox 还是select ，如果元素为多选，则返回一个包含选择值的数组

5）获取焦点

$("#mailaddress").focus()

6)失去焦点

$("#mailaddress").blur()

4遍历节点，遍历节点方法有很多：parent(),parents(),next(),children,prev(),siblings()等——详见jQuery API

1） parent()：获取匹配元素的父元素，包含父元素里面的内容

<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>对象，因为p标签的父标签是div.

又例：

alert("parent")
var li3=$("li").parent();//匹配元素的父元素
alert(li3.html());

2 ）chlidren():只抓该元素下一级的元素

var v_p=$("p").children();

alert(v_p.length);得到的是：1个元素，就是<strong>，<em>不考虑

3 ）next() :抓匹配元素后面紧邻的同辈元素

var p1=$("p").next(); 结果是<ul>

4）prev() : 抓匹配元素前面紧邻的同辈元素

var ul1=$("ul").prev(); 结果是<p>

5 ）siblings() :抓取匹配元素前后所有的同辈元素

var p=$("p").siblings();
alert(p.html());

6 ）closest() ：用来获得最近的匹配元素，检查当前元素是否匹配，匹配直接返回元素本身，不匹配向上查找父元素，直到有匹配的，没有就返回空jquery对象
$(window.document).bind("click",function(e){
$(e.target).closest("li").css("color","red");

$(e.target).closest("li").css({"fontSize":"18px","backgroundColor":"#888888"});
}) 点到<li> ，添加css样式

具体代码1：查找节点

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDomAttr.aspx.cs" Inherits="jQueryDom_jQueryDom1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title>    <script src="../jQuery_JQueryCore/script/jquery-1.3.2.min.js" type="text/javascript">    </script></head><body>    <form id="form1" runat="server">    <div>    <p title="选择你最喜欢的水果">你最喜欢的水果是？</p>    <ul>        <li title ='苹果'>苹果</li>        <li title='橘子'>橘子</li>        <li title='菠萝'>菠萝</li>    </ul>    </div>    </form></body></html><script language="javascript">    var $li=$("ul li:eq(0)");//查找元素节点，获取<ul>里第1个<li>节点    var li_txt=$li.text();alert(li_txt);    var $para=$("p");     var p_txt=$para.attr("title"); //查找属性节点alert(p_txt);    var $li_1=$("<li>西红柿</li>");//动态添加元素节点,元素要闭合    var $li_2=$("<li title='香蕉'>香蕉</li>")    $("ul").append($li_1);    $("ul").append($li_2);//相当于 $("ul").append($li_1).append($li_2)alert("添加好了")    $("ul li:eq(3)").remove();//获取第4个<li>元素节点，从网页中删掉alert("删除第4个")    var $li=$("ul li:eq(1)").remove();//第2个元素删掉alert("第2个删掉 ok-》再添加上")    $li.appendTo("ul")//再把刚刚删掉的元素添加到<ul>元素alert("删掉 属性title=菠萝的")    var $liPropery=$("ul li").remove("li[title=菠萝]");    $liBase=$("ul li:eq(1)");    $litest=$("<li title=test>Test</li>")    $litest.insertAfter($liBase);alert("将苹果移动到第二位置上")    $li_one=$("ul li[title=苹果]");    $li_two=$("ul li:eq(1)");    $li_two.insertBefore($li_one);alert("empty用法：清空test");    $("ul li[title=test]").empty();alert("复制苹果节点");    $("ul li[title=苹果]").clone().appendTo("ul");alert("点击苹果，复制苹果节点")  ;     $("ul li").click(function(){        $(this).clone().appendTo("ul")    });alert("点击苹果，复制苹果节点,并且复制后的苹果也具有可复制功能")         $("ul li").click(function(){        $(this).clone(true).appendTo("body")    });alert("替换节点");    $("p").replaceWith("<strong>你最爱的水果呢？</strong>");    $("strong").wrap("<em></em>");//用<em>标签把strong括起来alert("获取属性");    var $para=$("p");//获取p元素    var $p_title=$para.attr("title");//获取<p>元素节点属性title    alert("p元素的title："+$p_title);    $("ul li[title=香蕉]").attr("title","your turn");//设置属性值    $("ul li[title=your turn]").attr({"id":"li_Tests","name":"li_Test"});//设置多个属性值alert("删除属性")    $("ul li[title=your turn]").removeAttr("id")//删除ul li title是香蕉的 ID属性</script>

具体代码2：属性样式操作

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMCss.aspx.cs" Inherits="jQueryDom_jQueryDOMCss" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title>    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>    <style>    .myClass{        color:green;        font-size:14px;            }    .pNew{        background-color:pink;        color:red;    }    .testColor{        color:white;    }    #mailaddress{        text-shadow:white;    }    </style></head><body>    <form id="form1" runat="server">    <div>    <p class="myClass" title="选择你喜欢的水果"><em>你喜欢啥水果</em></p>    <button type="button"  id="changCss" name="changCss">切换样式</button><br />    <input type="text" id="mailaddress" value="请输入邮箱地址" />    <input type="text" id="pwd" value="请输入密码" />    <input type="button" value="登录" />    </div>    </form></body></html><script>$(p).css("color");//获取<p>元素的样式颜色 var p_class=$("p").attr("class")//获取p元素的class$("p").attr("class","pNew");//将原来的myClass 替换成 pNew, <p class="myClass"   =>    <p class="pNew"$("p").addClass("testColor");//在原来的基础上添加 myClass样式，合并样式.后面的样式覆盖前面的样式，color：yellow；如果合并的样式是myClass 字体则为red。$("p").addClass("myClass");//样式从上到下继承：myClass->pNew->testColor$("p").removeClass("testColor").removeClass("myClass");//$("p").removeClass() 当不带参数的时候则是删掉p元素的所有样式$("#changCss").click(function(){    $("p").toggleClass("testColor")//因为浏览器对button的type理解不一致，所以强制button type之前，FireFox认为我的button是submit，样式效果只在一瞬间});var $hasClasses=$("p").hasClass("pNew");//判断有没有pNew这个样式，有返回true。等价于$("p").is(".pNew");alert($hasClasses);//设置和获取html 、文本和值//html()：相当于js 的innerHTML()，抓取元素中【HTML内容】:文本内容 + p元素内的标签 htmlvar $p_html=$("p").html();alert($p_html);$("p").html("<strong>这是嘛？</strong>")//替换掉水果句//text()：相当于js的innerText() ,读取或设置元素的【文本内容】var $p_text=$("p").text();alert($p_text);$("p").text("<h1>小糊涂神</h1>")//page show：<h1>小糊涂神</h1>//val()：类似js的value属性，设置和抓取元素的【值】，无论是textbox 还是select ，如果元素为多选，则返回一个包含选择值的数组$("#mailaddress").focus(function(){//focus 得到焦点    //$(this).val("")  //就锁定焦点清空了。    var t_address=$(this).val();    if(t_address == "请输入邮箱地址")    {        $(this).val("");    }})$("#mailaddress").blur(function(){//失去焦点    var t_address=$(this).val()    if(t_address == "")    {        $(this).val("请输入邮箱地址")    }})</script>

具体代码3：children遍历

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMchild.aspx.cs" Inherits="jQueryDom_jQueryDOMchild" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p>一个段落<strong>haha<em>dd</em></strong></p>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    </div>
    </form>
</body>
</html>
<script>
//遍历节点：parent(),find(),filter()等
//chikdren()只抓该标签下一级的元素<em>不考虑
var v_body=$("body").children();
var v_p=$("p").children();
//alert(v_p.html)
var v_ul=$("ul").children();
//alert(v_body.length);//2个元素
//alert(v_p.length);//1个元素
//alert(v_ul.length);//3个元素
for(var i=0;i<v_ul.length;i++)
{
    //alert(v_ul.eq(i).html())//v_ul[i].innerHTML
}
//next() 抓匹配元素后面紧邻的同辈元素
var p1=$("p").next(); //<ul>
//prev() 抓匹配元素前面紧邻的同辈元素
var ul1=$("ul").prev();//<p>
//siblings() 抓取匹配元素前后所有的同辈元素
var p=$("p").siblings();
alert(p.html());
//closest() 用来获得最近的匹配元素，检查当前元素是否匹配，匹配直接返回元素本身，不匹配向上查找父元素，直到有匹配的，没有就返回空jquery对象
//
$(window.document).bind("click",function(e){
    $(e.target).closest("li").css("color","red");

$(e.target).closest("li").css({"fontSize":"18px","backgroundColor":"#888888"});
})
//alert("parent")
var li3=$("li").parent();//匹配元素的父元素
//alert(li3.html());
</script>

具体代码4 ：eg

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMeg.aspx.cs" Inherits="jQueryDom_jQueryDOMeg" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title>    <script src="../scriptJquery/jquery-1.3.2.min.js"></script></head><body>    <form id="form1" runat="server">    <div>    <select id="single">    <option>选择1号</option>    <option>选择2号</option>    <option>选择3号</option>    </select><br /><br />    <select id="multiple" multiple="multiple" style="height:100px">    <option selected ="selected">选择1号</option>    <option>选择2号</option>    <option>选择3号</option>    <option>选择4号</option>    <option selected="selected">选择5号</option>    </select><br />    <input type="checkbox" value="check1" />多选1    <input type="checkbox" value="check2" />多选2    <input type="checkbox" value="check3" />多选3    <input type="checkbox" value="check4" />多选4<br />    <input type="radio" value="radio1" name="radio1" />单选1    <input type="radio" value="radio2" name="radio1" />单选2    <input type="radio" value="radio3" name="radio1" />单选3<br />    </div>    </form></body></html><script>$("#single").val("选择1号");$("#single").val("选择2号");//val()从上往下读的$("#multiple").val(["选择2号","选择3号"]);$("#single option:eq(2)").attr("selected",true);$("[value=radio2]:radio").attr("checked",true);$("[type=checkbox]").val(["check2","check3"]);//$(":checkbox").val(["check2","check3"])//给checkbox赋值，选中</script>