[JQuery] JQuery第六课

说明

本文转自菜鸟教程。

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);
});