目录
🌸基本使用
🍁两大特性
🌸操作文档
🌸样式操作
🌸属性操作
🌸文档操作
🍁内部追加
🍀原来界面
🍁外部追加
🍀原来界面
基本使用
jquery是js的框架类库,基础语法:$(selector).action操作
选择器使用与css选择器类似,可以参考博文:http://t.csdnimg.cn/Fnk2b
两大特性
操作文档
样式操作
$(selector).css("样式名称","样式值")
具体样式设置可以参考博文(css样式):http://t.csdnimg.cn/gdJI1
属性操作
文档操作
内部追加
原来界面
<nav style="background-color: black;width: 100xp;height: 10px;"></nav>
<aside style="background-color: green;width: 100xp;height: 10px;"></aside>
<div style="background-color: aqua;">
<p>挥发的石灰</p>
</div>
追加后界面
<nav style="background-color: black;width: 100xp;height: 10px;"></nav>
<aside style="background-color: green;width: 100xp;height: 10px;"></aside>
<div style="background-color: aqua;">
<p>挥发的石灰</p>
</div>
<script>
$("nav").appendTo($("div"))
$("div").append("<p>挥发的石灰</p>")
$("aside").prependTo($("div"))
$("div").prepend("<p>加油</p>")
</script>
外部追加
原来界面
<div style="background-color: aqua;">
<nav style="background-color: black;width: 100xp;height: 10px;"></nav>
<aside style="background-color: green;width: 100xp;height: 10px;"></aside>
<p>挥发的石灰</p>
</div>
追加后界面
<div style="background-color: aqua;">
<nav style="background-color: black;width: 100xp;height: 10px;"></nav>
<aside style="background-color: green;width: 100xp;height: 10px;"></aside>
<p>挥发的石灰</p>
</div>
<script>
$("nav").insertAfter($("div"))
$("div").after("<p>挥发的石灰</p>")
$("aside").insertBefore($("div"))
$("div").before("<p>加油</p>")
</script>
替换,克隆,删除
<body>
<p>挥发的石灰</p>
<p>Hello</p>
<hr />
<span>World</span>
<div style="background-color: aqua;"></div>
<img src="./img/风景2.png" alt="" />
<script>
//克隆
var cl = $("span").clone();
$("div").replaceWith(cl)
//替换
$("p").replaceWith("<h1>hello world</h1>")
//$("<h1>hello world</h1>").replaceAll($("p"));
$("img").remove()
</script>
</body>