JQuery使用（一）（元素和属性）

一.获取/更改内容（用于jQuery选取结果中的所有元素）

.html()
无参数时，元素返回所匹配的第一个元素的内容，例如（本文章所有示例的html文件都是以此为例）：

<ul style="list-style:none">    <li class="item1" id="one"><em>飞机</em></li>    <li class="item2" id="two">坦克</li>    <li class="item3" id="three">汽车</li>    <li class="item4" id="four">摩的</li>    <li class="item5" id="five">火车</li></ul>

然后我们使用.html()获取内容：

var $lihtml = $('li').html();

输出lihtml结果是：

<em>飞机</em>

有参数时，意思是替换元素的内容（内容可以包含html），依然是上面的例子：
我们使用.html(‘abc’)更新内容:

$('li').html('abc');

然后会发现所有li元素的内容都变成了’abc’。也可以把html()里面放一个函数方法。

.text()
无参数时，返回元素的文本内容，html()是内容包括元素标签，而text()是文本内容，例如依然上述例子：

var $litext =$('ul').text();

打印结果是（有空格）：飞机 坦克 汽车 摩的 火车
而：

var $litext =$('li').text();

打印结果是（无空格）：飞机坦克汽车摩的火车
以上2个例子可以看成，如果操作的元素ul有子元素，子元素文本之间会有空格；如果操作的元素li没有子元素，那么无空格。

有参数时，意思是替换元素的内容（内容包含的html都会被转换为文本），也可以用函数方法作为参数。

.replaceWith()
该方法会把匹配结果中的每个元素的内容替换为新的内容，同时会返回被替换的元素。

.remove()
该方法会移除匹配结果中的所有元素。

综合示例：

$('li:contains("的")').text('changes');$('li.item3').html(function(){      return '<em>'+$(this).text()+'</em>';});$('li#one').remove();

二.插入元素

.before()，该方法会将内容插入到选中的元素之前。

.after()，该方法会将内容插入到选中的元素之后。

.prepand()，该方法会将内容插入到选中元素的内部，紧跟在开始标签之后。

.append()，该方法会将内容插入到选中元素的内部，紧跟在结束标签之前。

三.获取和设置属性值

.attr()，该方法用来读取或设置指定的属性。需要读取时，在小括号中指定属性的名称，如果多个都满足条件，返回满足条件的第一个；如果需要更新属性，需要同时指定属性的名称以及新的属性值。例如：

var $at = $('li').attr('id');

获取id属性，结果是：one，多个li元素满足条件，但是只返回第一个元素的id。
再例如：

$(function(){        $at = $('li').attr('id','myid');        $('li').html(function(){            return $(this).attr('id');        });    });

结果是：
myid
myid
myid
myid
myid
我们用attr属性更改所有li元素的id为’myid’，然后打印li的id，全是myid。

.removeAttr()，该方法用来移除指定的属性（以及属性值）。只需要在小括号中指定需要从元素中移除的属性的名称。

.addClass()，该方法用于向class属性已有的值中添加一个新值，它不会覆盖已有的属性值。

.removeClass()，该方法用于从class属性中移除一个属性值，并保留该属性中的其他class名称。

四.循环遍历，操作选取结果中的每一个元素

.each()，该方法使用一个参数（这个参数是个函数），其中包含需要在每个元素上运行的代码。例如：

$(function(){        $('li').each(function(){            $('ul').append(this.id+'</br>');        });    });

首先获取所有li元素，然后each进行循环遍历，对每个li元素进行操作，进行的操作是，在ul元素后面加上每个li元素的id并换行。结果是：
飞机
坦克
汽车
摩的
火车
one
two
three
four
five

五.获取和设置CSS属性

.css()，该方法可以用于获取CSS属性和设置CSS属性。如果获取CSS属性，在小括号中填上需要获取的CSS属性，如果需要设置CSS属性，那么可以设置单个属性，也可以设置多个属性。
单个属性设置方式(设置li元素的背景色)：

$('li').css('background-color','#272727');

多个属性设置方式（设置li元素的margin-top、背景色、字体颜色）:

$('li').css({      'margin-top':'+=10',      'background-color':'#752222',      'color':'#227522'});

注意：设置单个属性时，属性和属性值之间用逗号，设置多个时用冒号。