JQuery攻略（一） 基礎知識——選擇器 與 DOM

時間  2019-11-11
標籤 jquery 攻略 基礎 知識 選擇器 dom 欄目 JQuery 简体版
原文   原文鏈接

JQuery是功能豐富的Javascript庫，能夠幫助用戶絕不費力地把動態功能應用到網頁。javascript

JQuery具備許多強大的功能，包括訪問部分網頁，快速修改網頁內容，添加動畫，應用AJAX技術等等。css

正因如此，每次使用時候對忘記或者不熟悉的地方非常苦惱，因此下定決心下JQuery的知識點，以便之後查閱，也可以讓和我同樣的人一同窗習。下面就讓我開始吧！html

此章節有

1.1 JQuery的下載與實用java

1.2 DOM選擇器node

1.3 Javascript的延遲執行jquery

1.4 對css的操做web

1.5 多種HTMl元素的選擇 自定義選擇編程

1.6 經常使用DOM函數 children() parent() each() text() html() val() next()json

1.7 對DOM節點的操做 數組

1.1 JQuery的安裝

　　JQuery實際上是一個js文件。你能夠在官網 http://jquery.com/ 下載最新版本，（例子裏使用的是 jquery-1.4.1）下載後，將它添加到你的項目裏面去。而後引用它，至於怎麼引用，請看：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

　　在這個問題上，我寫的不夠詳細，js的試用並不止只有外部文件的引入。 那麼，咱們的問題是：

　　JavaScript腳本放在哪裏纔好？　　

　　JavaScript應放在哪裏 ？頁面中的JavaScripts會在瀏覽器加載頁面的時候被當即執行，咱們有時候並不但願老是這樣，有時候咱們想讓一段腳本在頁面加載的時候執行，而有時候咱們想在用戶觸發一個事件的時候執行腳本。下面咱們分狀況說說，JavaScript應放在哪裏。

　　1.當有些函數 需調用才執行或者有些事件需觸發才執行的腳本，咱們能夠將腳本放在HTML的head部分中,這樣能夠保證腳本在任何調用以前已經被加載。

　　2.當頁面加載時 需執行的腳本能夠放在HTML的body部分，這類腳本一般被用來生成頁面的內容。

　　3.當頁面加載後 需當即執行的腳本，咱們能夠放在最後，文檔加載以後執行。所幸的是，Jquery有事件控制，因此，這部分咱們能夠下載 head 引用的外部文件中。

　　HTML 代碼：

<!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>
    <title></title>
　　 <script type="text/javascript">
        $(document).ready(function () {
            alert("1.DOM文檔加載以後執行");
        });

        alert("2.只加載，等待調用");
    </script>
</head>
<body>
    <script type="text/javascript">
        alert("3.正在加載頁面，可幫助建立頁面元素");
    </script>
    <!-- HTML Code -->
    <script type="text/javascript">
        alert("4.加載頁面中");
    </script>
</body>
<script type="text/javascript">
    alert("5.頁面加載完成");
</script>
</html>
<script type="text/javascript">
    alert("6.頁面所有加載完");
</script>

出現的文字是 2，3，4，5，6，1。

 

1.2 DOM選擇器

　　JQuery有三種選擇器　　

1.元素選擇
$('P')  --選擇HTML文檔中全部P元素標籤
$('div')  --選擇HTML文檔中全部div元素標籤

2.id選擇器
$('#A')  --選擇HTML文檔中全部id=A的元素

3.class選擇器
$('.color')  --選擇HTML文檔中全部class=color的元素

 

1.3 Javascript的延遲執行

 

$(document).ready(
    function () {
        $("p").addClass("highlight");
    });

　　由於Js文件的引用在 <head>部分，全部當瀏覽器執行到<head>裏面的<script>腳本時，便會執行。js裏面有對各個元素的操做，但是問題在於 在加載執行js文件的時候，html元素並無被加載（元素在<body>部分）。因此咱們須要延遲js的執行，直到DOM加載完畢。

　　通知咱們文檔已經加載完畢的函數就是 $(document).ready(); 文檔加載完畢後，當即執行，且只執行一次。上面的例子是，經過addClass()方法將指定的CSS類應用到P標籤上。

　　延遲執行的簡寫

