<html>
<head>
<script language='javascript' type='text/javascript'src='jquery-1.11.1.js'></script>
</head>
<body>
<a href="www.baidu.com">hello</a>
<div class="test"></div>
<span></span>
<button>点击我</button>
<li>1</li>
<li>2</li>
<li>3</li>
<script>
/*jQuery 操作DOM元素*/
//元素的属性
$("div").html($("a").attr('href'));
// 添加属性
$("span").attr('id','11');
// 移除属性
$("span").removeAttr('id')
$("div").text("<h3>text</h3>") //元素的内容(不带)
$("div").html("<h3>html</h3>") //元素的内容(带标签)
// 添加样式
$("div").addClass("css样式")
$("div").css({"background":"red","color":"white"});
// 移除样式、class的属性样式
$("div").removeClass("css样式");
// h3元素追加div内尾部
$("div").append("<h3>我是append生成的</h3>");
$("<h2>我是appendto生成的</h2>").appendTo(".test");
// 元素之前插入标签
$("div").before("<h4>我是before</h4>")
$("div").after("<h4>我是after</h4>")
// 克隆
$("body").append($("a").clone());
// 替换标签(选择器)
//$(selector).replaceWith(content)
//$(content).replaceAll(selector)
$("h4").replaceWith("<h3>我是replacewith替换的<h3>")
// each遍历
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
// remove()方法删除所选元素本身和子元素
// empty()方法则只删除所选元素的子元素
</script>
</body>
</html>
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
