【Jquery】- DOM 節點操作

Jquery DOM 比較

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
    /*
    * jquery物件是對dom物件的一種包裝類，dom和jquery物件不可以互相呼叫（js輕量級框架）
    * 區分大小寫:jquery找不到物件的話不會報錯（dom會報錯undefine）
    */
    function show(){
        var domValue=document.getElementById("info").value;  //dom物件
        alert("dom*******"+domValue);
        var $jquery=$('#info'); //jquery物件：表示id=info所有元素集合
        var jqueryValue=$jquery[0].value;  //$jquery[0]：將jquery物件轉換成dom物件
        alert("jquery*****"+jqueryValue);
    }
</script>
</head>
<body><br>
<img alt="" src="img/1.jpg"><br>
<input type="text" id="info">
<input type="button" value="顯示" onclick="show();"/>
</body>
</html>

DOM 節點

DOM 是 Document Object Model（文件物件模型）的縮寫,瀏覽器在解析HTML文件時會將HTML文件在記憶體中對映成一個邏輯模型DOM樹，每個HTML的標籤都是該DOM樹上的葉子，瀏覽器解析時根據節點在DOM樹上的情況按照相應的規範進行渲染顯示。

HTML DOM節點操作：

定義輸入框和列表節點：

<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="gz" value="guangzhou">廣州</li>
</ul><br/>

<span style="background-color: yellow;">span01----</span>Dom Tree<span style="background-color: yellow;">----span02</span>

單個Node節點操作：

/*append：類似於DOM裡面的appendChild()函式,將新元素加入該元素內部做為子節點
 *appned:父元素內部加入子元素
 *appendTo:子元素追加到父元素內部 
 */
$("#b1").click(function(){
	
var LiNode=$("<li></li>");  //構造Li元素節點
LiNode.attr("id","sz");
LiNode.attr("value","shenzhen");
LiNode.text("深圳");
$("#city").append(LiNode);
});

/**
 * before:兄弟元素之前加入新的元素
 * after：兄弟元素之後加入新的兄弟元素
 * insertAfter：新元素加入存在的兄弟元素後面
 * insertBefore:新元素加入存在的兄弟元素前面
 */
$("#b2").click(function(){
var LiNode=$("<li id='sz' value='shenzhen'><font color='aquamarine'>深圳</font></li>");  
    LiNode.insertAfter($("#gz"));
});

$("#b3").click(function(){
 var LiNode=document.createElement("li");
     LiNode.setAttribute("id","sz");
     LiNode.setAttribute("value","shenzhen");
     LiNode.innerHTML="深圳";
     document.getElementById("gz").appendChild(LiNode);
});

$("#b4").click(function(){
    var LiNode=$("<li id='sz' value='shenzhen'><font color='#FF0000'>深圳</font></li>");  
    $("#sh").before(LiNode);
});

效果圖：

Node節點類處理：

//清除所有的span元素節點
$("#b5").click(function(){
	$("span").empty(); //清空元素節點內容
	setTimeout(function(){
		//$("span").remove();  //刪除元素節點 
		$("<button>span替換節點</button>").replaceAll($("span"));
	},5000);
});

/**
 * clone:預設淺克隆，只會簡單克隆元素的屬性
 * clone(true):深克隆，元素的屬性和方法都會進行復制，屬於完整獨立空間
 */
$("#b6").click(function(){
	$("#b6").after($("#b5").clone(true));
});

效果圖：

注意：這裡設定定時器的操作主要是為了更好顯示清空(並非刪除節點)、替換節點的效果。

Jquery Dom 基礎入門

dom.css:

.one{
width: 140px;
height: 140px;
margin: 20px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}

.two{
width: 80px;
height: 80px;
margin: 20px;
background: yellow;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}

引入層疊樣式表dom.css：

    <link rel="stylesheet" href="js/dom.css" type="text/css"/>

介面

