jQuery学习笔记（三）

这篇是jquery操作DOM的部分。

捕获元素和属性

获取内容和属性值

• text()：获取或设置元素的文本内容。
• html()：获取或设置元素的内容。
• val()：获取或设置表单字段的值。

实例：

$("#btn1").click(function() {
    alert("Text: " + $("#test").text());
});

$("#btn2").click(function() {
    alert("HTML: " + $("#test").html());
});

$("#btn1").click(function() {
    alert("值为: " + $("#test").val());
});

• 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": "http://www.runoob.com/jquery",
        "title": "jQuery 教程"
    });
});

// attr()回调函数
$("button").click(function() {
    $("#runoob").attr("href", function(i, origValue) {
        return origValue + "/jquery";
    });
});

设置内容和属性值

设置内容和属性值使用的也是上面三个方法。

实例：

$("#btn1").click(function() {
    $("#test1").text("Hello world!");
});

$("#btn2").click(function() {
    $("#test2").html("<b>Hello world!</b>");
});

$("#btn3").click(function() {
    $("#test3").val("RUNOOB");
});

设置内容可以有回调函数，回调函数有两个参数，第一个参数是被选元素列表中当前元素的下标，第二个参数是旧值。

实例：

$("#btn1").click(function() {
    $("#test1").text(function(i, origText) {
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
    });
});

$("#btn2").click(function() {
    $("#test2").html(function(i, origText) {
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
    });
});

tips

• attr()：自定义属性用attr()
• prop()：元素固有属性用prop()

添加元素

• append()：在被选元素中最后面插入内容。
• prepend()：在被选元素中最前面插入内容。
• after()：在被选元素后面插入内容。
• before()：在被选元素前面插入内容。

实例：

$('p').append('abc');
$('p').prepend('abc');

实例：

function appendText() {
    var text1 = '<p>文本-1。</p>';
    var text2 = $("<p></p>").text("文本-2。");
    var text3 = document.createElement("p");
    text3.innerHTML = '文本';
    $('p').append(text1, text2, text3);
}

实例：

$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

实例：

function afterText() {
    var text1 = '<p>文本-1。</p>';
    var text2 = $("<p></p>").text("文本-2。");
    var text3 = document.createElement("p");
    text3.innerHTML = '文本';
    $('p').after(text1, text2, text3);
}

删除元素

• remove()：删除被选元素及其子元素。
• empty()：删除被选元素的子元素。

实例：

$('div').remove();
$('div').empty();

还可以传一个参数（选择器）来选择要删除的元素：

$("p").remove(".italic");

获取和设置css

操作css

• addClass()：给元素添加类。
• removeClass()：移除类。
• toggleClass()：切换添加删除类。
• css()：获得或者设置css属性。

实例：

// 添加类
$("button").click(function() {
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important warn alert");
});

// 移除类
$("button").click(function() {
    $("h1,h2,p").removeClass("blue");
});

// 切换类
$("button").click(function() {
    $("h1,h2,p").toggleClass("blue");
});

// css()
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
$("p").eq(index).css();

jquery盒子模型

• width()：取得或设置元素的宽度。
• height()：取得或设置元素的高度。
• innerWidth()：取得元素的width加上左右padding。
• innerHeight()：取得元素的height加上上下padding。
• outerWidth()：取得元素的width加上左右padding和border-width。
• outerHeight()取得元素的height加上上下padding和border-width。