jQuery让页面生动起来（操作页面里面的元素）

操作元素的属性，看下面的例子：

把每一个img的alt的值都改为abc

下面是两代码，each里面的函数是遍历所选择的元素集，对每个元素做你想要的处理。

一个代码是每一个元素的alt的值设置成abc,

第二个代码是把取每个元素的alt的值，加到数组里面，可以视为对其（所选择的元素集）的自定义处理。

<script type="text/javascript">
$(document).ready(
function(){
$("img").each(
function(){this.alt="abc";}
);
}
);
</script>

<script type="text/javascript">
$(document).ready(
function(){
var allAlts=new Array();
$("img").each(
function(){
//this.alt="abc";
allAlts.push(this.alt);
}
);
alert(allAlts);
alert($("img")[0].alt);
}
);
</script>

下面，再看对其特性的处理。

1、 alert($("#def").attr("alt"));

　　为取得元素的特性值，一般为取一个元素才有意义。

2、$("img").attr('alt',function(index){return "这是第"+index+"个元素"});

　　对所选元素集添加特性。

3、$("img").attr(

　　{value:'',title:'please enter a value'}

　　);对所选元素加一组特性。

此可以看作为元素集attr的三个重载，对象都是元素集合，一个参数为取得特性的值，二个参数为添加元素集的特性值。第三个有{}为给元素集设定一组特性值。

下面，再看对元素样式类的处理。

1、$("button#abc").addClass("sss");

　　給所选的元素集添加类

2、$("button#abc").removeClass("sss");

　　给所选的元素集删除类

3、$("button#abc").toggleClass("sss");

　　如果匹配元素集合中元素没有使用样式‘class’则对该元素加入样式‘class’；如果已经使用该样式，则从该元素中删除该样式。

4、$("p:first").hasClass("srupriseMe")

　　$("p:first").is(".surpriseMe")

　　此两写法结果完全一样。

下面，看看对样式的处理：

1、$("div.sss").css("width",function(){return $(this).width()+200+"px"});

　　设置有sss类的元素，在原来的宽上面+200px

2、alert($("div.sss").css("width"));

　　取有sss样式的div元素的样式，中with的值

3、$("div.sss").css("width","100px");

　　$("div.sss").width("100px");

　　此两写法一样，对宽高都适用。

对元素内容的处理

1、alert($("div#display").html());

2、$("div#display").html("<a>bbbb</a>");

3、alert($("div#display").text());

4、$("div#display").text("ccccc");

5、$("div#display").append("<img width='50' id='def' alt='aaaa' height='50' />");

　　追加

6、("div#display").appendTo($("div#display2"));

　　移动

7、remove()

8、empty()

对表单的处理

1、val()

　　取值　　

2、val(value)

　　设置

这里，

对元素特性的操作用一个函数，attr,有几个重载。

对元素样式的操作用一个函数，css,有几个重载

对元素html的操作用一个函数，html,有几个重载

对元素text的操作用一个函数，text,有几个重载

对表单的值的操作，有val,也是有几个重载。

另加上一些别的方法，这样，就基本上有了解。