jQuery操作属性
- 操作元素属性
- 操作样式类
- 操作样式
- 获取或设置元素高度和宽度
- 操作内容
-
- 操作HTML代码
- 操作text文本
- 操作值
- 查找和筛选元素
-
- 过滤
- 查找
- 链式操作
操作元素属性
属性是每个页面元素的重要内容，HTML标签可以有一到若干个属性。id即是元素的常用属性之一。例如：
我们可以使用javascript中的getAttribute和setAttribute来操作元素的"元素属性"。
在jQuery中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性
获取元素属性值：
$(selector).attr('属性名')
设置元素属性值：
$(selector).attr({'属性名':'属性值'})
传多个：
$('img').attr({'src':'./ydggg.jpg','alt':'我是大锅'})
操作样式类
样式类是CSS中的一个概念，它用于设定页面上对应于“class”属性的元素的样式显示。rose样式类就是一个最简单的样式类。
.rose {
background-color: #FFE4E1;
}
添加样式类：
$(selector).addClass('样式类名')
删除样式类：
$(selector).removeClass('样式类名')
判断元素是否有给定样式类:
$(selector).hasClass('样式类名')
交替添加（删除）样式类：
$(selector).toggleClass('样式类名')
使用addClass(class)和removeClass(class)函数可以方便地对页面元素应用设定好的样式类。但是，这种需求改变了页面元素的class属性。而且其局限性在于必须事先定义好将要使用的CSS样式类，这样一来其灵活性就不是很好。
jQuery中直接操作CSS样式。jQuery不但可以得到指定元素的某个CSS属性的值，还可以随意地对指定元素进行CSS样式的设定，并且jQuery还提供了操作高度、宽度以及偏移的函数。
操作样式
获取样式属性值：
$(selector).css('样式属性名')
设置样式属性值：
$(selector).css({'属性名':'属性值'})
获取或设置元素高度和宽度
我们希望获取测试图层的宽度, 使用attr方法获取"元素特性"为undifined, 因为并没有为div添加width. 而使用css()方法虽然可以获取到style属性的值, 但是在不同浏览器里返回的结果不同, IE6下返回auto, 而FF下虽然返回了正确的数值但是后面带有"px".
- 宽度
$(selector).width():获取宽度 $(selector).width(value):设置宽度 - 高度
$(selector).height():获取高度 $(selector).height(value):设置高度
操作内容
所谓内容，就是直接跟终端用户打交道的部分，如测试页面上的两段文字本身。接下来将介绍使用jQuery来操作元素的内容，包括操作HTML代码、操作文本以及操作值三个部分。
操作HTML代码
HTML代码就是之前经常见到的被“<”和“>”包含起来的标签元素。jQuery中的函数html()和html(val)分别用来获取以及设置指定页面元素的HTML代码。这里的HTML代码是一种泛指，它不能处理XML文档，但是对XHTML的各种标签支持良好。
操作text文本
除了可以直接操作HTML代码之外，jQuery还提供了一种可以直接操作指定元素标签内文本内容的函数，即text()以及text(val)函数。
操作值
val()函数用来获得第一个匹配元素的当前值。在jQuery 1.2中对该元素作了增强，可以用来操作select等元素。如果多选，将返回一个数组，其包含所选的值。
操作元素的固有属性：
$(selector).prop('属性名')
设置元素的固有属性值：
$(selector).prop('属性名','属性值')
data() 方法向被选元素附加数据，或者从被选元素获取数据。
注释：这是底层级的方法；使用 .data() 更加方便。
向元素附加数据，然后取回该数据：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
查找和筛选元素
过滤
查找
链式操作
“链式操作”是jQuery语法中最有特色的一个功能之一。简单地说，“链式操作”就是把之前需要分很多行书写的代码使用“.”连接成一行进行书写。这在很大程度上能够节省网站需要加载的代码量，同时也使对元素的各种操作更加集中。
其缺点就是由于链式操作所必需的连贯性，可能导致代码的可读性有所降低。
<table border="1" id="tab">
<tbody id="tb"></tbody>
</table>
<script type="text/javascript">
alert($("table").first-child().attr("id"));
$(“#tb”).append(“<tr><td>10</td><td>tom</td></tr>”);//正确
$(“#tb”).append(“<tr><td>10</td>”).append(“<td>tom</td>”).append(“</tr>”);//错误
</script>
Append方法是插入到tbody里面，而链式操作返回来的还是tbody对象，所以在错误代码中第二个append实际上是直接插入到tbody中，而不是插入到tr中。
错误代码这种用append方法最后生成的代码结果如下：
<tbody>
<tr>
<td>1001</td>
</tr>
<td>tom</td>
</tobdy>
jQuery的链接操作如果使用得当，可以极大的提高编写jQuery代码的效率。
$("tr#first")
选择器用于得到表格的第一行，之后使用
next()
函数取得表格的第二行，然后调用
addClass()
函数为表格的第二行应用样式。这里如果在使用了
next()
函数之后仍然想对之前的页面元素，即表格的第一行进行操作该怎么办呢？jQuery中提供了一个专门的函数
end()
来处理这种情况。
end()
函数将使操作回滚到最近的一个“破坏性”操作之前。也就是说，将匹配的元素列表变为前一次的状态。