//1.標準寫法
$(document).ready(function () {

});
//2.簡寫-----這種寫法官方文檔上說不建議使用
$().ready(function () {

});
//3.簡寫
$(function () { 

});

　　根據aehyok同志的建議：

　　 「3.$(document).ready(); 文檔加載完畢後，當即執行，且只執行一次。——這應該沒有問題，不過我記得好像若是有多個$(document).ready()，那麼這幾個都會執行 對吧，確認一下。」

　　我作了如下實驗，驗證了，若是html中有多個 $(document).ready()是會一個個執行的，執行的順序，依照HTML解析順序，從上往下執行的。如代碼所示。

<head>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("0");
        });        
    </script>
    <script src="Js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("1");
        });        
    </script>
    <script src="Js/JScript.js" type="text/javascript"></script> <!-- alert("2"); -->
    <script src="Js/JScript1.js" type="text/javascript"></script> <!-- alert("3");-->
    <script type="text/javascript">
        $(document).ready(function () {
            alert("4");
        });        
    </script>
</head>
//JScript.js
$(document).ready(function () {
    alert("2");
});

//JScript1.js
$(document).ready(function () {
    alert("3");
});

　　前後彈出的是 1，2，3，4。至於0 爲何沒有彈出，由於在alert("0")的時候，jquery庫還沒引入進來。

　　說到執行順序，不得不提提window.onload()（js）與 $(document).ready(function () {});的差別了！

　　$(document).ready(function () {});是在頁面加載完全部DOM節點文檔結構後開始執行;

　　window.onload()則是在頁面加載完全部資源後纔開始執行。

　　也就是說window.onload()要等到全部圖片，外鏈資源都加載完後纔開始執行，也所以window.onload只容許定義一個（實際是能夠定義多個，但只有最後一個有效，至關於前面會被覆蓋掉），

　　而 $(document).ready(function () {});能夠容許定義多個，而且按照定義的前後順序前後執行。

 

1.4 對css的操做

　　1.4.1　　函數 addClass 對應的函數是removeClass 將一個CSS類，應用到網頁的某些元素上。

　　就如1.3的例子那樣。　　

$("#Element_id").addClass("ClassName");//ClassName css
$("#Element_id").removeClass("ClassNameToBeRemoved");

　　1.4.2　　設置CSS樣式屬性　　

$("#Elemet_id").css("property") //讀取樣式值
$('#Elemet_id').css('property', 'value') //設置一個樣式值
$('#Elemet_id').css({property1: 'value1', property2: 'value2'}) //設置多個樣式屬性

　　1.4.3　　對屬性的操做

$("#Elemet_id").attr('property'); //獲取屬性
$("#Elemet_id").attr('property','value'); //設置屬性
$("#Elemet_id").attr({'property1': 'value1', 'property2': 'value2'}); //設置多個屬性

 

1.5 多種HTMl元素的選擇 自定義選擇

　　1.選擇包含某段文字的元素　　

$("div:contains(猜)").addClass("contains");

　　2.選擇html文檔中的奇偶div元素

$("div:odd").addClass("odd"); //奇
$("div:even").addClass("even");//偶

　　3.指定標籤第N個元素

$("div:eq(3)").addClass("contains");//第四個,下標從0開始

　　4.屬性選擇

$("input[id=xx]") //屬性id
$("input[name=xx]") //屬性name
$("input[type=xx]") //屬性type

 

1.6 DOM的操做 函數們

 　　1.children() 函數  遍歷DOM樹，搜索指定元素的直接子節點。此方法僅在DOM樹中向下遍歷一層。例如：　　

<div id="has">
    <div>1</div>
    <div>2</div>
    <div>3
        <div>3.1</div> 
    </div>        
    <div>4
        <div>4.1</div>
    </div>            
</div>
//children()
var node = $("#has").children();
alert(node.length);

　　注意：這裏的長度是4，而不是6.

　　2. parent() 函數　　向上遍歷DOM樹,用於搜索每一個指定元素的直接親元素。這個和children()函數的遍歷範圍是同樣的，都是遍歷一層。

　　例子：

<div>1 
    <span id="span">1.1</span> 
    <span>1.2</span> 
    <span>1.3</span> 
    <div>1.4
        <p id="p">1.4.1</p>
    </div>
