码迷,mamicode.com
首页 > Web开发 > 详细

使用jQuery操作Dom

时间:2019-06-19 16:39:49      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:detach   代码   引用   false   克隆   rev   切换   rtb   last   

一.jQuery操作样式

/* 单个样式 */
$("li:first").css("color","#009933");
/* 多个样式 */
$("li:eq(1)").css({"color":"#FFFF00","background":"#FFCCCC"});
/* 添加样式,引用style的.xxxxx */
$("li:eq(2)").addClass("lis");
/* 判断有没有样式 */
if($("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("<li>大哥,我不做大哥好多年,我依旧这么Diao</li>");

  



三.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);
$element.prependTo($("ul")); */

/* 同辈追加节点 */
/* $("li:eq(2)").after($element); */
/* $("li:eq(2)").before($element); */
/* $element.insertBefore($("li:eq(2)")); */

/* 删除 */
/* $("li:first").remove(); */
/* $("li:first").empty(); */
/* $("li:first").detach(); */

/* 替换 */
/* $("li:first").replaceWith($element); */
/* $element.replaceAll($("li:first")); */



$("li:first").toggle(function(){
$(this).css("color","green");
},function(){
$(this).css("color","red");
}

);
/* 克隆 */
var $wht=$("li:first").clone(false);
$("ul").append($wht);

  


七.获取属性

/*设置单个属性*/
$("li:first").attr("style","color:red");
/*设置多个属性*/
$("li:first").attr({"style":"color:red","id":"wht2"});
/*设置删除属性*/
$("li:first").removeAttr("style");

  


八.遍历节点

/* 子元素 */
var lis=$("ul").children("li:eq(2)");

/*同辈元素*/
alert($("li:first").next().text());
alert($("li:eq(3)").prev().text());

  

使用jQuery操作Dom

标签:detach   代码   引用   false   克隆   rev   切换   rtb   last   

原文地址:https://www.cnblogs.com/wishsaber/p/11051937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!