jQuery学习笔记——jQuery中DOM操作（2）

最新推荐文章于 2022-09-16 14:43:31 发布

jsfantasy

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量207

点赞数

分类专栏： jQuery 文章标签： jquery addClass toggle toggleClass blur

本文链接：https://blog.csdn.net/november_chopin/article/details/77183373

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--
	作者：1377378268@qq.com
	时间：2017-08-12
	描述：jQuery中的DOM操作方法2
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery中的DOM操作</title>
		<style type="text/css">
			.anthor{
				font-style: italic;
			}
		</style>
	</head>
	<body>
		
		<p title="选择你喜欢的水果">选择你喜欢的水果</p>
		<ul>
			<li title="苹果">苹果</li>
			<li title="橘子">橘子</li>
			<li title="菠萝">菠萝</li>
		</ul>
	</body>
	<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		/*
		 * 属性操作
		 * 		attr()方法来获取和设置属性
		 * 		removeAttr()方法来删除属性
		 */
		
		//获取属性
		//var txt = $('p').attr('title');
		//设置单个属性值
		//$('p').attr('title','my title');
		//设置多个属性值
		//$('p').attr({"title":"my title","name":"test"})//将名/值形式的对象设置为匹配元素的属性
		//类似方法还有html() text() height() width() val() css()等方法
		
		//删除属性
		//$('p').removeAttr("title");
		
		/*
		 * 追加样式  addClass()方法
		 * 移除样式  removeClass()方法
		 */
		$("p").addClass("anthor");
		$("p").removeClass('anthor');
		
		
		/*切换样式*/
		//toggle()控制行为上的重复切换
		/*
		$("p").toggle(function(){
			//代码3
		},function(){
			//代码4
		})
		*/
		
		//上述代码会重复切换代码3和代码4
		//toggleClass()控制样式上的重复切换
		//$("p").toggleClass("anthor");//重复切换类名“anthor”
		
		/*判断是否含有某个样式*/
		//hasClass();		如果有返回true，否则返回false
		
		/*
		 * 其他方法
		 * 1、html()方法：读取或设置某个元素的HTML内容
		 * 2、text()方法：读取或设置某个元素中的文本内容
		 * 3、val()方法：用来设置和获取元素的值
		 * 4、focus()方法：相当于JavaScript中的onfocus()方法，作用是处理获得焦点的事件
		 * 5、blur()方法：相当于JavaScript中的onblur()方法，作用是处理失去焦点的事件
		 * 				defaultValue属性：包含该表单元素的初始值
		 */
		
		/*
		 * 遍历节点
		 * 1、children()方法：取得匹配元素的子元素的集合
		 * 2、next()方法：取得匹配元素后面紧邻的同辈元素的集合
		 * 3、prev()方法：取得匹配元素前面紧邻的同辈元素的集合
		 * 4、siblings():取得匹配元素前后所有同辈元素的集合
		 * 5、closest():方法用于取得最近的匹配元素：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
		 * 6、parent()方法：获得集合中每个匹配元素的父级元素
		 * 7、parents()方法:获得集合中每个匹配元素的祖先元素
		 */
		
		/*
		 * CSS-DOM操作
		 * 1、css()方法获取和设置元素的属性值
		 * 2、height()方法：获取和设置元素在页面中的实际高度
		 * 3、width()方法：获取和设置元素在页面中的实际宽度
		 * 4、offset()方法：获取元素在当前视窗的相对偏移，返回的对象包含top和left属性
		 * 5、position()方法：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回的对象包含top和left属性
		 * 6、scrollTop()方法和scrollLeft()方法分别获取元素的滚动条距顶端和距左侧的距离
		 */
		/*var offset = $("p").offset();
		var left = offset.left;
		var top = offset.top;*/
	</script>
</html>

jsfantasy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记——jQuery中DOM操作（2）

 jQuery中的DOM操作 .anthor{ font-style: italic; } 选择你喜欢的水果苹果橘子菠萝 /* * 属性
复制链接

扫一扫

专栏目录