使用jQuery操作DOM对象

jQuery对JavaScript中的DOM操作进行了封装jQuery中的DOM对象

样式操作

设置单个样式：    .css("属性名称"，"属性值");
设置多个样式：    .css({"属性名称1","属性值1":"属性名称2","属性值2"});
获取样式值：     .css("属性名称");
添加类样式：     .addClass("类样式名称");
移除类样式：     .removerClass("类样式名称");
切换类样式：     .toggleClass("类样式名称");
判断元素是否包含指定样式：    .hasClass("判断类样式名称");

        

内容及value值操作

获取元素中的html代码            .html();
设置元素中的html代码            .html("<h1>我最帅！</h1>");这里面可以直接使用标签
获取元素中的文本内容              .text()
设置元素中的文本内容              .text("我最帅")
元素失去焦点                   .blur()
元素获得焦点                     .focus()
获取元素的value属性值            .val()设置元素的value属性值            .val("设置的属性值")

 

节点操作

获取或创建节点
    工厂函数                        $("")
    通过选择器获取节点：                $("selector");
    把DOM节点转换为jQuery节点：         $("<p>")
    使用HTML字符串创建jQuery节点：     $("<p>文字</p>")

元素内部追加子节点
        to:到/给予
        将li节点追加到ul节点里                ul.append(li);
        将li节点追加到ul节点里                li.appendTo(ul);
        把li节点追加到ul节点最前            ul.prepend(li);
        把li节点追加到ul节点最前            li.prependto(ul);

元素外部插入同辈节
        把h1节点插入到h2节点之后            h2.After(h1)
        把h1节点插入到h2节点之后            h1.insertAfter(h2);
        把h1节点插入到h2节点之前            h2.before(h1)
        把h1节点插入到h2节点之前            h1.insertBefore(B);  

 
删除节点：
        删除h1节点                $("h1").remove();
        清空h2节点                $("h2").empty();

替换节点：
        将p节点替换为span节点            p.replaceWith(span)    
        将p节点替换为span节点            span.replaceAll(p)

克隆节点：
        克隆节点:                $("selector").clone(true/false)
复制节点，参数为true复制事件，false则不复制事件

节点遍历

 遍历子元素：
    children:获取元素的所有子元素
    find

遍历父元素：
    parent():获取元素的父级元素
    parents():获取元素的祖先元素
    closest：获取最近的祖先级别元素

遍历同辈节点:
    next：可以获取紧邻其后
    prev：可以获取紧邻其前
    siblings()   位于该元素前与后的所有同辈元素

遍历节点：
        let str = "";
        $("img").click(function (){
            $("li").each(function (index,element){
                str += $(this).text()+"</br>"
            })
            $("section").append(str);
        })；
    each：为每个匹配的元素规定要运行的函数
      语法：$(selector).each(function(index,element));
    index：选择器的位置
    element:当前的元素