jquery DOM操作

<style>
	.aa{color: yellow;}
	.bb{background-color: pink;}
</style>

	<p title="hello" class="aa bb">你最喜欢的水果是？</p>
	<button>点击</button>
	<ul>
		<li>葡萄</li>
		<li>柚子</li>
		<li>草莓</li>
	</ul>
	<strong>you like?</strong>
	<strong>you like?</strong>

	<script type="text/javascript">
		//弹出li下标为1的文本内容
		alert($("ul li:eq(1)").text())
		//弹出 p  的属性内容
		alert($("p").attr("title"))

		$(function(){
			//创建元素节点
			var $li_1=$("<li></li>")
			var $li_2=$("<li></li>")
			$("ul").append($li_1).append($li_2)

			//创建文本节点
			var $li_1=$("<li>香蕉</li>")
			var $li_2=$("<li>苹果</li>")
			$("ul").append($li_1).append($li_2)

			//删除节点
			$("ul li:eq(1)").remove()

			//替换节点
			//$("p").replaceWith("你不喜欢我")

			//包裹节点
			//$("strong").wrap("<b></b>")
			$("p").wrap("<strong></strong>")
			$("strong").wrapAll("<b></b>")

			//设置属性值
			$("p").attr("title","hi")

			//删除属性
			$("p").removeAttr("title")

			//移除样式
			$("p").removeClass("aa bb")

			//切换样式
			$("button").click(function(){
				$("p").toggleClass("aa bb")
			})


		})

		.bind("click",function(e){
			$(e.target).closest("li").css("color","red")
		})

		$("ul li").click(function(){
			//复制节点
			$(this).clone().appendTo("ul")
		})
	</script>

 

转载于:https://my.oschina.net/xiaojunx/blog/846578