JQuery进行dom操作

最新推荐文章于 2024-10-29 10:16:49 发布

shizhan1881

最新推荐文章于 2024-10-29 10:16:49 发布

阅读量670

点赞数

分类专栏： JQuery 文章标签： jquery div function button html input

本文链接：https://blog.csdn.net/linshizhan/article/details/7730662

版权

JQuery 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

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