JQuery操作DOM

最新推荐文章于 2024-07-05 14:21:58 发布

TWOFOUR_

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量141

点赞数

分类专栏： HTML 文章标签： JQuery操作DOM

本文链接：https://blog.csdn.net/qq_43868329/article/details/92838779

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

*JQuery操作DOM
一.jQuery操作样式
/ 单个样式 /
$(“li:first”).css(“color”,"#009933");
/ 多个样式 /
$(“li:eq(1)”).css({“color”:"#FFFF00",“background”:"#FFCCCC"});
/ 添加样式，引用style的.xxxxx /
$(" l i : e q (2) ") . a d d C l a s s (" l i s "); / * 判断有没有样式 * / i f ($ (“li:eq(2)”).hasClass(“lis”)){
/ 删除样式 /
$(“li:eq(2)”).removeClass(“lis”);
}
$(“input”).click(function(){
/ 样式切换 */
$(“li:last”).toggleClass(“chx”);
});
二.jQuery操作html
/获取标签中的html代码/
$(“ul”).html()
/指定标签中的html代码/
$(“ul”).html(“

大哥，我不做大哥好多年，我依旧这么Diao

”);

**三.jQuery操作text文本
	/*获取标签中的text代码*/
	$("li:first").text();
	/*指定标签中的text文本*/
	$("li:first").text("大哥，我不做大哥好多年，我依旧这么Diao");
	
四.jQuery操作value属性值
	/*获取标签中的value属性值*/
	$("input").val();
	/*指定标签中的value属性值*/
	$("input").val("王洪涛，呵呵，呵呵");
	
五.jQuery拼接元素
	$("ul").append("<li>大哥，我不做大哥好多年，我依旧这么Diao</li>");
	
六.jQuery操作节点
	/* 创建节点 */
	var $element=$("<li style='color:Fuchsia'>大哥</li>");
	
	/* 父子级后置追加节点 */
	/* $("ul").append($element);
	$element.appendTo($("ul"));
	 */
	
	/* 父子级前置追加节点 */
	/* $("ul").prepend($element);****