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("<div class='a'></div>"); 如果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节点,例 $("<div class='a'></div>"),创建class为a的div的jQuery节点并返回。
5.插入节点
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操作