1、添加元素
append() 在被选元素的结尾插入内容
$("p").append("增加在p标签后")
prepend() 在被选元素的开头插入内容
$("p").prepend("增加在p标签开头")
after() 在被选元素之后插入内容
$("p").after("在后面添加文本")
before() 在被选元素之前插入内容
$("p").before("在前面添加文本");
2、获取设置内容
text() 设置或返回所选元素的文本内容
//获取
$("#btn1").click(function(){
alert("Text: " + $("#test").text())
})
//设置
$("#btn1").click(function(){
$("#test1").text("Hello world!")
})
html() 设置或返回所选元素的内容(包括 HTML 标签)
//获取
$("#btn2").click(function(){
alert("HTML: " + $("#test").html())
})
//设置
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>")
})
val() 设置或返回表单字段的值
//获取
$("#btn1").click(function(){
alert("值为: " + $("#test").val())
})
//设置
$("#btn3").click(function(){
$("#test3").val("RUNOOB")
})
3、获取设置属性
attr() 获取和设置属性
//获取
$("button").click(function(){
alert($("#runoob").attr("href"))
})
//设置
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery")
})
//回调函数
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery"
})
})
4、删除元素
remove() 删除被选元素(及其子元素)
$("#div1").remove()
//过滤被删除元素————删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic")
empty() 从被选元素中删除子元素
$("#div1").empty();
5、操作CSS
addClass() 向被选元素添加一个或多个类
$("button").click(function(){
$("h1,h2,p").addClass("blue")
$("div").addClass("important")
})
//通过addClass来定义多个元素
$("button").click(function(){
$("body div:first").addClass("important blue")
})
removeClass() 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue")
})
toggleClass() 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue")
})
css() 设置或返回样式属性
//返回指定的CSS属性的值,语法:css("propertyname")
$("p").css("background-color")
//设置指定的CSS属性,语法:css("propertyname","value")
$("p").css("background-color","yellow")
//设置多个CSS属性,语法:css({"propertyname":"value","propertyname":"value",...})
$("p").css({"background-color":"yellow","font-size":"200%"})