jQuery的getter，setter和DOM操作（0819）

jQuery操作

css()方法

// 原生查看css属性值
var div = document.querySelector(".contain");
console.log(getComputedStyle(div, null)["background-color"]);
// jQuery查看属性值
console.log($("div").css("width"));
var box = $(".contain");
// 参数可以是一个回调进行动态设置
box.css("background-color", function () {
    var bgcolor = ["cyan", "lightgreen", "lightblue", "lightcoral"];
    var index = Math.floor(Math.random() * bgcolor.length);
    return bgcolor[index];
});
// 设置自定义属性，不传第二个参数为查看自定义属性
$("div").data("name", "item");
console.log($("div").data("name"));
// 新增自定义属性
$("div").data("id", "12");
console.log($("div").data())
// 移除通过data方法新增或设置过的自定义属性
$("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()传入参数则是设置
$("form #username").val("小小明")
console.log($("form #username").val());
// 也可以传入回调函数
$("form #username").val(function () {
    // 返回默认值
    return this.defaultValue;
});
console.log($("form #username").val());

获取元素位置和文本

// html()方法
// 原生获取
console.log(document.querySelector("h2").innerHTML);
// jQuery获取
console.log($("h2").html());
// 传入参数则是设置
$("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("加油学习");
// appendTo方法 --子元素.appendTo（父元素）
$("<li>").html("PHP中文网").appendTo("ul");
// 也可以加入class属性
$("<li>").addClass("blue").html("HTML中文网").appendTo("ul");
// 添加时如果选择器中不是元素而是html标签那么支持第二个参数同时生成属性
$("<li>", {
    "class": "green",
    "style": "background-color:lightgray",
}).html("走上人生巅峰").appendTo("ul");
// 可以传入回调使得动态生成
$("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>好好学习</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"));

总结

1.了解了jquery获取属性和原生获取之间的区别