jquery dom
DOM（Document Object Model，文档对象模型）为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。在实际运用中，DOM更像是桥梁，通过它可以实现跨平台、跨语言的标准访问。
单词Document即文档，当我们创建一个页面并加载到web浏览器时，dom模型则根据该页面的内容创建了一个文档文件；
单词Object即对象，是指具有独立特性的一组数据集合；
单词Model即模型，在页面文档中，通过树状模型展示页面的元素和内容，其展示的方式则是通过节点（node）来实现的。
1、访问元素
在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值、CSS的操作。
(1) 元素属性操作
a. 获取元素属性
获取元素属性的语法格式如：attr(name)，其中，参数name表示属性的名称。
b. 设置元素属性
设置元素属性的语法格式如：attr(name，value)，其中，参数name表示属性的名称，value表示属性的值 。
如果要设置多个属性，其语法格式如：attr({name0 : value0，name1 : value1})。
attr()方法还可以绑定一个function函数，通过该函数返回的值作为元素的属性值，其语法格式如：attr(key，function(index))，其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。
c. 删除元素属性
使用removeAttr()方法可以将元素的属性删除，其语法格式为：removeAttr(name)，其中，参数name为元素属性的名称。
(2) 元素内容操作
在jquery中，操作元素内容的方法包括html()和text()。前者与javascript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者与javascript中的innerText属性，即获取或设置元素的文本内容；
a. html()，用于获取元素的html内容；
b. html(val)，用于设置元素的html内容；
c. text()，用于获取元素的文本内容；
d. text(val)，用于设置元素的文本内容；
注意：html()方法仅支持xhtml的文档，不能用于xml文档，而text()则既支持html文档，也支持xml文档。
(3) 获取或设置元素值
在jquery中，如果要获取元素的值，是通过val()方法实现的，其语法如：val(val)，其中，如果不带参数val，则是获取某元素的值；反之，则是将参数val的赋给某元素，即设置元素的值。
通过val()方法还可以获取select标记中的多个选项值，其语法如：val().join(",")。
在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array)，其作用是设置元素被选中。
(4) 元素样式操作
元素样式的操作包含：直接设置样式、增加CSS类别、类别切换、删除类别。
a. 直接设置元素样式值
通过css()方法为某个指定的元素设置样式值，其语法如：css(name, value)，其中name为样式名称，value为样式的值。
b. 增加css类别
通过addClass()方法增加元素类别的名称，其语法如：addClass(name)，其中，参数name为类别的名称。
也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法如：addClass(name1，name2 ... )。
注意：使用addClass()方法仅是追加样式类别，即它还保存原有的类别。
c. 类别切换
通过toggleClass()方法切换不同的元素类别，其语法如：toggleClass(name)，其中参数name为类别名称，其功能是当元素中含有名称为name的css类别时，删除该类别，否则增加一个该名称的css类别。
d. 删除类别
removeClass()方法用于删除类别，其语法如：removeClass([name])，其中，参数name为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。
2、创建节点元素
函数$()用于动态创建页面元素，其语法格式如下：
$(html)
3、插入节点
按照插入元素的顺序来分：
(1) 内部插入节点方法
append(content)：向所选择的元素内部插入内容；
append(fucntion(index,html))：向所选择的元素内部插入function函数所返回的内容；
appendTo(content)：把所选择的元素追加到另一个指定的元素集合中；
prepend(content)：向每个所选择的元素内部前置内容；
prepend(function(index,html))：向所选择的元素内部前置function函数所返回的内容；
prependTo(content)：将所选择的元素前置到别一个指定的元素集合中；
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .red { background: red; } .green { background: green; } </style> </head> <body> <p>Hello World!</p> <p>Hello Tomorrow!</p> <input type="button" name="name" value="append" id="append" /> <input type="button" name="name" value="appendTo" id="appendTo" /> <input type="button" name="name" value="prepend" id="prepend" /> <input type="button" name="name" value="prependTo" id="prependTo" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#append").click(function () { $("p").append("<span class=‘red‘>123</span>"); }) $("#appendTo").click(function () { $("<span class=‘red‘>123</span>").appendTo("p"); }) $("#prepend").click(function () { $("p").prepend("<span class=‘red‘>456</span>"); }) $("#prependTo").click(function () { $("<span class=‘red‘>456</span>").prependTo("p"); }) }) </script> </html>
(2) 外部插入节点方法
after(content)：向所选择的元素外部后面插入内容；
after(function)：向所选择的元素外部后面插入function函数所返回的内容；
before(content)：向所选择的元素外部前面插入内容；
before(function)：向所选择的元素外部前面插入function函数所返回的内容；
insertAfter(content)：将所选择的元素插入另一个指定的元素外部后面；
insertBefore(content)：将所选择的元素插入另一个指定的元素外部前面；
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> p{ border: 1px solid gray; padding: 5px; } span { margin: 0px 5px; } .red { background: red; } .green { background: green; } </style> </head> <body> <p>Hello World!</p> <p>Hello Tomorrow!</p> <div> <input type="button" name="name" value="after" id="after" /> <input type="button" name="name" value="before" id="before" /> <input type="button" name="name" value="insertAfter" id="insertAfter" /> <input type="button" name="name" value="insertBefore" id="insertBefore" /> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#after").click(function () { $("p").after("456"); }) $("#before").click(function () { $("p").before("123"); }) //not execute $("#insertAfter").click(function () { $("p").insertAfter("456"); }) //not execute $("#insertBefore").click(function () { $("p").insertBefore("123"); }) }) </script> </html>
4、复制节点
在jquery中，通过方法clone()实现复制节点，其语法格式为：
clone()
其功能为复制匹配的dom元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。
如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone(true)实现，其语法格式为：
clone(true)
5、替换节点
(1) replaceWith(content)
将所有选择的元素替换成指定的html和dom元素，其中参数content为被所选择替换的内容。
(2) replaceAll(selector)
将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。
(3) replaceWith()与replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .red { background: red; } .green { background: green; } </style> </head> <body> <p>Hello World!</p> <p>Hello Tomorrow!</p> <input type="button" name="name" value="replaceWith" id="replaceWith" /> <input type="button" name="name" value="replaceAll" id="replaceAll" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#replaceWith").click(function () { $("p").replaceWith("<div class=‘red‘>123</div>"); }) $("#replaceAll").click(function () { $("<div class=‘green‘>456</div>").replaceAll("p"); }) }) </script> </html>
6、包裹节点
wrap(html)：
html参数为字符串代码，用于生成元素并包裹所选元素；
把所有选择的元素用其他字符串代码包裹起来；
wrap(elem)：
elem参数用包装所选元素的dom元素；
把所有选择的元素用其他dom元素包裹起来；
wrap(fn)：
fn参数为包裹结构的一个函数；
把所有选择的元素用function函数返回的代码包裹起来；
unwrap()：
无参数；
移除所选元素的父元素或包裹标记；
wrapAll(html)：
html参数为字符串代码，用于生成元素并包裹所选元素；
把所有选择的元素用单个元素包裹起来；
wrapAll(elem)：
elem参数用于包装所选元素的dom元素；
把所有选择的元素用单个dom元素包裹起来；
wrapInner(html)：
html参数为字符串代码，用于生成元素并包裹所选元素；
把所有选择的元素的子内容（包括文本节点）用字符串代码包裹起来；
wrapInner(elem)：
elem参数用于包裹所选元素的dom元素；
把所有选择的元素的子内容（包括文本节点）用dom元素包裹起来；
wrapInner(fn)：
fn参数为包裹结构的一个函数 ；
把所有选择的元素的子内容（包括文本节点）用function函数返回的代码包裹起来；
wrap(html)与wrapInner(html)方法较为常用，前者包裹外部元素，后者包裹元素内部的文本字符。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .red { background: red; } .green { background: green; } </style> </head> <body> <p>Hello World!</p> <p>Hello Tomorrow!</p> <input type="button" name="name" value="wrap" id="wrap" /> <input type="button" name="name" value="unwrap" id="unwrap" /> <input type="button" name="name" value="wrapAll" id="wrapAll" /> <input type="button" name="name" value="wrapInner" id="wrapInner" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#wrap").click(function () { $("p").wrap("<div class=‘red‘></div>"); }) $("#unwrap").click(function () { $("p").unwrap("<div></div>"); }) $("#wrapAll").click(function () { $("p").wrapAll("<div class=‘green‘></div>"); }) $("#wrapInner").click(function () { $("p").wrapInner("<em></em>"); }) }) </script> </html>
7、遍历元素
在jquery中，可以使用each()方法实现元素的遍历。
其语法格式如下：
each( callback )
参数callback是一个function函数，该函数可以接受一个形参index，此形参为遍历元素的序号（从0开始）；如果需要访问元素的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。
8、删除元素
jquery提供了两种可以删除元素的方法：
(1) remove()
其语法格式如下：
remove( [expr] )
参数expr为可选项，如果接受参数，则该参数为筛选元素的jquery表达式，通过该表述式获取指定的元素，并进行删除。
(2) empty()
其语法格式如下：
empty()，其功能为清空所选择的页面元素或所有的后代元素。
严格来说，empty()方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
