jquery dom 操作-优快云博客

本文通过一个具体的示例展示了如何使用jQuery进行DOM操作，包括元素的创建、插入、删除及事件绑定等基本操作，并介绍了如何利用jQuery简化JavaScript编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style>
	.bg1{
		background-color:green;
	}
	.txt{
		color:blue;
	}
  </style>
  <script src="jquery-1.4.4.js" type="text/javascript"></script>

 </HEAD>

 <BODY>
	<div>
		<a href='aa.html' title="alink">link</a>
	</div>

	<hr/>
	<div>
		<ul>
			<li id="apple" title='click change to apple'>苹果</li>
		</ul>
	</div>
	<div id="sel" style="border:1px"></div>

	<hr/>
	<i>点击我会被strong标签包裹</i> 中间
	<i id="i2" title="click test wrap"> 另一个i</i>

	<hr/>
	<button id="b1" >交替变换样式</button>
	<button id="b2" class="txt" >点击移除样式</button>

	<hr/>
	<font>css<font>
 </BODY>

<script language="javascript" >
//alert($("a").attr("href"));  //attr() 获取某个节点的属性
$("a").attr("title","link"); //设置属性
$("a").removeAttr("href");  //移除属性

//创建节点 $(html)
var $d1 = $("<li>香蕉</li>");
var $d2 = $("<li>橘子</li>");
var $d3 = $("<li title='梨'>梨</>");
var $d4 = $("<p>before1</p>");
var $d5 = $("<p>before2</p>");
var $d6 = $("<p>after1</p>");
var $d7 = $("<p>after2</p>");

var $d8 = $("<li>西瓜</li>");
var $d9 = $("<li>葡萄</li>");

//将节点追加到ul,在最后
$("ul").append($d1).append($d2);
$d3.appendTo($("ul"));
//在ul节点前节点
$("ul").before($d4);
$d5.insertBefore($("ul"));
//在ul节点后添加节点
$("ul").after($d6);
$d7.insertAfter($("ul"));
//在ul节点的内部最前面添加节点
$("ul").prepend($d8);
$d9.prependTo($("ul"));

//绑定click事件
$("ul li").click(function(){
	//当点击li时,将当前li copy到id为sel的元素下
	//如果要想把li所关联的事件行为一并复杂，给clone()方法传递参数true
	$(this).clone(true).appendTo("#sel"); 
});

$("#sel").click(function(){
	//当点击id为sel的div时，将当前元素移除（本身也移除），
	//remove()方法返回结果是当前被移除元素
	var $rm = $(this).remove(); 
	//将被移除的元素添加到body下
	$("body").append($rm); 
})

$("#apple").click(function (){
	//点击当前元素会被<li id='apple'>apple</li>所替换
	$(this).replaceWith("<li id='apple'>apple</li>");
})

$("i").click(function(){
	//将当前元素用<strong>标签包裹
	$(this).wrap("<strong></strong>"); 
})

$("#i2").click(function(){
	//将当前元素用font标签包裹
	$(this).wrapAll("<font color='red'></font>"); 
	//将当前元素内的内容用span包裹
	$(this).wrapInner("<span style='background-color:#000000'></span>");

})

$("#b1").click(function(){
	//交替样式显示，判断当前元素是否有该样式，有remove，没有add
	$(this).toggleClass("bg1");
})

$("#b2").click(function(){
	//移除当前元素制定的样式，如果不加参数，移除所有
	$(this).removeClass("txt"); 
})
//获取样式 $().attr("class")
//	添加：(1)$().addClass("xx")添加制定的元素 ||
//        (2)$().attr("class","xx")
//        (1)是追加，（2）如果原来有是替换
//判断是否含有某样式 $().hasClass("xx");


/*
	$().html() 等同于js的innerHTML
	$().text() 等同于js的innerText
	$().val()  等同于js的value属性
*/
/*
  $().children() 当前元素的所有子元素
  $().next()  下一个紧邻兄弟元素
  $().prev()   上一个紧邻的兄弟元素
  $().siblings() 所有的兄弟元素
  //最近的匹配元素,搜先test itself，不会查找兄弟节点，逐级查找父节点
  $().closest() 
  --alert($("li").closest("div").html()); 
*/

/*
	$().css()和attr()方法一样使用
	$().css("color"); //获取
	$().css("color","red")//设置

*/
//一次设置多个css值
$("font").css({"fontSize":"30px",
	"backgroundColor":"yellow",
	"width":"100px"});
alert($("font").height()+" "+$("font").width());//高，宽

</script>
</HTML>