【jQuery系列0】初识jQuery之属性

       接触jQuery是从做项目开始的，当时只知道我们的项目里边用到了jquery、ajax等等，一听高大上的感觉，但是哪里用到了作用是什么并不清楚，直到看了jquery视频才恍然大悟：原来这就是jquery，我还一直以为那就是单纯的js呢！

jQuery简介

      jQuery,即JavaScript和查询Query,它是继prototype之后又一个优秀的JavaScript库,它兼容多浏览器，核心理念是“写得更少,做得更多”，由美国人于2006年1月在纽约的barcamp发布，吸引了世界各地众多的JavaScript高手加入，目前已成为最流行的JavaScript库。jQuery的语法设计使开发更便捷，它有很多功能，例如操作文档对象、选择DOM元素、事件处理、动态特效等，还提供了API让开发者自行编写插件,通过插件来扩展它的功能，其模块化的使用方式使开发更灵活。

属性

1.基本属性
attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。
例如：
var object=$("div").attr("width");

attr(key,fn):为所有匹配的元素设置一个计算的属性值。
key (String) : 属性名称
fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值
示例
把src属性的值设置为title属性的值。
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("title", function() { return this.src });

attr(key,value):为所有匹配的元素的key属性设置一个value值。
例如：为所有的div设置一个width为100px的属性值
$("div").attr("width","100px");
也可以一次设置多个属性
同时改变alt 属性 和 添加 title属性, 我们可以使用一个“名/值”形式的对象 (JavaScript object literal)传递给这个方法。 每个 key-value 对象将增加或者修改一个属性：
$(‘#greatphoto‘).attr({
  alt: ‘Beijing Brush Seller‘,
  title: ‘photo by Kelly Clark‘
});
当设置多个属性,包含属性名的引号是可选的，警告： 当设置样式名（“class”）属性时，必须使用引号！

removeAttr(name):从每一个匹配的元素中删除一个属性

2.CSS类属性
addclass(class):为每个匹配的元素添加指定的类名。
addclass(function(index,class)):为每个匹配的元素添加指定的类名。
function(index, class) (Function) : 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值
实例：
$(‘ul li:last‘).addClass(function() {
    return ‘item-‘ + $(this).index(); 
});
removeclass(class),removecalsss(function(index,class));分别于addcalss相反

togglecalss(class):如果存在（不存在）就删除（添加）一个类,来回切换
togglecalss(calss,switch):如果开关switch参数为true则加上对应的class，否则就删除
class (String) :CSS类名
switch (Boolean) :用于决定元素是否包含class的布尔值。
实例：每点击三下加上一次 ‘selected‘ 类
$("p").click(function(){
        $(this).toggleClass("highlight", count++ % 3 == 0);   
});
togglecalss(function(index,class),[switch]):从所有匹配的元素中删除全部或者指定的类。
function(index, class) (Function) : 返回class名的一个函数，接受两个参数，index为元素在集合中的索引位置，class为原先元素的class值。
switch (可选)(Boolean) : 用于决定元素是否包含class的布尔值。
示例
根据父元素来设置class属性
jQuery 代码:
$(‘div.foo‘).toggleClass(function() {
    if ($(this).parent().is(‘.bar‘) {
      return ‘happy‘;   
    } else {
      return ‘sad‘;   
    } 
});

3.html属性

html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(function(index, html)):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

4.文本属性
text():取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val)
设置所有匹配元素的文本内容
text(function(index,text))
设置所有匹配元素的文本内容

5.值属性
val():得第一个匹配元素的当前值
val(val):设置每一个匹配元素的值。
val(fn):设置每一个匹配元素的值,fn (Funtion) : 一个函数，返回要设置的值。