DOM简介
DOM(Document Object Model,文档对象模型):是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。
DOM树就是网页中的元素由上到下的分支结构,下图为简单的DOM树例子:
Jquery对DOM的操作一般是:元素属性、内容、值、CSS样式的操作
元素属性操作
获取和设置元素属性
用attr()获取和设置元素的属性:
获取属性:attr(属性名)
设置属性:attr(属性名,值)
其中,设置属性时,值可为函数,函数返回值为要设置的值
删除元素的属性
用removeAttr(属性名)移除元素的属性
元素内容操作
Jquery操作内容的方法包括:html()和text()
html()用于获取或设置元素内容,即:内容可用HTML语句添加样式
text()用于获取或设置元素内容,但只是纯文本内容
获取或设置元素值
用val()获取或设置元素值,带参数则为设置,参数为要设置的值。不带参数则为获取值。
元素样式操作
用css(样式名,样式值)设置元素样式,若为多个样式则格式为:css({样式名:样式值,样式名:样式值,....})
添加类别
用addClass(类名)添加类,可添加多个,用逗号隔开
类别切换
用toggleClass(类名),若当元素中有此类名的CSS类别,则删除,没有则添加。一般用于元素的有无样式的状态转换。
删除类别
用removeClass(类名),参数:类名,为可选,且可有多个类名。当有参数时,删除指定的一个或多个类,若无参数则删除元素的所有类别
创建节点元素
函数$()用于动态创建页面元素,语法:$(html)。
其中,参数html就是具有html语法的字符串。
插入节点
按照插入元素的顺序可分为:内部和外部插入
内部插入
外部插入
复制节点
clone():复制匹配的DOM元素并选中复制成功的元素,该方法仅复制元素本身,被复制后的新元素不具有任何元素行文,若需要复制元素时复制行为时则可用clone(true)
替换节点
替换节点的方法:replaceWith()、replaceAll()
replaceWith(content):将所有选择的元素替换成指定的HTML或DOM元素,其中参数content为被选择元素替换的内容
replaceAll(selector):将所有选择的元素替换成指定的selector的元素,其中,参数selector为需要被替换的元素
调用格式:$(“#ID或.类名或元素名”).replaceWith()/replaceAll()
包裹节点
其中,wrap(html)和wrapInner(html)最为常用,前者包裹外部元素,后者包裹元素内部的文本字符
遍历元素
each(callback):用于元素的遍历,callback为回调函数,此函数可有参数index用于遍历元素的序号(从0开始)
删除元素
删除元素的方法:remove()、empty()
remove():可有参数,该参数为筛选元素的Jquery表达式,用于获取去指定的元素并删除
empty():用于清空所选择的页面元素或所有后代元素