白学的小知识[jQ样式操作.jQ操作文本]

一.jQ样式操作：

1.直接设置样式值：

css(name,value) 设置单个属性。

css({name:value, name:value,name:value…}) 同时设置多个属。

$(this).css("border","3px solid red");
//或
$(this).css({"border":"3px solid red","opacity":"0.5"});
//设置透明度

//使用css()添加边框效果
$(document).ready(function(){
$("dl").mouseover(function() {
$(this).css({"border":"3px solid
red","opacity":"0.5","cursor":"pointer"});
});
$("dl").mouseout(function() {
$(this).css({"border":"3px solid #qaaa","opacity":"1"});
});

2.追加和移除样式：

追加：addClass(class)或addClass(class1 class2 … classN)

移除：removeClass(“style2 ”)或removeClass("style1 style2 ")

注：removeClass() //没有参数去除所有类样式。

<h2 class="style1" >addClass()追加元素的样式</h2>

3.切换样式：

 toggleClass()

toggleClass(class)

二.jQ操作文本与属性：

1.HTML代码操作：html()可以对HTML代码进行操作。

$("div.left").html();//获取元素中的html代码
//或
$("div.left").html("<div class='content'>…</div>");//设置元素中的html代码

2.文本操作：text()可以获取或设置元素的文本内容 。

$("div.left").text();//获取元素中的文本内容
//或
$("div.left").text("<div class='content'>…</div>");//设置元素中的文本内容

3.html()和text()的区别：

语法	参数	用途
html()	无	用于获取第一个匹配元素的 HTML 内容或文 本内容
html(content)	content 参数为元素的 HTML 内容	用于设置所有匹配元素的 HTML 内容或文本 内容
text()	无	用于获取所有匹配元素的文本内容
text (content)	content 参数为元素的文本 内容	用于设置所有匹配元素的文本内容

4.Value值操作：val()可以获取或设置元素的value属性值。

val([val|fn|arr])

va l 要设置的值。

function (index, value) 此函数返回一个要设置的值。接受两个参数， index 为元素在集合中的索 引位置， text 为原先的 text 值。

array 用于 check/select 的值。

$(this).val();//获取元素的value属性值
//或
$(this).val("要设的值");//设置元素的value属性值