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

效果图：

来源：oschina

链接：https://my.oschina.net/u/4074151/blog/3016409

标签

ToDoList

jquery