第三章 jQuery中的DOM操作
1 查找节点
var $para = $(“p”);
var p_txt = $para.attr(“title”);
2 创建节点
var
l
i
1
=
li_1=
li1=("
- ");//创建第一个
- 元素
var l i 2 = li_2= li2=(" - ");//创建第二个
- 元素
( " u l " ) . a p p e n d ( ("ul").append( ("ul").append(li_1); //添加到ul节点中
( " u l " ) . a p p e n d ( ("ul").append( ("ul").append(li_2);
等价写法: ( " u l " ) . a p p e n d ( ("ul").append( ("ul").append(li_1).append($li_2); -
3 插入节点的方法
4 删除节点
1)var $li = $(“ul li:eq(1)”).remove();
$li.appendTo(“ul”);
当某个节点用remove删除后,该节点的子节点都会被删除。该方法返回值是一个指向已被删除节点的引用,因此可以在以后使用这些元素
2) var $li = $(ul li:eq(1)).detach();//删除元素
$li.appendTo(“ul”);//重新追加此元素,发现之前绑定的事件还在,如果使用remove()方法删除的话,那么之前的绑定将会失效
3) empty方法
$(“ul li:eq(1)”).empty();//获取第二个li元素后,清空此元素里的内容不包括元素本身5 复制节点
$(“ul li”).click(function(){
$(this).clone(true).appendTo(“ul”);//复制单击的节点,并将他追加到-
元素中
})
$(this).clone(true).appendTo(“ul”);
在clone方法中传递了一个参数true,它的含义是复制元素的同时复制元素中的绑定事件,因此该元素的副本也具有复制功能6 替换节点
$(“p”).replaceWith(“你最不喜欢的水果是?”);
等价写法:
$(“你最不喜欢的水果是?”).replaceAll(“p”);7 包裹节点
$(“strong”).wrap("");示例代码:
你最不喜欢的水果是?
你最不喜欢的水果是?$(“strong”).wrap("");
结果:
你最不喜欢的水果是?
你最不喜欢的水果是?$(“strong”).wrapAll("");
结果:
你最不喜欢的水果是?
你最不喜欢的水果是?
注意:如果被包裹的多个元素中有其他元素,其他元素会被放到包裹元素之后$(“strong”).wrapInner("");
结果:你最不喜欢的水果是?8 属性操作
1)获取属性与设置属性
var p_txt = $(“p”).attr(“title”);
var p_txt = $(“p”).attr(“title”,“aaa”);
2)删除属性
$(“p”).removeAttr(“title”);9 样式操作
- 获取样式与设置样式
var p_class = $(“p”).attr(“class”);
$(“p”).attr(“class”,“myclass”);
2)追加样式
3)移除样式
( " p " ) . r e m o v e C l a s s ( " h i g h " ) . r e m o v e C l a s s ( " a n o t h e r " ) ; 等 价 于 : ("p").removeClass("high").removeClass("another"); 等价于: ("p").removeClass("high").removeClass("another");等价于:(“p”).removeClass(“high another”);
$(“p”).removeClass(“high another”);//移除p元素的所有class
4)切换样式
$toggleBtn.toggle(function(){
//显示元素
},function(){
//隐藏元素
})
示例代码:
aaaaaaaa
$("p").toggleClass("another");//class的值会在myClass和myClass another中重复切换 5)判断是否含有某个样式 $("p").hasClass("another");10 设置和获取HTML、文本和值
1)var p_html = $(“div”).html();
$(“div”).html(“aaa
”);
2)var p_text = $(“p”).text();
$(“p”).text(“aaa”);
3)val()的用法
示例代码:
选择一号 选择二号 选择三号 选择1号 选择2号 选择3号 选择4号 操作: $("#single").val("选择二号"); $("#muliple").val("选择2号","选择3号"); $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); 等价写法: $("#single option:eq(1)").attr("selected",true); $("[value=radio2]:radio").attr("checked",true);11遍历节点
1)children()方法只考虑子元素而不考虑其它后代元素
2)var $p1 = $(“p”).next();//取出紧邻元素后的同辈元素,包括该元素的子元素
3)var $ul = $(“ul”).prev();//取出紧邻-
元素前的同辈元素
4)siblings()用于取得元素前后所有的同辈元素
5)closest()用于取得最近的匹配元素
( e . t a r g e t ) . c l o s e s t ( " l i " ) . c s s ( " c o l o r " , " r e d " ) ; 6 ) p a r e n t ( ) , p a r e n t s ( ) , c l o s e s ( ) 的 区 别 ! [ 在 这 里 插 入 图 片 描 述 ] ( h t t p s : / / i m g − b l o g . c s d n i m g . c n / 20190328233517625. p n g ? x − o s s − p r o c e s s = i m a g e / w a t e r m a r k , t y p e Z m F u Z 3 p o Z W 5 n a G V p d G k , s h a d o w 1 0 , t e x t a H R 0 c H M 6 L y 9 i b G 9 n L m N z Z G 4 u b m V 0 L 211 c 2 l f b Q = = , s i z e 1 6 , c o l o r F F F F F F , t 7 0 ) 12 c s s d o m 操 作 1 ) (e.target).closest("li").css("color","red"); 6)parent(),parents(),closes()的区别 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190328233517625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ==,size_16,color_FFFFFF,t_70) 12 css_dom操作 1) (e.target).closest("li").css("color","red");6)parent(),parents(),closes()的区别![在这里插入图片描述](https://img−blog.csdnimg.cn/20190328233517625.png?x−oss−process=image/watermark,typeZmFuZ3poZW5naGVpdGk,shadow10,textaHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ==,size16,colorFFFFFF,t70)12cssdom操作1)(“p”).css(“color”);
$(“p”).css(“color”,“red”);
( " p " ) . c s s ( " c o l o r " : “ r e d ” , " f o n t S i z e " : " 30 p x " ) ; 2 ) ("p").css({"color":“red”,"fontSize":"30px"}); 2) ("p").css("color":“red”,"fontSize":"30px");2)(“p”).height();
$(“p”).height(100);
$(“p”).height(“10em”);
与height对应的方法有width()
13 CSS_DOM常用的方法
1) offset(),获取元素在当前窗口的相对偏移,其中返回的对象包含两个属性,即top和left
var offset = $(“p”).offset();
var left = offset.left;
vat top = offset.top;
2)position()方法
var position = ( " p " ) . p o s i t i o n ( ) ; v a r l e f t = p o s i t i o n . l e f t ; v a r t o p = p o s i t i o n . t o p ; 3 ) ("p").position(); var left = position.left; var top = position.top; 3) ("p").position();varleft=position.left;vartop=position.top;3)(“p”).scrollTop();//获取元素的滚动条距顶端的距离
$(“p”).scrollLeft();//获取元素的滚动条距左侧的距离
//滚动到指定位置
$(“p”).scrollTop();
$(“p”).scrollLeft();
-
元素中