jQuery

第八章使用jQuery操作Dom

设置和获取样式

css(name,value) ; 设置单个
css({name:value, name:value,name:value…}) ;设置多个
css(name); 获取属性值

追加和移除样式

追加addClass():

$(selector).addClass(class); 加一个样式
 $(selector).addClass(class1 class2 … classN);加多个样式

移除removeCalss();

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

判断是否含指定样式

$(selector). hasClass(class);

HTML代码操作html()

$("div.left").html();   获取元素中的html代码
 $("div.left").html("<div class='content'>…</div>"); 设置元素中的html代码

标签内容操作text()

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

属性值操作val()

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

利用工厂函数创建节点元素

var $newNode=$("<li></li>");
 var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

插入节点

元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中 如$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1.prependTo ("ul");

元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");

删除节点

remove()：删除整个节点
empty()：清空节点内容
detach()；删除整个节点，保留元素的绑定事件、附加的数据

替换节点replaceWith()和replaceAll()

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


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

复制节点

$(selector).clone([includeEvents]) --参数true或false, true复制事件处理，false时反之


$(".gameList li:eq(1)").click(function(){
     $(this).clone(true).appendTo(".gameList");
    })
$(".gameList li:eq(2)").click(function(){
     $(this).clone(false).appendTo(".gameList");
    })

获取和设置元素属性

$(selector).attr([name]) ;获取属性值
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;设置多个属性的值

$(".contain img").attr({width:"200",height:"80"});

删除元素属性

$(selector).removeAttr(name) ;

$(".contain img").removeAttr("alt");

遍历子元素

children()用来获得元素中的所有子元素

$(selector).children([expr]);

var $section =$("section").children();
alert($section.length);

遍历同辈元素

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");
prev([expr])	用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange");

遍历前辈元素

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

parents()：元素的祖先元素

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

其他遍历方法

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

index--选择器的位置   element--当前的元素
$(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操作

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