</div>
alert($("#p").parent().text()); // 1.4 , 1.4.1
alert($("#span").parent().text()); // 1,1.1,1.2,1.3,1.4 , 1.4.1

　　3. each() 函數 循環訪問集合中的每一個元素

<div id="has">
    <div>1</div>
    <div>2</div>
    <div>3
        <div>3.1</div> 
    </div>        
    <div>4
        <div>4.1</div>
    </div>            
</div>

 

var text = "";
$("#has").children().each(function () {
    text += $(this).text();
});
alert(text);

 　　each() 函數的遍歷　　

//數組的遍歷
var arr = ["Test1", "Test2", "Test3"];
$.each(arr, function (i, item) {
    alert(i);
    alert(item);
});

/*
i= 0,1,2
item = Test1,Test2,Test3
*/
/*********************************/
//二維數組的遍歷
var arr = [
                ["Test1", "Test2", "Test3"],
                ["Test4", "Test5", "Test6"],
                ["Test7", "Test8", "Test9"]
            ];
$.each(arr, function (i, item) {
    alert(i);
    alert(item);
});


i= 0,1,2

item=   Test1,Test2,Test3
            Test4,Test5,Test6
            Test7,Test8,Test9
/*********************************/
//二維數組的雙遍歷
var arr = [
            ["Test1", "Test2", "Test3"],
            ["Test4", "Test5", "Test6"],
            ["Test7", "Test8", "Test9"]
            ];
