html-day05(使用jQuery操作CSS样式与Html)

一、使用jQuery操作CSS样式

• 设置单个属性

        css(name,value) ;

或

• 同时设置多个属性

css({name:value, name:value,name:value…}) ;

示例；$(this).css("border","5px solid #f5f5f5");

或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

 

• 获取属性值

      css(name)

 

• 追加样式

$(selector).addClass(class);

或   $(selector).addClass(class1 class2 … classN);

示例:

$("h2").mouseover(function() {

     $("p").addClass("content border");

});

 

• 移除样式

$(selector).removeClass("class") ;

或   $(selector).removeClass("class1 class2 … classN ") ;

示例:

$("h2").mouseout(function() {

        $("p").removeClass("text content");

});

 

• 切换样式

toggleClass()

模拟了addClass()与removeClass()实现样式切换的过程

语法:

$(selector).toggleClass(class) ;

示例:

$("h2").click(function() {

    $("p").toggleClass("content  border");

});

 

• 判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法:

$(selector). hasClass(class);

示例:

$("h2").mouseover(function() {

    if(!$("p").hasClass("content ")){

$("p").addClass("content ");

}

});

 

$("h2").mouseout(function() {

      if($("p").hasClass("content ")) {

$("p").removeClass("content ");

    }

});

 

二、HTML代码操作与标签内容操作

• 获取元素中的html代码

$("div.left").html();

• 设置元素中的html代码

$("div.left").html("<div class='content'>…</div>");

 

1. 标签内容操作

 

• 获取元素中的文本内容

$("div.left").text();

 

• 设置元素中的文本内容

$("div.left").text("<div class='content'>…</div>");

 

 

• html( ) 和text( )方法的区别

html()设置可以包含文本和标签

text() 设置只能是文本

 

三、属性值操作

• 获取元素的value属性值

$(this).val();

• 设置元素的value属性值

$(this).val(value);

 

jQuery中节点操作

• 元素内部插入子节点

1. append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

 

1. prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

 

• 元素外部插入同辈节点

after(content)

$(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

 

before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

 

• 删除节点

remove()：删除整个节点  $(selector).remove([expr]);

empty()：清空节点内容  $(selector).empty();

 

• 替换节点

replaceWith()

示例:

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

 

 

• clone()用于复制某个节点

$(selector).clone([includeEvents]) ;

参数ture或flase, true复制事件处理，flase时反之