<input type="button" value="first獲取元素樣式"  id="b1"/><br>
<input type="button" value="second追加元素樣式"  id="b2"/><br>
<input type="button" value="first移除樣式:(刪除id為first的.one 樣式) "  id="b3"/><br>
<input type="button" value="first樣式切換"  id="b4"/><br>
<input type="button"  value="second判斷元素樣式" id="b5"/><br>
	   
<div id="first" class="one">id="first" class="one"
<div class="two">first-first</div>
</div>
<div id="second">id="second"</div>
<br>

<a href="www.sohu.com">sohu</a>

js操作邏輯

/*
*attr(name):獲取元素屬性為name的值
*attr(key,value);給元素增加屬性key,屬性值為value
*/
$("#b1").click(function(){
var $obj=$("#first").attr("class");   
   	alert("class屬性值："+$obj);
});
   
$("#b2").click(function(){
//$("#second").attr("class","two");   
//$("#first").attr("class","two");   //若原元素中含有相同屬性，則會被覆蓋
//方法2
   $("#second").addClass("two"); 
});
   
$("#b3").click(function(){
  //$("#first").removeClass();     //等價於$("#first").removeClass("one"); 
      $("#first").removeAttr("class");
});

$("#b4").click(function(){
   $("#first").toggleClass("two");  //新舊樣式切換
});

$("#b5").click(function(){
     alert("second應用.two樣式:"+$("#second").hasClass("two"));   //進行新增屬性操作後true:dom樹在記憶體執行，不會改變原始碼
});

//$href = $('a').attr('href');

效果：

Dom 節點動態建立

Jquery表單元素的動態增長的主要原理是通過構建新的Dom節點新增到原先的Dom樹，從而實現相應的效果。

Dom節點動態建立：

<form action="" id="todoForm" >
<label>請在下列輸入框中輸入內容：</label><br>
<input type="text" id="todoInput">
<input type="submit" value="提交">
</form><br>
<p id="todoCount"></p>
<ol id="todoList"></ol>

js操作邏輯

$(function(){

    function count(){
        var length=$("#todoList").children().length;
        $("#todoCount").html(length>0 ? "現有"+length+"項todoList!" : "");
    }

    $("#todoForm").submit(function(e){
        e.preventDefault();  //阻止頁面自動提交表單
        var input=$("#todoInput").val();
        $("#todoList").append("<li>"+input+"&nbsp;&nbsp;<a class='toDelete' href='###'>delete</a></li>");
        $("#todoInput").val('')
        count();
    });

    //物件上繫結click事件
    $("#todoList").on('click','.toDelete',function(){
        $(this).parent().remove();//常用的刪除目標節點的方法
        count();
    });
});

效果圖：

【Jquery】- DOM 節點操作

Jquery DOM 比較 <html> <head> &

【轉】Dom節點操作常用方法

1.訪問/獲取節點 document.getElementById(id);　　　　　　　　　　//返回對擁有指定id的第一個物件進行訪問 document.getElementsByName(name);　　　　　　//返回帶有指定名稱的節點集合　　注意拼寫:Elements docum

【轉】JavaScript 節點操作以及DOMDocument屬性和方法

表示位置 clas 句柄 doc elements nta XML sele 最近發現DOMDocument對象很重要,還有XMLHTTP也很重要註意大小寫一定不能弄錯. 屬性: 1Attributes 存儲節點的屬性列表(只讀) 2childNodes 存儲節點的子

