目录
三、jQuery操作
1.三个简单实用的用于 DOM 操作的 jQuery 方法
(1)undefined text()
设置或返回所选元素的文本内容
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); });
(2)undefined html()
设置或返回所选元素的内容(包括 HTML 标记)
$("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });
(3)undefined val()
设置或返回表单字段的值
$("#btn1").click(function(){ alert("值为: " + $("#test").val()); });
2.如果是设置该值的话,直接在括号里面输出即可
(1)返回元素的属性
$("button").click(function(){ alert($("#runoob").attr("href")); });
(2)设置元素的属性
$("button").click(function(){ alert($("#runoob").attr("href",”#”)); });
3.用于添加新内容的四个 jQuery 方法
(1)undefined append()
在被选元素的结尾插入内容
$("p").append("追加文本");
(2)undefined prepend()
在被选元素的开头插入内容
$("p").prepend("在开头追加文本");
(3)undefined after()
在被选元素之后插入内容
$("img").after("在后面添加文本");
(4)undefined before()
在被选元素之前插入内容
$("img").before("在前面添加文本");
4.删除元素和内容
(1)undefined remove()
删除被选元素(及其子元素),删除所有,删除被选元素及其子元素
$("#div1").remove();
(2)undefined empty()
从被选元素中删除子元素,删除被选元素的子元素,被选中的元素不会删除
$("#div1").empty();
5.修改元素、内容和属性
(1)undefined addClass()
向被选元素添加一个或多个类,在添加类时,可以选取多个元素
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
(2)undefined removeClass()
从被选元素删除一个或多个类
$("h1,h2,p").removeClass("blue");
(3)undefined toggleClass()
对被选元素进行添加/删除类的切换操作
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
(4)undefined css()
设置或返回样式属性
返回指定的 CSS 属性的值
$("p").css("background-color");
设置指定的 CSS 属性
$("p").css("background-color","yellow");
设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});