第八章 使用jQuery操作DOM

一.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);

/* 删除 */

/* 替换 */

},function(){

}

;

/* 克隆 */

七.获取属性

/*设置单个属性*/

/*设置多个属性*/

/*设置删除属性*/

八.遍历节点

/* 子元素 */

/*同辈元素*/

/*祖先元素*/

/*父级元素*/