使用jQuery操作节点

时间:2022-12-29 19:55:32
DOM的分类:

DOM core 指所有支持DOM的功能都可以进行使用操作

HTML DOM 网页中的所有标签或节点

CSS DOM 指网页中的优化样式

在控制台输出信息:

console.log("元素的宽为"+w)

设置和获取样式:

$(选择器).css("属性","属性值") 设置单个样式

$(选择器).css({"属性1":"属性值1","属性2":"属性值2"........}) 设置多个样式

$(选择器).css(属性) 获取指定属性值

添加类样式:

$(选择器).addClass("类名") 添加单个样式

$(选择器).addClass("类名1 类名2") 添加多个类样式

移除类样式

$(选择器).removeClass("类名"); 移除单个样式

$(选择器).removeClass("类名1 类名2"); 移除多个样式

添加和移除样式

$(选择器).toggleClass("类名") 指元素在添加样和移除样式式中切换

$(选择器).toggleClass("类名1 类名2....") 来回添加和移除多个样式

判断元素是否含有类样式

$(选择器).hasClass("类名"); 如果含有类名,则返回true,否则返回false

HTML代码操作

$(选择器).html(""); 获取选择器的内容(文本、标签)

$(选择器).html("内容"); 将元素内容进行替换(文本、标签)

$(选择器).text(""); 获取选择器的内容(文本)

$(选择器).text("内容"); 将元素内容进行替换(文本)

$(选择器).val(""); 获取表单value值

$(选择器).val("内容"); 替换表单value的值

$(选择器).attr("src"); 获取src属性值

节点的创建和插入

var $newcon= $("创建的内容"); 创建节点(可以是标签,可以是文本)

$("ul").append($newcon); 将新节点插入到ul内的最后面

$newcon.appendTo($("ul")); 同上

$("ul").prepend($newcon); 将新节点插入到ul内的最前面

$newcon.prependTo($("ul")); 同上

同辈插入

("ul").after($p); 将p元素插入到ul之后

$p.insertAfter($("ul")) 同上

$("ul").before($p); 将p元素插入到ul之前

$p.insertBefore($("ul")); 同上

节点的删除和替换

$(选择器).remove(); 删除当前选择的节点

$(选择器).empty(); 清空当前选择的节点内容(保留标签)

$(选择器).detach(); 删除当前节点,但是可以保留删除的节点

可以用变量进行接收

$(选择器).replaceWith(新节点); 选择的内容被新节点替换

新节点.replaceAll(选择器); 新节点替换选择的内容

复制节点

$(选择器).clone(true); 复制当前选择的节点

true复制节点的事件 false不复制事件

属性节点操作

设置和获取属性节点

$(选择器).removeAttr("属性名") 移除指定的属性节点

遍历节点

$(选择器).children(); 获取所有子节点,但是不会获取后代其他节点

得到一个子节点数组,数组取值为DOM对象,不

使用jQuery方法

$(选择器).next(); 选中当前元素的下一个兄弟元素

$(选择器).prev(); 选中当前元素的上一个兄弟元素

$("选择器).siblings(); 选中当前元素的所有兄弟元素

访问父级和祖先元素

$(选择器).parent(); 选择当前元素的父级元素

$(选择器).parents(); 选择当前元素的父级元素,得到一个数组,通过下标取值

需要转为jQuery对象才能使用jQuery方法 $(arr[index])

$(选择器).each(function(index,element){}); 获取页面上的使用当前元素,进行遍历,index是下标,

element代表当前元素;this也可以代表当前元素

$(选择器).end(); 结束当前的筛选,从最近一次筛选开始选择