一、使用元素属性和特性

属性是javascript对象的内在性质，每个属性都包含名称和值。

特性不是javascript的原生概念，它只适用于DOM元素。特性是用于描述DOM元素标记中设定的值。

设置图片元素的src特性为image.gif，会导致src属性被设置为图片的绝对URL。

大部分情况下属性名称和特征名称一样，但class特性对应的属性名是className。

1.操作元素属性

□  数组索引   $(whatever)[n]

□  get方法，通过索引返回单个元素，或者toArray()方法，返回由集合的元素组成的数组

□  each或map方法，在回调函数可以使用单个方法

□  eq()方法或:eq()选择器

□  通过某些方法的回调函数，这些方法将元素设置为回调函数的上下文

2.获取特性值

attr(name)：获取匹配集合第一个元素指定特性的值

3.设置特性值

attr(name,value)：将包装集中所有元素的已命名的特性设置为传入值

$(‘*‘).attr(‘title‘,function(index,previousValue){     return previousValue + ‘I am element‘ + index})

attr(attributes)：用传入的对象指定的属性和值来设置匹配集中所有元素相应的特性值

//设置所有<input>元素的值为空字符串，将title设置为字符串
//IE不允许修改<input>的name和value特性$(‘input‘).attr(    value: ‘ ‘,title: ‘nima‘)

4.删除特性

removeAttr(name)：从每个匹配元素删除指定特性

删除一个特性不会删除javascript DOM元素相应的属性

5.存储自定义数据

data(name,value)：将传入的值添加到为所有包装元素准备的jQuery托管数据仓库

data(name)：通过name获取之前在包装集的第一个元素上保存的任何数据

removedata(name)：通过name删除之前在包装集的所有元素的数据

二、改变元素样式

1.添加和删除类名

addClass(name):为包装集所有元素添加指定的单个或多个类名

removeClass(name)：从包装集的每个元素删除指定的单个或多个类名

toggleClass(names)：如果元素不存在则添加类名，否则删除类名

toggleClass(names,switch)：switch表达式为true添加此类名，否则删除类名

hasClass(name)：确定匹配集是否有元素有name类名

2.获取和设置样式

 css(name,value)：设置每个匹配元素已命名CSS样式属性为指定的值（字符串、数值、函数）

//扩大包装集中所有元素宽度$("div.expandable").css("width",function(index,currentWidth){    return currentWidth + 20;});

css(property)：设置所有匹配元素的CSS属性为传入对象的多个键值

.css({    cursor: ‘pointer‘,    border:‘1px fff solid‘;})

css(name)：获取包装集第一个元素的CSS属性的已计算值

①获取和设置尺寸

width(value)  height(value)：设置匹配集所有元素的高度（宽度）

width() height()：获取包装集第一个元素的高度（宽度）

innerHeight()：返回第一个元素不包含边框但包含内边距的高度

outerHeight(margin)：返回第一个元素包含边框和内边距的高度，如果margin设置为true，则包含外边距

②定位和滚动

offset()：返回第一个元素相对于文档参照源的位置，返回值为用浮点数来表示left和top属性的javascript对象

position：返回第一个元素相对于最近偏移父元素（显式定位规则relative或absolute）的位置。

scrollLeft([value])：返回第一个匹配（设置所有）元素的水平滚动偏移量

三、设置元素内容

1.替换HTML或文本内容

html()：获取第一个元素的HTML内容

html(content)：将传入的HTML片段设置为所有匹配元素的内容（字符串、函数）

text()：将包装元素的所有文本连接起来并返回

text(content)：设置所有包装元素的文本内容为传入的值。如果传入的文本包含<  > 或&，则被替换为其相应的HTML实体字符

2.移动和复制元素

append(content)：将传入的HTML片段或元素追加到所有匹配元素的内容的末尾（字符串、元素、jQuery、函数）

prepend(content)：将传入的HTML片段或元素追加到所有匹配元素的内容的开头（字符串、元素、jQuery、函数）

before(content)：将传入的HTML片段或元素插入为目标元素的兄弟节点，位于目标函数之前，目标包装元素必须已经是DOM的一部分

after(content)：将传入的HTML片段或元素插入为目标元素的兄弟节点，位于目标函数之后，目标包装元素必须已经是DOM的一部分

appendTo(content)：将包装集的所有元素追加到目标元素内容的末尾

prependTo(content)：将包装集的所有元素追加到目标元素内容的开头

insertBefore(targets)：将包装集的所有元素添加到DOM中指定元素的前面

insertAfter(targets)：将包装集的所有元素添加到DOM中指定元素的后面

3.包裹和反包裹元素

已存在的元素不会被移动，只会被复制

wrap(wrapper)：使用传入的HTML标签或元素的副本，将匹配集的元素包裹起来（字符串、元素）

<p>This is a paragraph.</p>    $("p").wrap("<div></div>");//<div><p>This is a paragraph.</p></div>

wrapAll(wrapper)：使用传入的HTML标签或元素的副本，将匹配集的元素作为整体包裹起来（字符串、元素）

wrapInner(wrapper)：使用传入的HTML标签或元素的副本，将匹配集的元素内容（包含文本节点）包裹起来（字符串、元素）

//在每个 p 元素的内容上包围 b 元素： $("p").wrapInner("<b></b>");

unwrap(wrapper)：删除包装元素的父元素，子元素和其所有同级节点替换DOM的父元素。

4.删除元素

remove(selector)：从页面DOM删除包装集的所有元素，selector（可选，过滤要删除的元素）,返回结果是包装集

detach(selector)：从页面DOM删除包装集的所有元素，保留绑定的事件和jQuery数据

empty：删除匹配集中所有DOM元素的内容

<p>Hello</p>World<p>welcome</p> 执行$("p").empty()其结果是<p></p>World<p></p> 执行$("p").remove()其结果是World

5.复制元素

clone(copyHandlers)：创建包装集中元素的副本，返回包含这些副本的新包装集。（copyHandlers为true则复制事件处理程序，省略或为false则不复制） 

6.替换元素

replaceWith(content)：使用指定的内容替换每个匹配元素

replaceAll(selector)：替换所有与传入选择器匹配的内容

四、处理表单元素值

val()：返回匹配集第一个元素的value特性。如果是一个可以多选的元素返回值是所以选择项组成的数组。

//选中多个控件的复选框分组var checkboxValues = $(‘[name = "checkbox"]‘:checked).map(    function(){ return $(this).val(); } ).toArray();

val(value)：设置传入的值为所有匹配的表单元素的value

val(values)：导致包装集中任何复选框、单选按钮或<select>元素的可选项变成选择(checked)或选择(selected)状态，只要它们值匹配传入的values数组的任何一个值

//搜索所有<input>和<select>，只要这些元素的值与数组的任何一个匹配$(‘input,select‘).value([‘one‘,‘two‘,‘three‘]);

操作元素