jQ DOM

hasClass（class）检查当前的元素是否含有某个特定的类，如果有返回true
这其实就是is（“.”+class）。

      if ($("#web").hasClass("box")) {
           alert("有box");
        }else{
           alert("没有box");
         }

//1.0 JavaScript中创建DOM节点
//创建流程
//1创建元素：document.createEvent()
//2.为节点添加一下属性 element.setAttribute();
//3.可以使用innerText或者innerHTML属性添加文本或者HTML内容
//4.使用parentElement.appendChild()方法将新创建的节点添加到父亲节点
window.onload = function () {
//创建DIV节点
var div = document.createElement(“div”);
//给创建的DIV节点添加class属性
div.setAttribute(“class”, “box”)
//给创建的DIV节点添加文本或者HTML内容
div.innerHTML = “这是一个通过JS动态添加的div”
console.log(div);
//将创建的节点添加到父亲节点里面
document.body.appendChild(div);
}

    1.0jQuery创建节点
    $(document).ready(function () {

        //通过jQuery的$（）函数创建div节点并且添加属性和文本内容
        var $div = $("<div class='box'>这是一个通过JQ动态添加的div</div>");//对比JS: JQ更简单方便
       // $div.attr("class", "box");
        console.log($div);
        //通过jQuery中的append（）方法将新创建的节点添加到body元素中
        $("body").append($div);
    });

      1.0  append()与appendTo()方法

        function appendFun() {
            //$(A).append(B);将B添加到A中
            $(".box").append("<p>通过append方法添加的动态标签</p>")
        }
        function appendToFun() {
            //$(A).append(B);将A添加到B中
            $("<p>通过appendTo方法添加的动态标签</p>").appendTo(".box")
        }
        function prependFun() {
            //$(A).prepend(B);将B添加到A中(和append添加的元素有位置上的区别）
            $(".box").prepend("<p>通过prepend方法添加的动态标签</p>")
        }
        function prependToFun() {
            $("<p>通过 prependTo方法添加的动态标签</p>").prependTo(".box");
          //  $(".btngroup").prependTo(".box");也可以做一个位置的移动 互相进行调换
        }

1.0 after()与before()方法
after()在每个匹配的元素之后插入内容
function afterFun() {
//$(A).after(B）；在后面插入B元素
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box").after("<p…(A).before(B）；在前面插入B元素
$("#box").before(“

通过jQ’uery中的before方法动态添加p标签

”)
}

    //1.1 insertAfter（）与insertBefore（）

    function insertAfterFun() {
        //$(A).insertAfter(B）；在B后面插入A元素
        $("<p>通过jQ'uery中的insertAfter方法动态添加p标签</p>").insertAfter("#box");
    }
    function insertBeforeFun() {
        //$(A).insertBefore(B）；在B前面插入A元素
        $("<p>通过jQ'uery中的insertAfter方法动态添加p标签</p>").insertBefore("#box");
    }



    1.0 jQuery删除节点的方法 remov（）与empty（）方法

empty()清空匹配的所有子元素
remove();清空匹配到的所有元素
append 给匹配元素添加元素
detach();清空显示效果 但是内存还是存在的
$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。
但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
function emptyFun() {
$("#box").empty();//清空所有子元素
}
function removeFun() {
var st = $("#box").remove();//清空匹配到的所有元素
console.log(st);
$(“body”).append(st); //append给匹配元素添加元素

      //  $("p").remove(":even")//清空匹配到的偶数
    }
    //1.1jQuery删除节点的方法 detach（）方法

    function detachFun() {
        var st1 = $("#box").detach();//清空显示效果  但是内存还是存在的
        console.log(st1);
        $("body").append(st1);
    }

$(document).ready(function () {
$("#web li ").eq(2).css({ fontSize: 20, color: “red” });//eq(0)传入索引 获取匹配索引的那个值

        $("#web li ").first().css({ "fontSize": "20px", "color": "red" })//first 匹配第一个元素
        $("#web li ").last().css({ "fontSize": "20px", "color": "green" })//first 匹配最后一个元素

var p = $(“web”).find(“p”);//查找匹配元素里面的子元素
$(“P”).css(“font-size”, “40px”)
})