Jquery学习之Jquery操作DOM

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()：用于清空所选择的页面元素或所有后代元素