jQuery操作DOM

最新推荐文章于 2024-08-19 14:05:29 发布

原创最新推荐文章于 2024-08-19 14:05:29 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

在这里插入图片描述

jQuery操作DOM

样式操作方法

css()获取和设置样式
addClass()添加样式
removeClass()移除样式
toggleClass()样式切换
hasClass()判断样式

内容操作方法

html();代码操作（整个页面）
	$("div").html("聪聪");
text()内容操作（元素内容）
	$("div").text("聪聪");
val()属性值操作(输入的框中的值)
	alert($("#username").val());

节点操作

查找节点
	$("元素").index();
创建节点元素
	$("<li 属性>文字</li>");
插入节点
	内部
		a.append(b);把b添加到a中
		a.appendTo(b);把a添加到b中
		a.prepend(b);把b插入到a的前端
		a.prependTo(b);把a插入搭配b中的前边
	同辈
		a.after(b);将b插入到a之后
		a.insertAfter(b);将a插入到b之后
		a.before(b);将b插入到a之前
		a.insertBefore(b);将a插入到b之前
删除节点
	remove();删除整个节点
	empty();清空节点内容
	detach();删除整个节点，保留元素绑定事件、附加的数据
替换节点
	replaceWeth();
		$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
	replaceAll();
		$("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
复制节点
	clone([true]);true表示复制的元素可以处理

属性操作

attr()获取和设置元素属性
	$("div").attr({style:"background-color: #f00;width: 100px",id:"me"});
removeAttr()移除属性
	$("div").removeAttr("");
得到属性值
	alert($("div").attr("id"));

节点遍历

遍历元素
	children();获取子元素
遍历同辈
	next();下一个
	prev();上一个
	slibings();兄弟
遍历前辈
	parent()；父级元素
	parents();所有祖先
遍历其他
	each();规定为每个匹配元素规定运行的函数
	end();该节点到此结束