3、jQuery的DOM基础

DOM模型在页面文档中，通过树状模型展示页面的元素和内容，其展示的方式则是通过节点（node）来实现的。

3.1 访问元素

3.1.1 元素属性操作

Attr()可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。

Attr(name):获取名为name的属性

Atrr(name1,value1;name2,value2……):设置属性

 

3.1.2 元素内容操作

操作元素内容的方法包括html()和text()。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中innerText属性，即获取或设置元素的文本内容。

语法格式	参数说明	功能描述
Html()	无参数	用于获取元素的HTML内容
Html(val)	Val参数为元素的HTML内容	用于设置元素的HTML内容
Text()	无参数	用于获取元素的文本内容
Text(val)	Val参数为元素的文本内容	用于设置元素的文本内容

Htm()方法仅支持XHTML文档，不支持XML文档，而text()则及支持HTML文档，也支持XML文档。

3.1.3 获取或设置元素值

通过val()方法获取或设置元素的值。

另外，通过val()方法还可以获取select标记中的多个选项值，语法：val().join(“,”)

 

3.1.4 元素样式操作

① 直接设置元素样式值

Css(name,value)

② 增加css类别

addClass();

③ 类别切换

通过toggleClass()方法切换不同的元素类别。

toggleClass(class)；

其中参数class为类别名称。其功能是当前元素中含有名称为class类别时，删除该类别，否则增加一个该名称的css类别。

④ 删除类别

removeClass()；

 

3.2 创建节点元素

函数$()用于动态创建页面元素。

 

3.3 插入节点

内部插入节点方法

语法格式	功能描述
Append(content)	向所选择的元素内部插入内容
Append(function(index,html))	向所选的元素内部插入function函数所返回的内容
appendTo(content)	把所选择的元素追加到另一个指定的元素集合中
Prepend(content)	向每个所选择的元素内部前置内容
Prepend(function(){})	向所选的元素内部前置function函数所返回的内容
prependTo(content)	将所选择的元素前置到另一个指定的元素集合中

 

 

外部插入节点方法

语法	功能
After(content)	向所选元素外部后面插入内容
After(function())	向所选择的元素外部后面插入function函数返回的内容
Before(content)	向所选择的元素外部前面插入内容
Before(function())	向所选择的元素外部前面插入function函数返回的内容
insertAfter(content)	将所选择的元素插入另一个指定的元素外部后面
insertBefore(content)	将所选择的元素插入另一个指定的元素外部前面

 

3.4 复制节点

Clone():其功能为赋值匹配的DOM元素并且选中复制成功的元素，该方法近视复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在赋值时将该元素的全部行为也进行复制，可与通过方法clone(true)实现。

 

3.5 替换节点

replaceWith()和replaceAll()两种方法。

 

3.6 包裹节点

语法	功能
Wrap(html)	把所选择的元素用其他字符串代码包裹起来
Wrap(elem)	把所有选择的元素用其他DOM元素包裹起来
Wrap(fn)	把所有选择的元素用function函返回值包裹起来
Unwrap()
wrapAll(html)
wrapAll(elem)
wrapInner(html)
wrapInner(elem)
wrapInner(fn)

 

3.7 遍历元素

Each(callback)

 

3.8删除元素

Remove()

Empty()