如需要跟多资料请点击下方图片⬇（扫码加好友→备注66）

Jquery Dom操作

jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。<font color="red">注意：以下的操作方式只适用于jQuery对象。</font>

操作元素的属性

获取属性

方法说明举例
attr(属性名称)获取指定的属性值，操作 checkbox 时，
选中返回 checked，没有选中返回 undefined。		attr('checked')
attr('name')
prop(属性名称)获取具有true和false两个属性的属性值prop('checked')
<form action="" id="myform">    <input type="checkbox" name="ch" checked="checked"/>    aa    <input type="checkbox" name="ch" />    bb</form>        <script type="text/javascript">    var ch = $("input[type='checkbox']")    console.log(ch)    ch.each(function(idx, em){        console.log(idx + "-" + $(em) + "=" + this)        console.log($(em).attr('checked') + "==" + $(em).prop('checked'))        console.log('--------------')    })</script>

设置属性

方法说明举例
attr(属性名称，属性值)设置指定的属性值，
操作 checkbox 时，
选中返回 checked，
没有选中返回 undefined。		attr('checked',’checked’)
attr('name',’zs’)
prop(属性名称，属性值)设置具有true和false的属性值prop('checked',’true’)

移除属性

方法说明举例
removeAttr(属性名)移除指定的属性removeAttr('checked')
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>属性操作</title>        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>    </head>    <body>        <pre>            <h5>1.attr()</h5>            设置或者返回元素的属性 ;            <h5>2.prop()</h5>            设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。        </pre>        <hr />        <a href="http://www.baidu.com" id="a1">百度</a>        <a href="http://www.sina.com" id="a2">新浪</a>          <input type="checkbox" name="all" checked="checked"/>全选     </body>    <script type="text/javascript">        // 获取属性值：attr        console.log($('#a1').attr('href'));        console.log($(':checkbox').attr('name'));        // 若未选中显示undefined，选中显示 checked        console.log($(':checkbox').attr('checked'));                // 获取属性值：prop        // 若未选中显示false，选中显示 true        console.log($(":checkbox").prop('checked'));                 console.log($('#a2').prop('href'))        // 设置属性值        $('#a1').attr('href','https://jquery.com');        $(":checkbox").prop("checked",false);        // 移除属性        $('#a2').removeAttr('href');    </script></html>

操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

方法说明
attr(“class”)获取class属性的值，即样式名称
attr(“class”,”样式名”)修改class属性的值，修改样式
addClass(“样式名”)添加样式名称
css()添加具体的样式
removeClass(class)移除样式名称

增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’})例：css({"background-color":"red","color":"#fff"});2）css(“样式名”,”样式值”)例：css('color','white')
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>设置元素样式</title>        <script src="jquery-3.4.1.js" type="text/javascript" ></script>        <style type="text/css">            div{                padding: 8px;                width: 180px;            }            .blue{                background: blue;            }            .larger{                font-size: 30px;            }            .green {                background : green;            }        </style>    </head>    <body>        <h3>css()方法设置元素样式</h3>        <div id="conBlue" class="blue larger">天蓝色</div>         <div id="conRed">大红色</div>         <div id="remove" class="blue larger">天蓝色</div>    </body>    <script type="text/javascript">        // 获取样式名称        console.log($("#remove").attr("class"));        // 修改样式，那么id为remove的元素样式class只有green        // $('#remove').attr("class","green")        // 添加样式名称，class名称 --叠加        // $('#conBlue').addClass("blue larger");        // 添加元素具体样式        // { "":"" , "":"" }   名:值     对        $('#conRed').css({"background-color":"red","color":"#fff"});        $('#remove').css('color','red');        // 移除样式        // $("#remove").removeClass("blue larger");    </script></html>

操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是html。

