（27）HTML5-JQuery标签控制

jQuery内建的函数除了可以达到网页事件监听之外，还可以直接修改网页的属性（Attributes）和样式（CSS），以及对COM直接进行操作，更神奇的还在后头，jQuery函数还包括了一些视觉动画的处理，例如隐藏，显示，下拉显示，淡入淡出等，对于设计网页互动有非常大的帮助。

{Attributes}

jQuery提供了attr，class，value等函数可以直接设置，删除或获取HTML标签内的属性。

attr函数

jQuery内建的“attr”函数可以对标签中的“name”这类属性进行内容值得设置。例如如下jQuery语句，便可将“name”属性的内容从“hello”设置成“hi”；

$("div").attr("name","hi");

设置属性attr函数也可以通过“key：value”的方式一次设置标签中多个属性的值。例如使用以下jQuery语句一次设置<img>标签的src，title和alt属性。

$("img").attr({
	src:"move.png",
	title:"pic",
	alt:"test"
});

使用removeAttr函数则可以删除标签中的某个属性，例如：

$("div").rmoveAttr("name");

至于标签中的class属性，则有专用的设置与删除函数可供使用。

//替div标签设置class属性为test

$("div").addClass("test");

//替div标签删除值为test看的class属性

$("div").removeClass("test");

对于标签中的value属性，可通过val函数进行取值与设置，例如在HTML的《input》标签中就会常常用到value这个属性。

//获取input的Value

$("input").val();

//设置input的value

$("input").val("hello");

在之前的例子中，我们就是通过jQuery的css函数来直接改变标签的显示外观，还配合了触发事件的检测来实现网页互动的神奇效果。本来直接使用javascript控制css是非常麻烦的事情，因为在不同的浏览器版本下常常需要使用不同的javascript语句才能对同一件事的控制，但是jQuery的css函数就可以达到跨浏览器，统一指令的css控制效果，省去许多开发的麻烦。

//单一属性设置

$("p").css("color","red");

//多属性设置

$("p").css({"color":"red","background-color":"blue"});

//取得画布的高度

$("canvas").height();

//设置画布的高度

$("canvas").height(400);