jQuery學習筆錄3（jQuery學習筆記——DOM【1.DOM Core】）

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元素內的標籤 html
var $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>

jQuery學習筆錄3（jQuery學習筆記——DOM【1.DOM Core】）

jQuery學習筆錄3（jQuery學習筆記——DOM【1.DOM Core】）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結