jquery(一)

最新推荐文章于 2024-08-30 11:12:09 发布

挥发的石灰

最新推荐文章于 2024-08-30 11:12:09 发布

阅读量421

点赞数 9

分类专栏： HTML 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/SJH184554558/article/details/135585925

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基本使用方法，包括选择器应用、样式和属性操作，以及内部追加、外部追加、替换、克隆和删除等DOM操作的实战示例。

摘要由CSDN通过智能技术生成

🌸基本使用

🍁两大特性

🌸操作文档

🌸样式操作

🌸属性操作

🌸文档操作

🍁内部追加

🍀原来界面

🍀追加后界面

🍁外部追加

🍀原来界面

🍀追加后界面

🍁替换,克隆,删除

基本使用

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>