【jQuery】四、基础DOM和CSS操作

要点：

• 设置元素及内容
• 元素属性操作
• 元素样式操作
• CSS 方法

一、设置元素及内容

1.设置和获取元素中的HTML内容

<div id="test">
    <h1>This is H1</h1>
</div>
console.log($("#test").html());    // <h1>This is H1</h1>

• 1
• 2
• 3
• 4

先获取当前的内容，再追加内容

$("#test").html($("#test").html() + "<span>span</span>")
console.log($("#test").html());    // <h1>This is H1</h1>  <span>span</span>

• 1
• 2

2.设置和获取元素中的文本内容

console.log($("#test").text());        // This is H1
$("#test").text("我要覆盖你");
console.log($("#test").text());            // 我要覆盖你

• 1
• 2
• 3

3.设置和获取表单的内容

console.log($("input").val());         // 按钮
$("input").val("我是按钮");
console.log($("input").val());             // 我是按钮

• 1
• 2
• 3

如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。

<select multiple="multiple">
    <option value="op1">op1</option>
    <option value="op2">op2</option>
    <option value="op3">op3</option>
    <option value="op4">op4</option>
</select>
$("select").val(["op1", "op4"]);       // 值为op1和op4的被选中

• 1
• 2
• 3
• 4
• 5
• 6
• 7

二、元素属性操作

<a href="###">体育</a>

• 1

1.获取属性

console.log($("a").attr("href"));      // 获取href的值， ###

• 1

2.设置属性

$("a").attr("href", "http://www.baidu.com");       // 设置属性值
console.log($("a").attr("href"));      // http://www.baidu.com
属性值可以为匿名函数
// index表示上次的索引，默认为0
// value表示上次的属性值
$("a").attr("href", function (index, value) {
    return "新版本:" + index + 1 + " " + value;
})
console.log($("a").attr("href"));      // 新版本:01 http://www.baidu.com

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

3.删除属性

$("a").removeAttr("href");
console.log($("a").attr("href"));      //  undefined

• 1
• 2

三、元素样式操作

<div id="box">box</div>
#box {
    height: 100px;
    width: 100px;
    background : red;
}
var box = $("#box");

• 1
• 2
• 3
• 4
• 5
• 6
• 7

1.获取样式

console.log(box.css("width"));  // 100px

• 1

如果获取的样式需要计算，那么可以传人一个匿名函数

box.css("width", function (index, value) {
    return (parseInt(value) + 500) + "px";
});

• 1
• 2
• 3

2.设置样式

box.css("background", "blue");

• 1

3.获取多个样式

var style = box.css(["width", "height", "background"]);
for (var v in style){
    console.log(style[v]);  // 100px 100px 
}

• 1
• 2
• 3
• 4

4.设置多个样式，可以传人一个对象参数

box.css({
    "font-size" : "100px",
    "background" : "orange"
});

• 1
• 2
• 3
• 4

5.遍历元素

$.each(style, function (attr, value) {
    alert(attr + ", " + value);     // width : 100px ...
});

• 1
• 2
• 3

6.添加类样式

#box {
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
}
.blue {
    background: blue;
}

.green {
    background: green;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

添加blue类

$("#box").addClass("blue");

• 1

删除blue类

$("#box").removeClass("blue");

• 1

切换样式

$("#box").click(function () {
    $(this).toggleClass("blue");
});

• 1
• 2
• 3

我们可以改变切换的频率

var count = 0;
$("#box").click(function () {
    $(this).toggleClass("blue", count ++ % 3 === 0);
});

• 1
• 2
• 3
• 4

实现样式之间的切换

$("#box").click(function () {
    $(this).toggleClass(function () {
        if ($(this).hasClass("blue")) {
            $(this).removeClass("blue");
            return "green";
        } else {
            $(this).removeClass("green");
            return "blue";
        }
    });
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 1

四、CSS方法

获取宽度

console.log($("#box").width());        // 100

• 1

设置宽度

$("#box").width(500);
$("#box").width("500pt");  // 加上单位，默认px
$("#box").width(function (index, value) {  // 传人匿名函数，返回设置值
    return value + 200;     // 当前值 + 200
});

• 1
• 2
• 3
• 4
• 5

height() 获取元素的高度
innerWidth() 获取元素宽度，包含内边距 padding
innerHeight() 获取元素高度，包含内边距 padding
outerWidth() 获取元素宽度，包含边框 border 和内边距 padding
outerHeight() 获取元素高度，包含边框 border 和内边距 padding
outerWidth(ture) 同上，且包含外边距
outerHeight(true) 同上，且包含外边距
以上的使用方法和width()同理，这里不再累赘
offset() 获取某个元素相对于视口的偏移位置

* {
    padding : 0;
    margin: 0;
}
#box {
    position: absolute;
    height: 100px;
    width: 100px;
    left: 200px;
    top:200px;
    border: 1px solid #ccc;
}
// 获取元素相对于视口的位置
console.log($("#box").offset().left);      // 200
console.log($("#box").offset().top);       // 200
// position() 获取某个元素相对于父元素的偏移位置
console.log($("#box").position().left);        // 200,父元素就是body
console.log($("#box").position().top);     // 200
scrollTop() 获取垂直滚动条的值
scrollTop(value) 设置垂直滚动条的值
console.log($(window).scrollTop());        // 0
$(document).click(function () {
    $(window).scrollTop(0);    // 点击任意位置，置顶
});