【Jquery】- DOM 節點操做

時間 2019-11-06

標籤 Jquery dom 節點欄目 JQuery 简体版

原文原文鏈接

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樹上的狀況按照相應的規範進行渲染顯示。javascript

HTML DOM節點操做：css

定義輸入框和列表節點：html

<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節點操做：java

/*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);
});

效果圖：jquery

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));
});

效果圖：app

注意：這裏設置定時器的操做主要是爲了更好顯示清空(並不是刪除節點)、替換節點的效果。框架

Jquery Dom 基礎入門

dom.css:dom

.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();
    });
});

效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。