设置元素及内容

html() 获取元素中的HTML内容（相当于innerHTML）text() 获取文本内容（自动清理HTML标签）html(value) 设置innerHTML的内容text(value) 替换文本内容（覆盖innerHTML中所有的文本和标签）val() 获取value属性,加属性表示设置value的值val([value,value]) 控制选中的组件

text() 会过滤掉标签中的HTML标签，text对于以下段落的处理结果是:

<div id="a"> <p>这是一个段落</p> <p>这是第二个段落</p> <p>这是第三个段落</p> </div>

这是一个段落 这是第二个段落 这是第三个段落

当val([“value”,”value2”,…]) 参数为数组时，与value对应的表单组件会被选中

表单： <input type="checkbox" name="name" value="man"> <input type="checkbox" name="name" value="women"> 操作： $("input").val(["man","women"]); // 两个复选框都会被选中

PS: 当html() 和 text() 的参数带有HTML标签时，HTML会原封不动的输出HTML标签，而text()会将HTML标签转义后再输出，所以text()输出的是纯文本，即使文本中有HTML标签也会按照纯文本输出。

元素的属性操作

attr(“属性名”)attr(“属性名”,”属性值”) 设置属性值attr({key:value,key:value}) 设置多个属性attr(“属性值”,function(index,value){})value表示原来的value（如果没有value则为undefined）removeAttr(“属性名”) 删除属性

同时设置多个属性

$("#input").attr({ class:'a', size:10 });

通过匿名函数设置属性值

$("#input").attr('value',function(index,value){ return index + value; });

以上方法都可使用匿名函数

CSS

css(“”) 获取css样式css(“属性名”,”属性值”) 设置css样式css([“属性名”,”属性名”,…]) 返回包含所有属性的对象(原生js对象)css(“属性名”,function(index,value){}) var data = $("#a").css(['width','height','background-color']); for(var i in data ){ alert(data[i]); }

设置多个样式：

css({ "属性名":"属性值"， "属性名":"属性值"， }) $("#a").css({ "width":"200px", "height":"200px", "background-color":"green" });

each() 遍历对象成员属性

对于原生的js对象： $.each(对象,function(样式属性名,属性值){})

$.each(data,function(a,b){ alert(a+":"+b); });

对于jQuery对象： $(“div”).each(function(index,element){}) element是DOM对象

$("div").each(function(index,element){ alert(index+element.innerHTML) });

toggleClass()

toggleClass(className) 默认样式和指定样式之间的切换toggleClass(className,switch) 移除和添加指定的样式toggleClass([switch]) 移除和添加已有的所有样式toggleClass(function(){}) 匿名函数toggleClass(function(index,className,switchBool){}) 匿名函数(形参名不能是关键字，否则会报错)addClass(“class1 class2 class3”);增加class

removeClass(“class1 class2”);

true: 切换为指定样式

false： 切换为默认样式

在指定样式与默认样式之间切换

document.getElementById("a").onclick = function(){ $("#a").toggleClass("red"); };

下面的代码与上面的代码作用相同，用count计数切换的

var count=0; $("#a").click(function(){ $("#a").toggleClass("red",count++%2==0); });

实现在两个样式之间切换

var count = 0 ; $("#a").click(function(){ $(this).toggleClass("red" , count++ %2 == 0 ); if($(this).hasClass('red')){ $(this).removeClass('green'); }else{ $(this).toggleClass('green'); } });

使用不带参数的匿名函数

$("div").click(function(){ $(this).toggleClass(function(){ if($(this).index() % 2 == 0 ){ return "green"; } else { return "red"; } }) });

使用带参数的匿名函数

$(document).click(function(){ $("div").toggleClass(function(index,className,switchBool){ if(index % 2 == 0 ){ return "green"; } else { return "red"; } }) });

PS:removeClass()中没有带任何参数，表示的是把指定元素中的所有类名移除