Jquery基础入门一内置方法和属性（2）

 1. 控制对象样式的方法：

         样式类实际上是一种特殊的属性（class）。不过 jQuery 为此定义了三个方法专门用来控制样式类，其中包括增加类、删除类和开关类，具体说明如下。

         添加类addClass()     ("p").addClass("red");  添加一个样式

         删除类removeClass(class)   删除一个样式

           如果用attr（） 和removeAttractive（"class"），则会把原来的样式全部干掉。而不像上面那样添加删除都是特定的，不会对原来的样式产生影响。

jQuery 还自定义了一个toggleClass(class)方法，它如同一个开关，如果元素已经定义了指定样式类，则会删除该样式类，否则增加该样式类。巧用这个方法，可以很轻松地设计鼠标经过或单击时动态改变元素样式的效果。

$("li").each(function(){ //遍历jQuery 对象内所有对象
		this.onmouseover = function(){ //为当前元素注册鼠标经过时的事件
			$(this).toggleClass("bg"); //开关背景样式类（bg）
		};
		this.onmouseout = function(){ //为当前元素注册鼠标移开时的事件
			$(this).toggleClass("bg");//开关背景样式类（bg）
		};
		this.onclick = function(){ //为当前元素注册鼠标单击时的事件
			$(this).toggleClass("bg1");//开关背景样式类（bg1）
		};
	});

2.获取元素包含信息的函数：

test() ：只读取显示的文档，对包含的其他标签忽略，在用来赋值的时候也只是字符串，不能添加dom结构

html()：读取包括其他标签在内的文档。在用来赋值的时候，会显示DOM结构的信息，可以添加图片，或特殊格式的文字。

注意：  text()和 text(val)方法能够读写 jQuery 对象所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本，这个方法对HTML 和XML 文档都有效。

html()和 html(val)方法只作用于 jQuery 对象中第一个元素，也就是说只能够读写第一个元素内的HTML 源代码，且不能用于XML 文档，仅适用于XHTML 文档。在写的时候是作用于所有匹配对象 1.8.2版本

 

3.获取值和赋值的函数val()：

   用此函数可以获取控件的值，也可以用来给控件赋值。  

   在赋值的时候，对于下拉菜单，也可以不用数组来传递值，但对于单选按钮和复选框必须使用数组来传递参数值。

$("select").val(["3"]);
$("select").val("3");
$("input").val(["radio2"]);

$("input").val(["radio2","check2"]);
$("select").val(["1","3"]);

 

CSS样式 .定义共同的，#定义指定ID的。

<style type="text/css">
		 .red{
		 	color:red;
		 }
		 .bold{
		 	font-size: 25px;
		 	font-weight: bold;
		 }
		ul li{
			font-size: 20px;
		}
		.bg { background:#FF99FF; } /* 样式类1 */
		.bg1 { background:#00CCFF; } /* 样式类2 */
		#menu {
			list-style: none;
		}
		#menu li{
			color:green;
		}
		</style>	

 

 

$(function(){
	$("p").addClass("red");
	$("p").addClass("bold");
	alert($("select").val());//output di yi ge
});
function changCss(){
	$($("p")[0]).removeClass("bold");
}
function delCss(){
	$($("p")[1]).removeAttr("class");
}
function addCss(){
	$("p").attr("class","red bold");
	//$("p").attr("class","bold");
}
$(document).ready(function(){
	$("li").each(function(){ //遍历jQuery 对象内所有对象
		this.onmouseover = function(){ //为当前元素注册鼠标经过时的事件
			$(this).toggleClass("bg"); //开关背景样式类（bg）
		};
		this.onmouseout = function(){ //为当前元素注册鼠标移开时的事件
			$(this).toggleClass("bg");//开关背景样式类（bg）
		};
		this.onclick = function(){ //为当前元素注册鼠标单击时的事件
			$(this).toggleClass("bg1");//开关背景样式类（bg1）
		};
	});
	
	//alert($("p")[0].innerHTML);
	alert($("p").text());// 读取所有匹配元素
	alert($("p").html());// 只读第一个匹配元素
	$($("p")[0]).text("aaa<SPAN>bbb</SPAN>");
	$("p").html("bbb<font color='blue'>kkk</font>");//所有匹配元素
	//$("p").text("8888"); //所有匹配元素
});