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"); //所有匹配元素
});