【jQuery】jQuery操作DOM

访问元素

元素属性操作

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

获取元素属性

语法格式：

attr(name)

参数 name 表示属性的名称。

例如：

$("img").attr("src")

设置元素的属性

attr()方法不仅可以获取元素的属性，还可以设置元素的属性，语法格式如下：

attr(key, value)

如果要设置多个属性，也可以通过attr()方法，语法格式如下：

attr({key0:value0,key1:value1})

例如：

$("img").attr("src", "Image/img01.jsp");

attr() 方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，语法格式如下：

attr(key, function(index))

删除元素的属性

语法格式为：

removeAttr(name)

例如：

$("img").removeAttr("src");

元素内容操作

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

语法格式为：

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

html() 方法仅支持XHTML的文档，不能用于XML文档，而text()则即支持HTML文档，也支持XML文档。

例如：

var strHTML = $("#divShow").html();
var strText = $("#divShow").text();
$("#divHTML").html(strHTML);
$("#divText".text(strText));

元素值操作

获取/设置元素值，语法格式如下：

val(val)

如果不带参数val，则是获取某元素的值；反之，则是将参数val的值赋给某元素，即设置元素的值。

该方法通常用于表单中获取和设置对象的值。

通过val方法还可以获取 <select> 标记中的多个选项值，语法格式如下：

val().join(",")

在val(val) 方法中，如果有参数，其参数还可以是数组的形式，即 val(array)，其作用是设置元素被选中。 $(":radio").val([""radio2","radio3""])，ID为radio2和radio3的单选框被选中。
 

元素样式操作

元素样式的操作包含：直接设置样式，增加CSS类别，类别切换，删除类别。

直接设置元素样式值

通过css()方法为某个指定的元素设置样式值，语法格式如下：

css(name, value)

name为样式名称，value为样式的值。

例如：

$(this).css("font-weight", "bold");
$(this).css("font-style", "italic");
$(this).css("background-color", "#eee");

增加CSS类别

通过addClass()方法增加元素类别的名称，语法格式如下：

addClass(class)

参数class为类别的名称，可以增加多个类别的名称，只需用空格将其隔开即可，语法格式如下：

addClass(class0 class1 ... ...)

使用addClass()方法仅是追加样式类别，即它还保存原有的类别。

例如：

.cls1{font-weight:bold}
.cls2{border:solid 1px}

$(this).addClass("cls1 cls2");

类别切换

通过 toggleClass方法切换不同的元素类别，语法格式如下：

toggleClass(class)

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

.clsImg{border:solid 1px #666}
$(this).toggleClass("clsImg");

删除类别

removeClass()方法用于删除类别，语法格式如下：

removeClass([class])

参数class为类别名称，该名称是可选的，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开；如果不选名称，则删除元素中的所有类别。

例如：

$("p").removeClass("cls0 cls1");
$("p".)removeClass(); // 删除全部类别

创建节点元素

要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加append（见下面）到该节点中。

函数$()用于动态创建页面元素，语法格式如下：（创建DOM元素时，要注意字符标记是否完全闭合，否则达不到预期效果）

$(html)

参数html表示用于动态创建DOM元素的HTML标记字符串。

例如：

var $div = $("<div title='jQuerytest'>write less do more</div>");
$("body").append($div);

插入节点

按照插入元素的顺序来说，可以分为内部和外部两种插入方法：

内部插入节点方法

语法格式	参数说明	功能描述
append(content)	content表示追加到目标中的内容	向所选择的元素内部插入内容
append(function(index,html))	通过function函数返回值追加到目标中的内容	向所选择的元素内部插入function函数所返回的内容
appendTo(content)	content表示被追加的内容	把所选择的元素追加到另一个指定的元素集合中
prepend(content)	content表示插入目标元素内部前面的内容	向每个所选择的元素内部前置内容
prepend(function(index,html))	通过function函数返回值插入目标元素内部前面的内容	向所选择的元素内部前置function函数所返回的内容
prependTo(content)	content表示用于选择元素的额jQuery表达式	将所选择的元素前置到另一个指定的元素集合中

appendTo(content)方法用于将方法前部分的内容插入到其后部分的内容中，例如：

$("span").appendTo($("div"));

将span标记插入div标记中。

外部插入节点方法

语法格式	参数说明	功能描述
after(content)	content表示插入目标元素外部后面的内容	向所选择的元素外部后面插入内容
after(function)	通过function函数返回插入目标外部后面的内容	向所选择的元素外部后面插入function函数所返回的内容
before(content)	content表示插入目标元素外部前面的内容	向所选择的元素外部前面插入内容
before(function)	通过function函数返回插入目标外部前面的内容	向所选择的元素外部前面插入function函数所返回的内容
insertAfter(content)	content表示插入目标元素外部后面的内容	将所选择的元素插入另一个指定的元素外部后面
insertBefore(content)	content表示插入目标元素外部前面的内容	将所选择的元素插入另一个指定的元素外部前面

复制节点

在jQuery中，可以通过方法clone实现，语法格式为：

clone()

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

clone(true)

其中的参数设置为true就可以复制元素的所有事件处理。

例如：

$(this).clone(true).appendTo("span");

替换节点

可以使用replaceWith()和replaceAll()方法，其语法格式为：

replaceWith(content)

该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。（用后面的内容替换前面的内容）

replaceAll(selector)

该方法的功能是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。（用前面的内容替换后面的内容）

例如：

$("#Span1").replaceWith("<span title='replaceWith'>...</span>");
$("<span title='replaceAll'>...</span>").replaceAll("#Span2");

一旦替换完成，被替换元素中的全部事件都将消失。

包裹节点

语法格式	参数说明	功能描述
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)方法比较常用。前者包裹外部元素，后者包裹元素内容的文本元素；

例如：

$("p").wrp("<b></b>"); // 所有段落标记字体加粗
$("span").wrapInner("<i></i>"); // 所有段落中的span标记斜体

遍历元素

使用each()方法实现元素的遍历，其语法格式为：

each(callback)

参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号（从0开始）。

如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。

例如：

$("img").each(function(index){
	this.title = index + "的内容是" + this.alt;
})

删除元素

jQuery提供了两种可以删除元素的方法，即remove()和empty()。

remove()方法的语法格式如下：

remove([expr])

参数expr为可选项，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定的元素，并进行删除。

empty()方法的语法格式如下：

empty（）

其功能为清空所选择的页面或所有的后代元素。

例如：

$("ul li").remove("li[title='t']"); // 删除指定属性的元素
$("ul li:eq(1)").remove(); // 删除节点中第二个元素