【jQuery】属性操作和内容操作

【属性操作】
一、获取元素属性

$().attr(“属性名”)

二、设置元素属性

$().attr(“属性”,“属性值”)

允许通过一条语句一次设置多个特性值
例：$(‘input’).attr({value:’’,title:’Please enter a value’});

三、删除元素属性

$().removeAttr(“属性”)

【注】prop()方法和attr()方法语法相同，其中prop()用于获取和设置元素属性，removeProp()用于删除元素的属性。prop()方法用于操作元素的固有属性，指的是元素本身具有的属性，如a标签的href、target、title等。而attr()方法用于操作元素的自定义属性。
例：
（1）强制在新窗口中打开链接

$(“a[href^=’http://’]”).attr(”target”,”_blank”);

（2）解决双重提交问题
当表单提交出现延迟，使得用户会多次单击提交按钮，从而给服务器带来诸多麻烦。客户端解决方案，捕获表单的submit事件，并在第一次单击后禁用提交按钮。

$(“form”).submit(function(){
    $(“:submit”,this).attr(“disabled”,”disabled”);
});

四、在元素上存储自定义数据
可以将任意的javascript值、甚至数组和对象通过名为data()的方法附加到DOM元素上。
data(name,value)——将传入的值添加到为所有包装元素准备的jQuery托管数据仓库中。name—要存储的数据名称，value—要存储的值。
data(name)——通过指定的名称来获取之前在包装集的第一个元素上保存的任何数据。
removeData(name)——删除之前在包装集的所有元素上保存的数据

五、改变元素样式
（1）添加和删除类名
addClass(names)——为包装集中的所有元素添加指定的单个或多个类名。
names—指定要添加的单个类名，或以空格分隔的字符串表示的多个类名。如果参数是一个函数，则为每个包装元素调用此函数，设置当前元素为函数上下文，并且传递两个参数：元素的下标和当前类的值。函数的返回值作为单个或多个类名。
removeClass(names)——删除指定的单个或多个类名。
toggleClass(names)——如果元素不存在指定类名则为其添加此类名，如果元素已经拥有这个类名则从中删除此类名。注意：会分别检测每个元素。
例：

function swapThem(){$(‘tr’).toggleClass(‘striped’);}
$(function(){
    $(“table tr:nth-child(even)”).addClass(“striped”);
    $(“table”).mouseover(swapThem).mouseout(swapThem);
}

（2）获取和设置样式
css(name,value)——设置每个匹配元素的已命名CSS样式属性为指定的值
name——要设置的CSS属性名称
value——一个包含属性值得字符串、数字，或函数。如果是一个函数，则为每个包装元素调用此函数，设置当前元素为函数上下文，并且传递两个参数：元素的下标和CSS属性当前的值。函数的返回值作为CSS属性值的新值。
例：

$(“div.expandable”).css(“width”,function(index,currentWidth){
    return currentWidth+20;
});

注：通过传递一个0.0-1.0之间的值，就可以让通常有问题的opacity属性完美地跨浏览器工作。
css(properties)——设置所有匹配元素的CSS属性为传入对象的多个键值。
例：

$(‘<img>’,
{
src:’images/xxx.png’,
alt:’xxx’,
title:’xxx’,
click:function(){
    alert($(this).attr(‘title’));
}
}).css({
cursor:’pointer’,
border:’1px solid black’,
padding:’12px 12px 20px 12px’,
backgroundColor:’white’
})

css(name)——获取包装集中第一个元素的CSS属性的已计算值。
 获取和设置尺寸
width(value) height(value)——设置匹配集中所有元素的宽度和高度。
width() height()——获取包装集中第一个元素的宽度和高度
innerHeight()——返回第一个匹配元素的内部高度，不包含边框但包含内边距
innerWidth()——返回第一个匹配元素的内部宽度，不包含边框但包含内边距
outerHeig()——包含边框和内边距。如果margin参数为true，则包含外边距，否则忽略外边距
outerWidth()——包含边框和内边距。如果margin参数为true，则包含外边距，否则忽略外边距
 定位和滚动
offset()——返回包装集中第一个元素相对于文档参照源的位，px。返回值：一个用浮点数来表示left和top属性的Javascript对象，用来描述相对于文档源的以像素为单位的位置。
position()——返回包装集中第一个元素相对于最近偏移父元素的位置，px。
偏移父元素：是拥有显式定位规则relative或absolute的最近的祖先元素
scrollLeft()——返回第一个匹配元素的水平滚动偏移值
scrollLeft(value)——设置所有匹配元素的水平滚动偏移值
scrollTop()——返回第一个匹配元素的垂直滚动偏移值
scrollTop(value)——设置所有匹配元素的垂直滚动偏移值
【内容操作】
一、html()和text()
1、html()方法
**$().html()** //获取HTML内容
**$().html("HTML内容")** //设置HTML内容
2、text()方法
**$().text()** //获取文本内容
**$().text("文本内容")** //设置文本内容
html()和text()属性返回值的区别
HTML代码 html()返回值 text()返回值
<div>绿叶学习网</div> “绿叶学习网” “绿叶学习网”

HTML代码  ：<div><b>绿叶学习网</b></div>
html()返回值："<b>绿叶学习网</b>"
text()返回值："绿叶学习网"``

HTML代码  ：<div><b></b></div>
html()返回值："<b></b>"
text()返回值：""（空字符串）

3、移动和复制元素
append(content)——将传入的HTML片段或者元素追加到所有匹配元素的内容中
prepend(content)——将传入的HTML片段或者元素添加到所有匹配元素的内容的开头
before(content)——将传入的HTML片段或者元素插入为目标元素的兄弟节点，位于目标元素之前。目标包装元素必须已经是DOM的一部分。
after(content)——将传入的HTML片段或者元素插入为目标元素的同级节点，位于目标元素之后。目标包装元素必须已经是DOM的一部分。
另一种将元素从一个地方移动或复制到另一个地方的方法，是将源元素包裹起来（而不是目标元素），然后再方法的参数中指定目标元素。
appendTo(targets)——将包装集中的所有元素追加到指定目标元素内容的末尾。
targets——（字符串|元素）包含jQuery选择器的字符串，或者DOM元素。
prependTo(targets)——将包装集中的所有元素追加到指定目标元素内容的开头。
insertBefore(targets)——将包装集中的所有元素添加到DOM中指定目标元素的前面。
insertAfter(targets)——将包装集中的所有元素添加到DOM中指定目标元素的后面。
4、包裹与反包裹元素
wrap(wrapper)——使用传入的HTML标签或元素的副本将匹配集中的元素包裹起来。
wrapper——（字符串|元素）一个包含元素开始和结束标签的字符串，用来包裹匹配集中的每个元素；或者一个元素，其副本将用作包装器
例：$(“a.surprise”).wrap(“<div class=’hello’></div>”)
wrapAll(wrapper)——使用传入的HTML标签或者元素的副本，将匹配集中的元素作为一个整体包裹起来
wrapInner(wrapper)——使用传入的HTML标签或者元素的副本，将匹配集中的元素内容（包含文本节点）包裹起来
unwrap()——删除包装元素的父元素。子元素和其所有的同级节点一起替换了DOM中的父元素。
5、删除元素
remove(selector)——从页面DOM中删除包装集中的所有元素。返回值是包装集。绑定到元素上的任何jQuery数据或事件也会被同时删除。
detach(selector)——从页面DOM中删除包装集中的所有元素，保留绑定的事件和jQuery数据。
empty()——删除匹配集中所有DOM元素的内容
6、复制元素
clone(copyHandlers)——创建包装集中元素的副本，并返回包含这些副本的新包装集。这些元素和任何子节点都会被复制。copyHandlers：为true，则复制事件处理器；为false或省略，则不复制事件处理器。
例：$(‘ul’).clone().insertBefore(‘#here’).end().hide();
7、替换元素
replaceWith(content)——使用指定的内容替换每个匹配元素。返回包含被替换元素的jQuery包装集。
例：

$(‘img[alt]’).each(function(){
    $(this).replaceWith(‘<span>’+$(this).attr(‘alt’)+’</span>’);
});

replaceAll(selector)——使用调用此方法的匹配集的内容，替换所有与传入的选择器相匹配的元素。返回包含插入元素的jQuery包装集
注：当向replaceWith()传入一个现有元素时，该元素首先会从DOM中的原始位置删除，然后再重新添加以替换目标元素，如果有多个这样的目标元素，则会复制足够数量的原始元素副本。
replaceAll()返回的包装集中包含的是用来替换的元素，被替换的元素已经丢失，不能对其操作。

二、val()
表单元素不像普通元素，它们的值都是通过表单元素的value属性来传递的。
**$().val()** //获取表单元素，如果此元素是一个可以多选的元素时，返回值是所有选择项组成的数组
例：$(‘[name=”radioGroup”]:checked’).val()
返回唯一被选中的单选按钮的值（如果没有被选中，则返回undefined），比遍历简单。

var checkboxValues=$(‘[name=”checkboxGroup”]:checked’).map(
    function(){return $(this).val();}
).toArray();

$().val("表单元素的值") //设置表单元素
val(values)——导致包装集中任何复选框、单选按钮或者<select>元素的可选项变成选中（checked）或者选择（selected）状态，只要它们值匹配传入的values数组中的任何一个值。
values——一个数组，用来确定应该选中或者选择哪些元素
例：$(‘input,select’).val([‘one’,’two’,’three’]);
搜索页面上所有的和元素，只要这些元素的值与输入字符串‘one’,’two’,’three’中任何一个相匹配，都会变成选中或选择状态。