文档章节

jquery DOM操作

hey--老妖
 hey--老妖
发布于 2017/02/26 15:47
字数 232
阅读 4
收藏 0
<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>

 

© 著作权归作者所有

共有 人打赏支持
hey--老妖
粉丝 3
博文 38
码字总数 21133
作品 0
潮州
前端工程师
私信 提问

暂无文章

webstorm 常用设置

###常用快捷键 ctrl+D//复制粘贴当前行ctrl+W//选中单词ctrl+←/→ //以单词作为边界跳光标位置ctrl+alt+L//格式化代码shift+tab/tab//减少/扩大缩进(可以在代码中减少行缩进)ct...

niuhongxia
29分钟前
5
0
Web前端自动化单元测试

Web前端自动化单元测试 单元测试的很多,比如辅助开发,预测开发,提高模块可靠性等。 还可以提高项目开发思路。 前提需求 本文基于nodejs环境,需要jasmine和 Karma。 nodejs:不多说,很突出...

DrChenXX
32分钟前
4
0
漫漫优化路,总会错几步(记一次接口优化)

最近做了一个搜索接口的优化,反复压测了四次,终于达到要求了,记录一下,晚上加个鸡腿🍗 业务逻辑 从OpenSearch中检索出数据,然后各种填充组装数据,最后返回 逻辑看似很简单,当初我也...

java菜分享
36分钟前
1
0
springboot 统一异常处理(包含统一数据校验)

1、统一异常处理的优势 在开发中,我们是否遇到过如下两种奇葩现象: (1)只要没有成功,不管什么原因,前端界面给出提示:服务端错误/异常。哪怕是数据校验不过,也这样提示(嗯,反正先把...

编程SHA
39分钟前
4
0
基于arcface 人脸识别demo使用教程

最近在研究虹软家的arcface 人脸识别 demo,现在就给大家分享一下官方的demo ** 工程如何使用? ** 1.下载代码: git clone https://github.com/asdfqwrasdf/ArcFaceDemo.git 或者直接下载压缩...

是哇兴哥棒棒哒
40分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部