JQuery进行dom操作

        jquery对html的dom操作进行了封装,其操作比之前便捷了许多。

   下面是示例:

   html代码:

  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    
	     <script src="../jquery/jquery-1.7.2.js">
	     </script>
	    
	     <script src="../jquery/dom.js">
	     </script>
	     
	</head>
	<body>
         <div id="d1" >我是div1</div>
         <div id="d2">我是div2</div>
         <div id="d3">我是div3</div>
         <div id="d4">我是div4</div>
         
         <input type="button" value="增加" id="btn1"/>
         
         <input type="button" value="删除div1" id="btn2"/>
         
          <input type="button" value="替换div2" id="btn3"/>
	</body>
</html>


jquery的增删改查操作的js代码

   

$(function()
{
    $("#btn1").click(fn1);
    $("#btn2").click(fn2);
    $("#btn3").click(fn3);
});

function fn1()
{
	//创建要增加的结点
	var div5 = $('<div id="d5">我是div55555,是新增的</div>');
	//插入新建的结点
	$("#d2").after(div5);
};

function fn2()
{
	var div1 = $('#d1');
	//直接删除
	div1.remove();
};

function fn3()
{
	var div1 = $('#d2');  
	var divnew = $("<div id='d6'>我是被替换的</div>");
	//替换
	div1.replaceWith(divnew);
}



你可能感兴趣的:(JQuery进行dom操作)