jQuery中的DOM操作纪要

本文摘自锋利的jQuery~~

JavaScript中的dom包括,Dom-Core, HTML-DOM,CSS-DOM

Dom core: 如传统的document.getElementById...等等方法
HTML-DOM: 通过子元素的方式进行访问,如document.forms等
CSS-DOM:  通过elements.style.color,访问元素中style内的样式属性

jQuery的DOM操作

一:读取dom方法

text() 获取文本内容
attr(...) 获取属性, 参数不固定,1个为读,两个为写
html()
val() 类似的读取方法

二:创建节点

$(html) 的方式用于创建完整的一个html元素,如$("<li></li>"),注意标签的完整,然后可以使用.append等方法添加到html

中,注意对大小的区分,只识别xhtml规范的标签,同样可以在html中带入文字节点和属性,注意单双引号

三:插入节点

append() 为每个匹配的元素内部追加内容 ...注意是内部的后部..
appendTo() 将所有匹配的元素添加到指定节点中,如$("<b>dd</b>").appendTo("p")
prepend() 为每个匹配元素的内部前部添加内容...注意是内部的前部
prependTo() 将每个匹配元素添加到指定元素的内部中的前部

after() 为 每个匹配元素之后插入内容---区别为外部
insertAfter() 对上面一个方法颠倒的使用,将指定元素添加到指定元素之后
before() 在每个匹配的元素之前插入内容
insertbefore() 对上面方法的颠倒

四:删除节点

remove(), 移除所以匹配的元素 如:var $c=$("div").remove(),同时会返回被移除的对象,便于再次使用
也可以传入参数,移除符合条件的子对象,比如$("div").remove("id=kk")
empty() 清空符合对象的所有子元素,并不会删除该元素本身


五:复制节点

clone() 用于复制指定对象的一个拷贝,带参数true表示包括复制了原来对象的事件

六:替换节点

replaceWith() 将所有匹配的元素都替换成指定元素
replaceAll() 颠倒了上个方法的使用

七:包裹节点

wrap() 将符合条件的对象使用指定的标签包裹起来,如$("strong").wrap("<b></b>")
wrapAll() 将符合条件的元素,使用一个指定的标签包裹起来,warp而是单独进行包装
wrapInner() 将符合条件的子元素,使用一对指定的标签进行包裹

八:属性操作

attr() 获取和设置元素属性,参数可以为1(读)或者2个(写)
removeAttr() 移除指定的属性

九:样式操作

attr() 可以通过直接修改class属性,对元素进行样式修改
addClass() 追加样式,html的class可以使用"a c" 同时公用两种样式,同样也可以用于移除某个样式
removeClass() 移除样式,可以使用带空格的参数,同时移除多个样式,不带参数则移除该元素的所有样式
toggleclass() 将指定组件的样式切换成指定样式,如果该元素当前样式为参数名,则切换会该元素原有样式,将会一直保

留该元素原有的样式
hasClass() 判读该组件是否含有某个class样式,在内部也是使用is(".xxx")进行判断的,只是为了提高代码的可读性

十:设置和获取HTML,文本和值

html() 类似JavaScript的innerHTML属性,用于读取或设置指定元素中的HTML内容,可以带0(读)或1(写)参数,其中
参数可以为xhtml的内容
text() 类似innerText,用于读取或设置元素的文本内容,不包括html,如果要写入html标签,将会被自动过滤显示
val() 用户设置和获取元素的值,通过val(""),可以清空一个输入框,可以使用val(["value","value"])对select
进行批量选择,注意是从后向前选,如果选项的text或者value符合就会被选中,对选中框的html都有效

其他:事件中的this为数组源的引用,普通的DOM节点,可以使用$(this)转换成jQuery元素

十一:遍历节点

children() 用于取得匹配元素的子元素集合,取得后可以使用for循环配合length属性,使用[index]的方式进行读取
next() 用于取得匹配元素后面紧邻的同辈元素
prev() 取得匹配元素前紧邻的同辈元素
siblings() 取得匹配元素紧邻的前后同辈元素
closest() 获取指定元素最近的匹配元素,如$(e.target).closest("li"),获取事件源最近的li元素


CSS-DOM操作,简单的说就是设置Style对象的各种属性

css() 可以选择1(读)个参数或2(写)个参数,也可以传入JSON格式,用于修改多个样式
$("p").css({"fontsize":"30px","color":"red"}),注意带上""可以为html或者js的方式设置,如果不带
引号,对于带-的样式属性,需要使用驼峰命名发,也就是js的css访问方式
height() 取得元素的高度,也可以使用css("height")来获取,可以带一个参数进行修改,默认为px单位,也可以指定
width() 用于获取宽度,同样也可带一个参数进行修改
offset() 取得元素相对当前窗口的相对偏移量,也就是top和left,只对可见元素有效,例如:
var $offset=$("p").offset; 获取时,$offset.top 或.left
position() 获取相对父节点的偏移量,使用方式与offset基本一致

scrollTop()
scrollLeft() 将指定组件的滚动条到滚动指定位置,top为距离顶部,left为距离左边