JQuery对节点的操作

JQuery对节点的操作

1、创建和添加节点

首先，我们需要创建一个节点，而在jquery中创建一节点是非常迅速的，直接通过$符号。

let $a = $("<a href='http://www.baidu.com/' target='_blank;'>百度一下</a>");

就像这样，我们已经创建了一个a标签，但是，我们单单只是创建一个a标签，并没什么用，我们需要有个人去照顾她，所以接下来我们就会用到下面的一组方法：

1. append()：添加到子节点的后面
2. appendTo()：添加到子节点的后面
3. prepend()：添加到子节点的前面
4. prepend()：添加到子节点的前面

接下来举例：

<div class="box">
    <span>你好，欢迎来到王者荣耀</span>
</div>
<p>我是内容</p>

div {
    width: 200px;
    height: 200px;
    background-color: azure;
}

// $(".box").append($a);//添加到元素子节点的末尾
$a.appendTo(".box");//把创建的元素添加到谁的末尾
//添加到某个元素，可以写元素的选择器，也可以写元素的节点
//$(".box").append("<a href='http://www.baidu.com/' target='_blank'>百度一下</a>")
$("p").appendTo(".box");
//添加到子节点的前面  prepend()  prependTo()
$(".box").prepend($("p"));
$("p").prependTo(".box");
//添加兄弟节点  兄弟之后 after()  兄弟之前  before()
$(".box").after($("p"));
$(".box").before($("p"));

2、清空 移除 复制节点

举例：

//清空div   empty()
//$(".box").empty();
//移除   remove()
//$(".box").remove();
//复制   clone()
$(".box>span").clone().appendTo(".box");
//获取value值 val()
// console.log($("input").val());
// $("input").val("你搜吧！");
$("input").focus(function () {
    if ($(this).val() === "Select for……") {
        $(this).val("");
    }
}).blur(function () {
    if ($(this).val() === "") {
        $(this).val("Select for …");
    }
});

//html() 指的是元素里的代码
//text() 指的是元素里的文本

//width()和height()
//注册调整尺寸的事件
$(window).resize(function () {
    console.log($(window).width());
    console.log($(window).height());
});
$(window).scroll(function () {
    console.log($(this).scrollTop());
    console.log($(this).scrollLeft());
});