jQuery中的DOM操作

一、查找节点

1、查找元素节点

2、查找属性节点

二、创建节点:$(html)

1、创建元素节点

2、创建文本节点

3、创建属性节点

三、插入节点(8种)

append(),appendTo(),prepend(),prependTo(),after(),insertAfter(),before(),insertBefore()

四、删除节点

1、remove()

2、detach()

3、empty()

五、复制节点

clone()

六、包裹节点

1、wrap()

2、wrapAll()

3、wrapInner()

七、属性操作

1、获取和设置属性:attr()

2、删除属性:removeAttr()

八、样式操作

1、获取和设置样式:attr()

2、追加样式:addClass("类名"),addClass("类名1 类名2")

3、移除样式:removeClass("类名"),removeClass("类名1 类名2"),removeClass()不带参数,就会将class值全部删除。

4、切换样式:toggleClass("类名")。toggle()方法

5、判断是否含有某个样式:hasClass("类名")返回值true或false。is("类名")

九、设置和获取HTML、文本和值

1、html()方法。此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容。

【注意】html()方法可以用于XHTML文档,但不能用于XML文档。

2、text()方法。此方法类似于JavaScript中的innerText属性,可以用来读取或者设置某个元素中文本内容。

【注意】JavaScript中的innerText属性并不能在FireFox浏览器下运行,而jQuery的text()方法支持所有的浏览器。text()方法对于HTML文档和XML文档都有效。

3、val()方法。此方法类似于JavaScript中的value属性,可以用来设置和获取元素的值。无论元素是文本框,下拉列表还是单选框,它都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。

十、遍历节点

1、children()方法。该方法用于取得匹配元素的子元素集合。

2、next()方法。该方法用于取得匹配元素后面紧邻的同辈元素。

3、prev()方法。该方法用于取得匹配元素前面紧邻的同辈元素。

4、siblings()方法。该方法用于取得匹配元素前后所有的同辈元素。

5、closest()方法。该方法用于取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

6、parent(),parents()与closest()的区别

7、除此之外,jQuery还有很多遍历节点的方法,例如find(),filter(),nextAll()和prevAll()等。

十一、CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

1、css()方法。css()方法可以获取元素的样式属性,也可以利用css()方法设置某个元素的属性。

$("p").css("color");//获取<p>元素的样式颜色。

$("p").css("color","red");//设置<p>元素的样式颜色为红色。

$("p").css({"color":"red","fontSize":"12px"});//同时设置字体颜色和大小。

2、height()方法与width()方法

【注意】height()方法和width()方法可以用来获取window和document的高度、宽度。

此外,在CSS-DOM中,关于元素定位有以下几个经常使用的方法。

1、offset()方法。它的作用是获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效。

var offset = $("p").offset();	//获取<p>元素的offset()
var left = offset.left;			//获取左偏移
var top = offset.top;			//获取上偏移
2、position()方法。它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性,即top和left。
3、scrollTop()方法和scrollLeft()方法。

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。

另外,可以为这两个方法指定一个参数,控制元素的滚动条滚动到指定位置。

你可能感兴趣的:(JavaScript,html,jquery,XHTML,浏览器,文档)