第四章 jQuery基本操作

1.设置和获取样式值

//设置单个属性
css(name,value) ;
//同时设置多个属性
css({name:value, name:value,name:value…}) ;
//获取属性值
css(name)
​
$(this).css("border","5px solid #f5f5f5");
//设置透明度
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

2.追加和移除样式

//追加样式
$(selector).addClass(class1 class2 … classN);
​
$("h2").mouseover(function() {
     $("p").addClass("content border");
});
​
//移除样式
$(selector).removeClass("class1 class2 … classN ") ;
​
$("h2").mouseout(function() {
        $("p").removeClass("text content");
});

3.切换样式

toggleClass()

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

$(selector).toggleClass(class) ;
​
$("h2").click(function() {
    $("p").toggleClass("content  border");
});

4.判断是否含指定的样式

hasClass( )方法

$(selector). hasClass(class);
​
$("h2").mouseover(function() {
    if(!$("p").hasClass("content ")){
    $("p").addClass("content ");
    }
});

5.标签内容操作

//获取元素中的文本内容
$("div.left").text();
//设置元素中的文本内容
$("div.left").text("<div class='content'>…</div>");

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

6.属性值操作

val()可以获取或设置元素的value属性值

//获取元素的value属性值
$(this).val();
​
//设置元素的value属性值
$(this).val(value);

7.节点操作

元素内部插入子节点

元素外部插入同辈节点

删除节点

remove()：删除整个节点
$(selector).remove([expr]);
​
empty()：清空节点内容
$(selector).empty();
​
detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点

replaceWith()和replaceAll()用于替换某个节点

replaceWith()和replaceAll()用于替换某个节点
var $newNode1 = $("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
​
$($newNode1).replaceAll(".gameList li:eq(2)");

复制节点

clone()用于复制某个节点

$(selector).clone([includeEvents]) ;
//参数ture或flase, true复制事件处理，flase时反之
​
$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

8.获取与设置元素属性

attr()用来获取与设置元素属性

//获取属性值
$(selector).attr([name]) ;
//设置多个属性的值
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
​
$(".contain img").attr({width:"200",height:"80"});

删除元素属性

removeAttr()用来删除元素的属性

$(selector).removeAttr(name) ;
​
//删除元素的alt属性
$(".contain img").removeAttr("alt");

9.节点遍历

遍历子元素

children()方法:可以用来获取元素的所有子元素

$(selector).children([expr]);
​
var $section =$("section").children();
alert($section.length);
//获取<section>的子元素，但不包含子元素的子元素

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

$("li:eq(1)").parent().addClass("orange");
$("li:eq(1)").parents().addClass("orange");

each( ) ：规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element)) ;
$("img").click(function(){
       $("li").each(function(){
           var str=$(this).text()+"<br>";
           $("section").append(str);
       })
   });

end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");

CSS-DOM操作