jQuery操作Dom

1.操作Class
(1)添加class 元素.addClass(“.a”) 或 元素.addClass(".a  .dv  .col")
  (2)  删除class 元素.removeClass(".a") 或 元素.removerClass(".a .dv .col")
  (3)  切换class,如果已存在那么删除class,如果不存在那么添加 class
    元素.toggleClass("一个或多个元素");
(4)判断是否含有某个class,返回布尔值 元素.hasClass("一个或多class"); 

2.html代码及文本操作
    元素.html("

"); 如果html()内有html代码则为在元素内写入对应html代码。
    元素.html();如果html()内无任何内容则为获取该元素内所有html代码
    元素.text("添加文本内容给"),text()内有任何文本或代码,都被认为是在元素内写入的文本。
    元素.text(), text()内无任何内容则为获取该元素内的文本内容,注意只获取文本不获取html代码。

3. 属性值操作
    元素.val(), val()内无内容为获取该元素的value值
    元素.val("value值"),val()内有值则为设置该元素的value值  

4.获取创建节点
    $(selector):通过选择器获取节点,例:$(".a")
    $(element):把DOM节点转化成jQuery节点,例 $(p1) p1为Dom节点,将p1转化为jQuery节点并返回。 
    $(html):使用HTML字符串创建jQuery节点,例 $("

"),创建class为a的div的jQuery节点并返回。

5.插入节点

jQuery操作Dom_第1张图片
jQuery操作Dom_第2张图片

6.删除节点
    元素.remove(),删除整个元素节点,及节点,同时删除相关jQuery数据例如,绑定的方法等,注意行内的方法属于js,行外的jQuery绑定才是属于jQuery数据。
    元素.empty(),删除元素子节点,不包括元素本身
    元素.detach(), 删除元素,但保留相关数据及绑定事件
var a=$().remove(); var b=$().detach(); 获取删除的元素
var c=$().empty();注意此方法获取的是删除子元素后的父级元素。

7.替换节点
replaceWith()和replaceAll()用于替换某个节点
var $newNode1=$("你喜欢哪些冬季运动项目?");
$("旧节点").replaceWith($newNode1);
$("$newNode1").replaceAll("旧节点");

8.复制节点
var a=$().clone(".a");

9.属性操作
$("p").attr("name"), 获取p标签的name属性的属性值。
$("p").attr({width:"100px",color:"blue"}),设置p标签的多个属性值
$("p").removeAttr("id"),删除p标签的id属性,说白了删除的是属性值 

10.节点遍历
$().children();获取该元素下所有子元素
$().next();用于获取紧邻匹配元素之后的元素
$().prev();用于获取紧邻匹配元素之前的元素
$().slibings();用于获取位于匹配元素前面和后面的所有同辈元素
$().parent();获取父级元素
$().parents();获取祖先级元素

find():法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选
例:$("p").find("span").css('color','red');搜索所有段落中的后代 span 元素,并将其颜色设置为红色:

filter(): 方法将匹配元素集合缩减为匹配指定选择器的元素。
例:$("div").css("background", "#c8ebcc").filter(".middle").css("border-color", "red");改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框:

$(selector).each(function(index,element)) ; 循环匹配的所有元素
index:选择器位置,类似于下标
element:当前元素  

$("li").each(function(){
 var str=$(this).text()+"";     //this代表当前元素  
 $("section").append(str);      })

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

11.Dom操作

jQuery操作Dom_第3张图片

你可能感兴趣的:(jQuery操作Dom)