jQuery操作

css()方法

// 原生查看css屬性值
var div = document.querySelector(".contain");
console.log(getComputedStyle(div, null)["background-color"]);
// jQuery查看屬性值
console.log($("div").css("width"));
var box = $(".contain");
// 參數(shù)可以是一個回調(diào)進行動態(tài)設(shè)置
box.css("background-color", function () {
    var bgcolor = ["cyan", "lightgreen", "lightblue", "lightcoral"];
    var index = Math.floor(Math.random() * bgcolor.length);
    return bgcolor[index];
});
// 設(shè)置自定義屬性，不傳第二個參數(shù)為查看自定義屬性
$("div").data("name", "item");
console.log($("div").data("name"));
// 新增自定義屬性
$("div").data("id", "12");
console.log($("div").data())
// 移除通過data方法新增或設(shè)置過的自定義屬性
$("div").removeData("id");
console.log($("div").data());

val()方法

// val()方法-獲取表單控件的value值
// 原生獲取
console.log(document.forms.item(0).username.value);
console.log(document.forms.item(0).password.value);
// jQuery獲取
console.log($("form #username").val());
// val()傳入?yún)?shù)則是設(shè)置
$("form #username").val("小小明")
console.log($("form #username").val());
// 也可以傳入回調(diào)函數(shù)
$("form #username").val(function () {
    // 返回默認值
    return this.defaultValue;
});
console.log($("form #username").val());

獲取元素位置和文本

// html()方法
// 原生獲取
console.log(document.querySelector("h2").innerHTML);
// jQuery獲取
console.log($("h2").html());
// 傳入?yún)?shù)則是設(shè)置
$("h2").html("用戶注冊")
console.log($("h2").html());
// 也可以寫入下style屬性
$("h2").html("用戶<span style=\"color:lightgreen\">注冊</span>");
// 獲取元素位置信息
// 原生獲取
console.log("元素距離左邊的距離 %s px", document.forms.item(0).getBoundingClientRect().left);
console.log("元素距離頂部的舉例 %s px", document.forms.item(0).getBoundingClientRect().top);
console.log("元素距離底部的距離 %s px", document.forms.item(0).getBoundingClientRect().bottom);
// jQuery獲取
console.log($("form").offset().top);

DOM操作

// DOM操作
// 元素添加
// append方法--父元素.append（子元素）
$("body").append("<ul>");
$("ul").append("<li>");
$("li").html("加油學(xué)習(xí)");
// appendTo方法 --子元素.appendTo（父元素）
$("<li>").html("PHP中文網(wǎng)").appendTo("ul");
// 也可以加入class屬性
$("<li>").addClass("blue").html("HTML中文網(wǎng)").appendTo("ul");
// 添加時如果選擇器中不是元素而是html標簽?zāi)敲粗С值诙€參數(shù)同時生成屬性
$("<li>", {
    "class": "green",
    "style": "background-color:lightgray",
}).html("走上人生巔峰").appendTo("ul");
// 可以傳入回調(diào)使得動態(tài)生成
$("ul").append(function () {
    var li = "";
    for (var i = 0; i < 5; i++) {
        li += "<li>最新商品" + (i + 1) + "</li>";
    }
    return li;
});
// 在指定位置之前添加--原位置.before(新元素)
$("ul>li:nth-of-type(4)").before("<li>好好學(xué)習(xí)</li>");
// 在指定位置之后添加-- 新元素.insertAfter（原位置）
$("<li>天天向上</li>").insertAfter($("ul>li:nth-of-type(5)"));
// 添加在最前面
$("ul").prepend("<li>我成第一了</li>");
// 元素的替換--原元素.replaceWith(新元素)
$("ul>li:last-of-type").replaceWith("<p> 我替換了別人</p>");

過濾器操作

// 過濾器操作
// 過濾器--先獲取一個較大的范圍然后在慢慢縮小選擇
console.log($("ul").filter(".cont")[0]);
// 通過過濾器獲取第一個ul中的第一個li
console.log($("ul").filter(".cont").children().first().css("background-color", "lightgreen"));
// 通過過濾器獲取第一個ul中的最后一個li
console.log($("ul").filter(".cont").children().last().css("color", "lightgreen"));
// 獲取任意一個
console.log($("ul").filter(".cont").children().eq(2).css("border", "1px solid black"));
// children只能獲取子元素，不能獲取更下級元素
console.log($("ul").filter(".cont").find(".red").css("color", "lightblue"));

總結(jié)

1.了解了jquery獲取屬性和原生獲取之間的區(qū)別

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：jquery中的許多功能 , 原生實現(xiàn)也非常方便的