JQuery中的DOM操作


JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲。

所以我感觉有必要总结一下

<div id="divlist" class="ddiv">
    <a>我是第一层的a标签</a>
    <ul>
        <li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li>
        <li><a>我是 乔安生ul > li 里面的a标签2</a></li>
        <li><a>我是 ul > 乔安生li 里面的a标签3</a></li>
        <li><a>我是 ul > li 乔安生里面的a标签4</a></li>
        <li><a>我是 ul > li 里面的a标签5乔安生</a></li>
        <li title="你妹啊"></li>
    </ul>
    <a>我是第一层的a标签2</a>
    <a>我是第一层的a标签3</a>
    <ul>
        <li class="li1" title="你妹啊"><a>111</a></li>
        <li><a>222</a></li>
        <li><a>333</a></li>
        <li><a>444</a></li>
        <li><a>555</a></li>
        <li title="你妹啊"></li>
    </ul>
</div>

查找节点
$(".ddiv ul li:eq(1)").text()//获取元素的文本内容
$(".ddiv ul li:eq(0)").attr('title');//获取元素的属性(属性有class、id、title、date-id等)

<div id="div2">
  <p id="haha">哈哈哈哈哈</p>
  <p id="hehe">嘿嘿嘿嘿嘿</p>
  <p id="lala">啦啦啦啦啦</p>
</div>
插入节点
append()    $("#haha").append("<p>我是append</p>");      结果<p id="haha">哈哈哈哈哈<p>我是append</p></p>      结论append会把属性插入到指定元素结尾处(注意是结尾处不是后面)
appendTo()   $("<p id='qwe'>appendTo</p>").appendTo("#haha"); 结果<p id="haha">哈哈哈哈哈<p id="qwe">appendTo</p></p>    结论appendTo和append相反是把前面的元素放到后面元素的结尾处
prepend()    $("#haha").prepend("<p>我是prepend</p>");     结果<p id="haha"><p>我是prepend</p>哈哈哈哈哈</p>      结论prepend会把数据元素放到目标元素文本开始处
prependTo()   $("<p>prependTo</p>").prependTo("#haha");     结果<p id="haha"><p>prependTo</p>哈哈哈哈哈</p>        结论prependTo他是和上面的相反他是把目标元素插入到
after()    $("#haha").after("<p>我是after</p>")        结果<p id="haha">哈哈哈哈哈</p><p>我是after</p>        结论after可以把自定义元素插入到目标元素的后面
insertAfter()   $("<p>我是insertAfter</p>").insertAfter("#haha") 结果<p id="haha">哈哈哈哈哈</p><p>我是insertAfter</p>      结论他也是把目标元素放到数据元素的后面
before()      $("#haha").before("<p>我是before</p>")        结果<p>我是before</p><p id="haha">哈哈哈哈哈</p>        结论before是把自定义元素添加到目标元素的前面
insertBefore()

<div id="divlist" class="ddiv">
    <a>我是第一层的a标签</a>
    <ul>
        <li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li>
        <li><a>我是 乔安生ul > li 里面的a标签2</a></li>
        <li><a>我是 ul > 乔安生li 里面的a标签3</a></li>
        <li><a>我是 ul > li 乔安生里面的a标签4</a></li>
        <li><a>我是 ul > li 里面的a标签5乔安生</a></li>
        <li title="你妹啊"></li>
    </ul>
    <a>我是第一层的a标签2</a>
    <a>我是第一层的a标签3</a>
    <ul>
        <li class="li1" title="你妹啊"><a>111</a></li>
        <li><a>222</a></li>
        <li><a>333</a></li>
        <li><a>444</a></li>
        <li><a>555</a></li>
        <li title="你妹啊"></li>
    </ul>
</div>

删除节点
JQuery提供了三种删除节点的方法 remove(),detach(),empty()
$("#haha").remove() 直接干掉 目标元素
$("ul li").remove("li[title=你妹啊]") 干掉 title=你妹啊 的所有元素
$(".li1").empty() 清空目标元素里面的元素和文本
$(".li1").detach()和remove()一样移除掉元素,但是这个方法会保留删除元素已经绑定的事件

复制节点
clone()
$("ul li").click(function () {
$(this).clone().appendTo("ul");
//复制当前点击的节点,并追加到<ul>元素中
});//end ul li

替换节点
$("#haha").click(function () {
$("#haha").replaceWith("换了!!!");
});//end haha

包裹节点
$("p").wrap("<strong></strong>") 在p元素外面添加一个<strong></strong>标签
$("p").wrapAll("<strong></strong>")
wrap是为每一个p标签外面都添加一个<strong></strong>标签
wrapAll是把p标签包裹起来 如果上下两行都是p 那么<strong></strong>标签会把他们两个都包起来。

属性操作
在JQuery中可以使用attr()方法来获取和设置元素的属性,removeAttr()方法来删除元素属性
$(".li1").attr("title") 获取目标元素的title属性
$(".li1").attr("title","aa") 设置目标元素的title属性的值
$(".li1").attr({"title":"aa","name":"qioa"}) 同时设置目标元素的多个属性的值

$(".li1").removeAttr("title"); 删除目标元素的title元素

样式操作
设置样式
$("#haha").attr("class","aa"); 设置目标元素的引用的样式
追加样式
$("#haha").addClass("qiao") 为目标元素追加一个样式
移除样式
$("#haha").removeClass("qiao") 移除目标元素的样式

优质内容筛选与推荐>>
1、linux指令--ls
2、C++ Template 使用简介
3、Windows内核之线程的调度,优先级,亲缘性
4、.net mvc网站集成adfs(ws-fed协议)
5、python--网络通信协议


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn