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(); 结束当前的筛选,从最近一次筛选开始选择