jQuery教程-DOM節點操作及位置和大小 - 04

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.createElment('d

jQuery教程-DOM節點操作及位置和大小

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.create

jQuery 之 DOM節點操作及位置和大小

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.createElment(

【jquery】刪除節點新增節點找兄弟節點

一些簡單的內容, 加深印象記錄下來： $().empty(); //該方法會刪除當前節點下的所有子節點，請注意當前節點不會被刪除 $().remove(); //該方法會刪除當前節點下的所有子節點，請注意當前節點會被刪除 $().append('<

【javascript】DOM操作方法（1）——節點屬性

demo1 tex rip tar nerd 屬於 fin ntb art 一、節點屬性Node.nodeName //返回節點名稱，只讀 Node.nodeType //返回節點類型的常數值，只讀 Node.nodeValue //返回Text或Comment

【JavaScript】DOM—對節點的操作

1、獲得節點（1）獲得頁面中指定id的節點物件 document.getElementById("id的字串")；（2）獲得頁面中所有標籤名符合要求的標籤 document.getElements

【jQuery】jQuery的DOM操作

注意：jQuery是一個集合，所有很多時候返回值也是一個集合 1.DOM節點的建立 $("html程式碼") 例$("<div></div>") 2.DOM節點的插入內部隊尾插入： $(olds).append(new); $(new)

【JQuery】JQuery學習筆記：JQuery操作HTML，即JQuery DOM操作

1，jQuery DOM操作，設定或獲得內容：設定，在（）內填入內容即可，有回撥函式； text() - 設定或返回所選元素的文字內容 html() - 設定或返回所選元素的內容（包括 HTML 標記） val() - 設定或返回表單欄位的值 2，jQuery D

jQuery DOM節點操作

使用 strong cti html ndt pty index all taf 一、創建節點 var box = $(‘<div id =box>節點</div>‘); //創建一個節點 $(‘body‘).appended(box);　　　　　

JQuery---選擇器、DOM節點操作練習

span gif .text ide none tle pre splay body 一、練習一 1、需求效果分析： 2、代碼示例： 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/

jQuery DOM節點操作方法大全

dom jquery 元素操作 append(content | fn)：向每個匹配的元素內部追加內容。參考：http://jquery.cuishifeng.cn/append.html例如：向所有段落中追加一些HTML標記。<p>I would like to say: </

【jQuery】對於複選框操作的attr與prop

這個是在jQuery1.6版本之後出現的鬼東西。受影響的主要有下拉列表select與複選框checkbox。眾所周知，在jQuery中可以用attr()取出節點的屬性，然而對於checkbox卻不是這樣了，比如我要取出其是否被選中的屬性checked，attr("check

【JQUERY】獲取元素(父節點,子節點,兄弟節點)

jQuery.parent(expr) //找父元素jQuery.parents(expr) //找到所有祖先元素，不限於父元素jQuery.children(expr) //查詢所有子元素，只會找到直接的孩子節點，不會返回

【原】無腦操作：EasyUI Tree實現左鍵只選擇葉子節點、右鍵浮動選單實現增刪改

1 // 記錄新增還是修改 2 var flag; 3 // 臨時儲存選中節點資料 4 var tempNode; 5 6 // 頁面載入 7 $(function () { 8 // 選單樹繫結資料 9 $('#deptTree').

【jQuery】對網頁節點的增刪改查

本文與《【JavaScript】網頁節點的增刪改查》（點選開啟連結）為姊妹篇，其實JavaScript對DOM的操作已經總結了很久的，而對於jQuery對網頁節點的操作，雖然一直在用，但一直沒有好好總結一下，實在是不應該。下面舉同樣的例子來說明這個問題：如上圖，提供3

【Jquery】jQuery獲取URL參數的兩種方法

ont ras mil scrip line 兩種方法 lower quest request jQuery獲取URL參數的關鍵是獲取到URL，然後對URL進行過濾處理，取出參數。 location.href是取得URL。location.search是取得URL“？

【jQuery】動畫小練習

current href slow alt cart () chan move == 1.jQuery部分代碼如下 <script type="text/javascript"> $(function(){ var page = 1; var

【Jquery】- DOM 節點操作

Jquery DOM 比較

DOM 節點

注意：這裡設定定時器的操作主要是為了更好顯示清空(並非刪除節點)、替換節點的效果。

Jquery Dom 基礎入門

Dom 節點動態建立

相關推薦