$.each(arr, function (i, item) {
    $.each(item, function (i, itemCell) {
        alert(i);
        alert(itemCell);
    });
/*
i = 0,1,2,0,1,2,0,1,2
itemCell = Test1,Test2,Test3,Test4,Test5,Test6,Test7,Test8,Test9
*/

/*********************************/
//遍歷json數據
var obj = { "1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6" };
$.each(obj, function (i, item) {
    alert(i);
    alert(item);
});

/*
i = 1,2,3,4,5,6
item=Test1,Test2,Test3,Test4,Test5,Test6
*/
/*********************************/

 

　　4. text() 函數

　　text()是jquery對象的一個方法，用於訪問指定元素的文本內容。它合併指定元素的文本內容，並以字符串的形式返回。　　

alert($('p').text());//彈出p標籤對文本 「段落」

　　 例子，循環div，得到文本 

<div id="has">
    <div>1</div>
    <div>2</div>
    <div>3
        <div>3.1</div> 
    </div>        
    <div>4
        <div>4.1</div>
    </div>            
</div>

 

$(document).ready(function () {
    $("div").children().each(function () {
        alert($(this).text());
    });
});

　　注意：這裏會彈出 1，2，3 3.1，3.1， 4 4.1， 4.1 ，有嵌套層的，父級全部子級的文本一塊兒彈出，以後再遍歷子級。

　　text()函數還有另一個用法，那就是給元素文本賦值。

$("#has").text("<h1>文本插入</h1>");

　　從這個例子能夠看到，本來在html中，並無文本顯示的，可咱們能夠用text(string) 函數賦值，參數什麼就賦值什麼，不解析標籤對，這也是與html()重大區別。

　　5.html() 函數　　 從指定元素中的第一個元素獲取html內容，以字符串的形式返回。

　　區別：text() 與 html() 函數的區別

　　區別一：text()函數可用於xml 文檔 和 html 文檔，而 html() 只能用於html文檔。

　　區別二：html()函數不只僅顯示文本，輸出的還包括標籤對和文本，而text()只有文本。

　　例子：　

//html
<div id="div">1 
    <span id="span">1.1</span> 
    <span>1.2</span> 
    <span>1.3</span> 
    <div>1.4
        <p id="p">1.4.1</p>
    </div>
</div>
// js
alert($("#div").html());
alert($("#div").text());

　　html()函數也還有另一個用法，那就是給元素文本賦值，相似與text()，但有着明顯的區別，看例子。

$("#has").html("<h1>文本插入</h1>");

　　咱們能夠看到用html(string) 函數賦值的文本，解析了標籤對，這也是與text()函數不一樣的地方。

 　　6. val()函數　　返回或設置被選元素的值，元素的值是經過 value 屬性設置的。該方法大多用於 input 元素。若是該方法未設置參數，則返回被選元素的當前值。

語法：$(selector).val(value)
<input id="input" type="text" value="input"/>
alert($("#input").val()); //彈出文本框的值 input
$("#input").val("change input value"); //爲文本框賦值

 　　7. next()函數　　得到匹配元素集合中每一個元素相鄰的同胞元素。若是提供選擇器，則取回匹配該選擇器的下一個同胞元素。

<body>    
<p>段落</p>
<p>段落</p>
<div id="div1">a</div>
<div>
    <div id="div2">b</div>
    <span>c</span>
</div>
<div id="div3">d</div>
</body>
$(document).ready(function () {
    $("p").next("div").css("background", "yellow");
 　　$("p").next().css("background", "yellow");
});

 

 1.7 對DOM節點的操做

　　DOM分類：DOM Core(核心):用途普遍 支持多種編程語言、HTML DOM:代碼簡短 只用於處理web文檔、CSS DOM:對樣式的操做

　　HTML DOM：操做DOM節點經常使用的函數有 prepend() , prependTo() , clone() , append() , appendTo() , before() , insertBefore() , after() , insertAfter() ,

　　　　　　　　　　remove() , detach() , empty() , replaceWith() , replaceAll() , wrap() , wrapAll() , warpInner()

 　　1. prepend 函數 與 prependTo 函數　　 在指定的元素前面插入指定的內容，並返回一個JQuery對象，內容能夠是文本、html元素或者jquery對象。

　　例子：　

<div>
    <p>12232</p>
    <input id="input" type="text" value="input" />
</div>

　　上面html代碼中，div中只有一個input標籤，下面利用prepend() 和 prependTo()動態添加元素，咱們來看看

　　prepend：　　

$("p").prepend('<h2>插入元素h2</h2>');
$("#input").prepend('<div>插入元素div</div>'); 
//在這裏我犯了一個錯，我覺得插入的元素會是與 p 或者 input 平級，萬萬沒想到的是，插入後的元素都是成了選擇元素的子級。

　　prependTo：

$('<h2>插入元素h2</h2>').prependTo("p");
$('<div>插入元素div</div>').prependTo("div");
//用ie 9的開發者工具沒能看到附加的值，用FF能看到。

　　提示：prepend() 和 prependTo() 方法做用相同。差別在於語法：內容和選擇器的位置，以及 prepend() 可以使用函數來插入內容。

　　2. clone()函數　　複製指定元素並返回一個新的jquery對象。

<div>
    <p>這是個段落。</p>
</div>
$("p").clone().prependTo("p");
$("p").prepend($("p").clone())

　　3. append()函數 與 appendTo()函數　　在被選元素的結尾（仍然在內部）插入指定內容。與　　prepend 函數 與 prependTo 函數 相對的函數　

<div>
    <p>這是個段落。</p>
</div>
$("p").append("<b>Hello world!</b>");
$("<b>Hello world!</b>").appendTo("p");

　　提示：append() 和 appendTo() 方法執行的任務相同。不一樣之處在於：內容的位置和選擇器。

　　4. before()函數 　　before() 方法在被選元素前插入指定的內容。此次不一樣與prepend() 函數的是被插入的元素並不在內部而是平級。

<div>
    <p>這是個段落。</p>
</div>
$("p").before("<p>Hello world!</p>");

　　5. insertBefore()　　在被選元素以前插入 HTML 標記或已有的元素。

<div>
    <p id="1">這是段落1。</p>
    <p>這是段落2。</p>
    <p>這是段落3。</p>
    <p>這是段落4。</p>
    <p id="5">這是段落5。</p>
</div>
$("<span>Hello world!</span>").insertBefore("#5");

　　提示：若是該方法用於已有元素，這些元素會被從當前位置移走，而後被添加到被選元素以前。

　　6. after() 函數 在被選元素後插入指定的內容。

<body>
    <p>段落</p>
</body>
 $("p").after("<p>Hello world!</p>");//與before()函數對應

　　7. insertAfter()函數 在被選元素以後插入 HTML 標記或已有的元素。

<body>
    <p>段落</p>
</body>
$("<span>Hello world!</span>").insertAfter("p");//與insertBefore()函數對應

 

　　DOM節點的移除 　　

　　　　1. remove()函數 　　移除被選元素，包括全部文本和子節點。

　　　　該方法不會把匹配的元素從 jQuery 對象中刪除，於是能夠在未來再使用這些匹配的元素。

　　　　但除了這個元素自己得以保留以外，remove() 不會保留元素的 jQuery 數據。其餘的好比綁定的事件、附加的數據等都會被移除。這一點與 detach() 不一樣。

<div>
    <p id="1">p1</p>
    <p id="P1">p2</p>
    <p id="P2">p3</p>
    <p id="P3">p4</p>
    <p id="P4">p5</p>
    <p id="P5">p6</p>
</div>
$(document).ready(function () {
    $("#1").remove();
    $("#P1").remove();
    $("#P2").remove();
});

　　　　2. detach() 函數　　移除被選元素，包括全部文本和子節點。

　　　　這個方法會保留 jQuery 對象中的匹配的元素，於是能夠在未來再使用這些匹配的元素。

　　　　detach() 會保留全部綁定的事件、附加的數據，這一點與 remove() 不一樣。

$(document).ready(function () {
    $("#1").detach();
    $("#P1").detach();
    $("#P2").detach();
});

　　DOM節點的清空

　　empty() 函數　　從被選元素移除全部內容，包括全部文本和子節點。

<div>div
    <p id="1">p1</p>
    <p id="P1">p2</p>
    <p id="P2">p3</p>
    <p id="P3">p4</p>
    <p id="P4">p5</p>
    <p id="P5">p6</p>
</div>
$(document).ready(function () {
    $("div").empty();    
})

　　DOM節點的替換　　　　

　　1.　　replaceWith() 函數　　將指定的 HTML 內容或元素替換被選元素。

<div>div
    <p id="1">p1</p>
    <p id="P1">p2</p>
    <p id="P2">p3</p>
    <p id="P3">p4</p>
    <p id="P4">p5</p>
    <p id="P5">p6</p>
</div>
$(document).ready(function () {
    $("#P1").replaceWith("<div>變成div了！</div>");        
});

　　2.　　replaceAll() 函數　　將指定的 HTML 內容或元素替換被選元素。

　　　　　提示：replaceAll() 與 replaceWith() 做用相同。差別在於語法：內容和選擇器的位置，以及 replaceWith() 可以使用函數進行替換。

<div>div
    <p id="1">p1</p>
    <p id="P1">p2</p>
    <p id="P2">p3</p>
    <p id="P3">p4</p>
    <p id="P4">p5</p>
    <p id="P5">p6</p>
</div>
$(document).ready(function () {
    $("#P1").replaceWith("<div>變成div了！</div>");
    $("<div>我也變成div了！</div>").replaceAll("#P2");
});

　　DOM節點的包裹解裹

　　1.　　wrap() 函數 把每一個被選元素放置在指定的 HTML 內容或元素中。unwrap() 解裹函數

<div>div
    <p id="1">p1</p>
    <div>
        <p id="P1">p2</p>
    </div>
    <p id="P2">p3</p>
    <p id="P3">p4</p>
    <p id="P4">p5</p>
    <p id="P5">p6</p>
</div>
$(document).ready(function () {
    $("#1").wrap("<div>被div包裹了</div>");
    $("#P1").unwrap().text("從父級div解脫了!");
});

2.　　wrapAll()函數　　將全部被選的元素放置在指定的 HTML 元素中

<p id="P1">p2</p>
<p id="P2">p3</p>
<p id="P3">p4</p>
<p id="P4">p5</p>
<p id="P5">p6</p>

$(document).ready(function () {
    $("P").wrapAll("<div>用div包裹</div>");
});

　　wrap() , wrapAll()的區別

$(document).ready(function () {
    $("P").wrap("<div>用div包裹</div>");
});

3.　　warpInner()函數　　使用指定的 HTML 內容或元素來包裹每一個被選元素中的全部內容 (inner HTML)。

<p id="P1">p2</p>
<p id="P2">p3</p>
<p id="P3">p4</p>
<p id="P4">p5</p>
<p id="P5">p6</p>

$(document).ready(function () {
    $("p").wrapInner("<b>加粗</b>");
});

　　 Jquery 的起航篇就告一段落了，下面的篇章更精彩！

jQuery系列連接彙總

JQuery攻略（二） Jquery手冊

JQuery攻略（三）數組與字符串

JQuery攻略（四）事件

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程