1.jQuery - 获得内容和属性
(1)获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
(2)获取属性 - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
2.jQuery - 设置内容和属性
(1)设置内容 - text()、html() 以及 val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
(2)text()、html() 以及 val() 的回调函数
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
(3)设置属性 - attr()
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
3.jQuery - 添加元素
(1)jQuery append() 方法-在被选元素的结尾插入内容
$("p").append("Some appended text.");
(2)jQuery prepend() 方法
$("p").prepend("Some prepended text.");
(3)通过 append() 和 prepend() 方法添加若干新元素
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
}
(4)jQuery after()-在被选元素之后插入内容 和 before() 方法-在被选元素之前插入内容
$("img").after("Some text after");
$("img").before("Some text before");
(5)通过 after() 和 before() 方法添加若干新元素
4.jQuery - 删除元素
(1)jQuery remove() 方法-删除被选元素及其子元素
$("#div1").remove();
(2)jQuery empty() 方法-删除被选元素的子元素
$("#div1").empty();
(3)过滤被删除的元素
$("p").remove(".italic");
5.jQuery - 获取并设置 CSS 类
(1)jQuery addClass() 方法-向被选元素添加一个或多个类
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
(2)jQuery removeClass() 方法-从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
(3)jQuery toggleClass() 方法-对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
6.jQuery - css() 方法
(1)返回 CSS 属性
$("p").css("background-color");
(2)设置 CSS 属性
$("p").css("background-color","yellow");
(3)设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});
7.jQuery - 尺寸
(1)jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
(2)jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
(3)jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
(4)返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});