1、DOM操作分类
1)DOM Core
不属于Jquery,任何一种支持DOM的程序语言都可以使用
2)HTML-DOM
提供了一些更简明的记号来描述各种HTML元素属性
3)CSS-DOM
针对CSS操作,主要用来获取设置style对象的各种属性
2、jquery中的DOM操作
1)查找节点
1.查找元素节点
alert($(ul li:eq(1)).text())//获取元素节点,打印文本内容
2.查找属性节点
$("p").attr("title")
2)创建节点
1.创建元素节点
var $li1 = $("<li></li>");//创建1个<li>元素
$("ul").append($li1);//添加到<ul>节点中
2.创建文本节点
var $li1 = $("<li>香蕉</li>");//创建1个<li>元素,包括文本节点
$("ul").append($li1);//添加到<ul>节点中
3.创建属性节点
var $li1 = $("<li title='香蕉'>香蕉</li>");//创建1个<li>元素,包括文本节点和属性
$("ul").append($li1);//添加到<ul>节点中
3)插入节点
插入节点的方法:
方法 | 说明 |
---|---|
append() | 向每个匹配的元素内部追加内容 |
appendTo() | 将所有匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中 |
prepend() | 向每个匹配的元素内部前置内容 |
prependTo() | 将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中 |
after() | 在每个匹配的元素之后插入内容 |
insertAfter() | 将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规的$(A).after(B)的操作,即不是将B插入到A后面,而是将A插入到B后面 |
before() | 在每个匹配的元素之前插入内容。 |
insertBefore | 将所有匹配的元素插入到指定的元素的前面。实际上,使用该方法是颠倒了常规的$(A).before(B)的操作,即不是将B插入到A前面,而是将A插入到B前面 |
$parent.append($li1);
4)删除节点
1.remove()方法
$("ul li:eq(1)").remove();//获取第2个li元素后,从网页中删除
$("rl li").remove("li[title!=菠萝]");//将Li元素中属性title不等于菠萝的元素删除
2.detach()方法
用他删除后,在添加回来绑定的事件还在,remove删除了就没了
3.empty()方法
$("ul li:eq(1)").empty();//获取第2个li元素节点后,清空元素里的内容
5)复制节点
$(this).clone().appendTo("ul");//复制当前节点,追加到ul元素中
$(this).clone(true).appendTo("ul");//复制当前节点,追加到ul元素中,同时复制绑定的事件
6)替换节点
$("p").replaceWith("<strong>你的水果</strong>");
$("<strong>你的水果</strong>").replaceAll("p");
7)包裹节点
$("strong").wrap("<b></b>");//用b标签报strong元素包裹起来,将选择的元素单个包装
$("strong").wrapAll("<b></b>");//用b标签报strong元素包裹起来,将选择的元素一起包装
$("strong").wrapInner("<b></b>");//用b标签报strong元素的子内容包裹起来,将选择的元素单个包装
8)属性操作
1.获取属性和设置属性
$para.attr("title");//获取节点属性
$("p").attr("title","your title");//设置单个属性值
$("p").attr("title":"your title","name":"your name");//设置多个属性值
2.删除属性
$("p").removeAttr("title");//删除p元素的属性title
9)样式操作
1.获取样式和设置样式
$("p").attr("class");//获取p元素的class
$("p").attr("class","hight");//设置class为high
2.追加样式
$("p").addClass("another");//p元素追加another类
3.移除样式
$("p").removeClass("high");//移除值为high的class
$("p").removeClass("high high2");//移除多个的class
$("p").removeClass();//移所有
4.切换样式
$("p").toggleClass("another");//重复添加去除这个类
5.判断是否含有某个样式
hasClass(),返回true就是有
$("p").hasClass("another");
10)设置和获取HTML,文本和值
<p title=""> <strong>hhaa</strong></p>
1.html()方法
$("p").html();//获取p元素的HTML代码,<strong>hhaa</strong>
$("p").html("<strong>hhaa</strong>");//设置p元素的HTML代码为<strong>hhaa</strong>
2.text()方法
$("p").text();//获取p的文本内容
3.val()方法
$(this).val("")//设置文本框的值为空
11)遍历节点
1.children()方法
用于取得匹配元素的子元素集合
$("ul").children();
for(var i=0,len=$ul.length;i<len;i++){
alert($ul[i].innerHTML)
}
2.next()方法
用于取得匹配元素后面紧邻的同辈元素
3.prev()方法
获取前面元素
4.siblings()方法
取同辈全部元素
5.closest()
用于匹配最近的元素。向上匹配
$("e").closest("li");
6.parent(),parents()与closedt()的区别
parent(),获取集合中每个匹配元素的父级元素,parents获取每个匹配元素的祖先元素
12)CSS-DOM操作
$("p").css("color");//获取p元素的样式颜色
$("p").css("color","red");//设置p元素的样式颜色
$("p").css("color":"red","backgroundColor":"#888888");//设置p元素的多个样式颜色
$("p").height(100);//设置高度为100px
$("p").height("10em");//设置高度为100em
1.offset()方法
获取元素在当前视窗的相对偏移
var offset = $("p").offset();
offset.left;//获取左偏移
offset.top;
2.position()方法
获取元素相对于最近一个Position样式属性设置我relative或absolute的祖先节点相对偏移
var offset = $("p").position();
offset.left;//获取左偏移
offset.top;
3.scrollTop()方法和scrollLeft()方法
分别获取元素的滚动条距顶端的距离和距左侧的距离。
$p.srollTop();//获取
$p.srollTop(100);//设置