说明
本文转自菜鸟教程。
JQuery获取内容和属性
获得内容
三个简单实用的用于DOM操作的JQuery方法:
- text():设置或返回所选元素的文本内容
- html():设置或返回所选元素的内容(包括HTML标记)
- val():设置或返回表单字段的值
例如:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
下面的例子是通过JQuery的val()方法获得输入字段的值:
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
获取属性-attr()
JQuery attr()方法用于获取属性值,下面的例子为获得链接中href属性的值:
$("button").click(function(){
alert($("#runoob").attr("href"));
});
JQuery设置内容和属性
设置内容-text()、html()以及val()
- text():设置或返回所选元素的文本内容
- html():设置或返回所选元素的内容(包括HTML标记)
- val():设置或返回表单字段的值
例如:
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
text()、html()以及val()的回调函数
text()、html()以及val()均拥有回调函数,回调函数有两个参数:被选元素列表当中当前元素的下标以及原始的值,然后以函数新值返回您希望使用的字符串:
$("#btn1").click(function() {
$("#test1").text(function(i, origText) {
return "旧文本:" + origText + " 新文本:Hello World! (index: " + i + ")";
});
});
设置属性-attr()
attr()方法用于设置/改变属性值,例如:
$("button").click(function() {
$("#runoob").attr("href", "http://www.google.com");
});
attr()方法也可以同时设置多个属性,例如:
$("button").click(function() {
$("#runoob").attr({
"href" : "http:www.google.com",
"title": "JQuery"
});
});
JQuery添加元素
append()
用于在被选元素的结尾插入内容,例如:
$("p").append("追加");
prepend()
在被选元素的开头插入内容,例如:
$("p").prepend("在开头追加");
通过append()和prepend()方法添加若干新元素
append()和prepend()方法能够通过参数无限数量的新元素,在下面的例子中,我们创建若干个元素,这些元素可以通过text/HTML、JQuery或者JavaScript/DOM来创建,然后通过append()方法把这些新元素追加到文本中:
function appendText() {
var text1 = "<p>文本。</p>"; // 使用HTML标签创建文本
var text2 = $("<p></p>").text("文本。"); // 使用JQuery创建文本
var text3 = document.createElement("p")
; // 使用DOM创建文本
text3.innerHTML="文本";
$("body").append(text1, text2, text3); // 追加新元素
}
after()和before()
after() 方法在被选元素之后插入内容,before() 方法在被选元素之前插入内容。
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
通过after()和before()方法添加若干新元素
after()和before()方法能够通过参数无限数量的新元素,在下面的例子中,我们创建若干个元素,这些元素可以通过text/HTML、JQuery或者JavaScript/DOM来创建,然后通过append()方法把这些新元素追加到文本中:
function appendText() {
var text1 = "<b>I </b>"; // 使用HTML标签创建文本
var text2 = $("<i></i>").text("love "); // 使用JQuery创建文本
var text3 = document.createElement("big")
; // 使用DOM创建文本
text3.innerHTML="JQuery!";
$("img").after(text1, text2, text3); // 追加新元素
}
after()、before()与append()、prepend()之间的区别
看下面的例子:
append:
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
结果如下:
<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>
而对于after:
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
结果如下:
<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>
可见两者的区别是:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
JQuery删除元素
如需删除元素和内容,有以下两个方法:
- remove():删除被选元素及其子元素
- empty():从被选元素中删除子元素
remove()
remove()方法删除被选元素及其子元素:
$("#div1").remove();
empty()
empty()方法删除被选元素的子元素:
$("#div1").empty();
过滤被删除的元素
remove()方法可以接收一个参数,允许对被删除元素进行过滤,该参数可以是任何JQuery选择器的语法,例如:
$("p").remove(".italic");
上面的例子用于删除class=”italic”的所有p元素。
JQuery获取并设置CSS类
- addClass():向被选元素添加一个或多个类
- removeClass():从被选元素删除一个或多个类
- toggleClass():对被选元素进行添加/删除类的切换操作
- css():设置或返回样式属性
实例样式表
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
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");
});
JQuery css()方法
css()方法用于返回或设置被选元素的一个或多个样式属性。
返回CSS属性
其语法格式如下:
css("propertyname");
看下面的这个例子:
$("p").css("background-color");
设置CSS属性
其语法格式如下:
css({"propertyname":"value", "propertyname":"value",...});
看下面这个例子:
$("p").css({"background-color":"yellow", "font-size":"200%"});
JQuery尺寸
通过JQuery可以很容易处理元素和浏览器窗口的尺寸,其常用方法有:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
看下面这张图:
width()和height()
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距),height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
$("button").click(function() {
var text = "";
text += "div的宽度是:" + $("div1").width() + "<br/>";
text += "div的高度时:" + $("div1").height();
});
innerWidth()和innerHeight()
innerWidth() 方法返回元素的宽度(包括内边距),innerHeight() 方法返回元素的高度(包括内边距)。
$("button").click(function(){
var txt = "";
txt += "div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
txt += "div 高度,包含内边距: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
outerWidth()和outerHeight()
outerWidth() 方法返回元素的宽度(包括内边距和边框),outerHeight() 方法返回元素的高度(包括内边距和边框)。
$("button").click(function(){
var txt = "";
txt += "div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt += "div 高度,包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
});