方法说明
html()获取元素的html内容
html("html,内容")设定元素的html内容
text()获取元素的文本内容，不包含html
text("text 内容")设置元素的文本内容，不包含html
val()获取元素value值
val(‘值’)设定元素的value值
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>操作内容</title>        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>    </head>    <body>        <h3><span>html()和text()方法设置元素内容</span></h3>        <div id="html"></div>         <div id="text"></div>        <input type="text" name="uname" value="oop" />    </body>    <script type="text/javascript">        // 获取HTML内容，包括HTML标签        console.log($('h3').html());        // 获取文本内容，不包括HTML标签        console.log($('h3').text());        // 获取value值        console.log($('[name=uname]').val());        // 设置        $('#html').html("<p>使用html设置,看不到标签</p>");        $('#text').text("<p>使用text设置,能看到标签</p>");        $('[name=uname]').val("哈哈哈");        // console.info("abc");        // console.log("abc");        // console.warn("abc")        // console.error("abc");    </script></html>

创建元素

在jQuery中创建元素很简单，直接使用核心函数即可

$(‘元素内容’);
$('<p>this is a paragraph!!!</p>');

添加元素

方法说明
prepend(content)在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector)把 content 元素或内容加入 selector 元素开头
append(content)在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector)把 content元素或内容插入selector 元素内，默认是在尾部
before()在元素前插入指定的元素或内容:$(selector).before(content)
after()在元素后插入指定的元素或内容:$(selector).after(content)
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>追加</title>        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>        <style type="text/css">            div    {                margin: 10px 0px;            }            span{                color: white;                padding: 8px            }            .red{                background-color: red;            }            .blue{                background-color: blue;            }            .green{                background-color: green;            }        </style>    </head>    <body>        <h3>prepend()方法前追加内容</h3>        <h3>prependTo()方法前追加内容</h3>        <h3>append()方法后追加内容</h3>        <h3>appendTo()方法后追加内容</h3>        <span class="red">男神</span>        <span class="blue">偶像</span>        <div class="green">            <span >小鲜肉</span>        </div>     </body></html><script type="text/javascript">    var str ="<span id='mydiv' style='padding: 8px;width: 180px;background-color:#ADFF2F;'>动态创建span</span>";    // 1、使用prepend前加内容    $("body").prepend(str);        // 2、使用prependTo前加内容    $("<b>开头</b>").prependTo('body');        // 3、使用append后加内容    $("body").append(str);    // $("div").append($('.red')); // 当把已存在的元素添加到另一处的时候相当于移动         // 4、使用appendTo后追加内容    $(str).appendTo('body');    // $('.blue').appendTo("div");    </script>
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>插入元素</title>        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>        <style type="text/css">            span{                color: white;                padding: 8px            }            .red{                background-color: red;            }            .blue{                background-color: blue;            }            .green{                background-color: green;            }        </style>    </head>    <body>        <h3>before() 和 after()方法在元素之前后插入内容</h3>        <span class="green">财大气粗</span>    </body></html><script type="text/javascript">     var str1 = "<span class='red'>土豪</span>";     var str2 = "<span class='blue'>暴发户</span>";     $(".green").before(str1); // 前置元素     $(".green").after(str2); // 后存元素</script>

删除元素

方法说明
remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()清空所选元素的内容
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>删除元素</title>        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>        <style type="text/css">            span{                color: white;                padding: 8px;                margin: 5px;                float: left;            }            .green{                background-color: green;            }            .blue{                background-color: blue;            }        </style>    </head>    <body>        <h3>删除元素</h3>        <span class="green">jquery<a>删除</a></span>        <span class="blue">javase</span>        <span class="green">http协议</span>        <span class="blue">servlet</span>    </body></html><script type="text/javascript">    // 删除所选元素 或指定的子元素    // $("span").remove();    // 删除样式为blue的span    // $("span.blue").remove();    // 清空元素    // $("span").empty();    // $(".green").empty();    </script>

遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>遍历元素</title>        <style type="text/css">            span{                color: white;                padding: 8px;                margin: 5px;                float: left;            }            .green{                background-color: green;            }            .blue{                background-color: blue;            }        </style>        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>    </head>    <body>        <h3>遍历元素 each()</h3>        <span class="green">jquery</span>        <span class="green">javase</span>        <span class="green">http协议</span>        <span class="green">servlet</span>    </body>    <script type="text/javascript">        $('span').each(function (idx , e) {            console.log(idx + " ---> " + $(e).text());        })    </script></html>