播放记录

jQuery中的DOM操作

博客Web前端javascriptjs 2019年08月27日 14:27:43

可以把DOM看成是一个页面文件的元素目录树,对DOM的各种操作都是围绕这棵树开展的。
对DOM的操作,其实就是对节点的操作。

查找节点:
查找元素节点:用JQ的选择器即可选定元素节点;     $(“p”)
查找属性节点:在查找到元素节点后,用JQ的attr()方法查找其属性节点;     $(“p”).attr(“title”)

创建节点:
创建元素节点的同时,可以将属性节点和文本节点一起创建,即添加一个完整的HTML标签。
分两步:
1,新建元素
2,插入到DOM中
新建用$( )创建
如在ul下添加一个li元素
var $li=$(“

  • 内容
  • ”);
    插入DOM中用append()方法
    $(“ul”).append($li);

    注:新建元素时要遵守XHTML规范,区分大小写,须闭合标签。

    插入节点:
    JQ提供了不止append()一种插入节点的方法,归纳如下:
    A.append(B)     向匹配的A元素内部追加元素B
    A.appendTo(B)     将匹配的A元素追加到元素B中
    A.prepend(B)     向匹配的A元素内部前置添加元素B
    A.prependTo(B)     将匹配的A元素前置添加到元素B中
    A.after(B)     在匹配的A元素后面添加元素B
    A.insertAfter(B)     将匹配的A元素添加到元素B后面
    A.before(B)     在匹配的A元素之前添加元素B
    A.insertBefore(B)     将匹配的A元素添加到元素B前面

    删除节点:
    remove()
    var $a=A.remove()     删除匹配的元素A,返回值是被删除的节点的匹配引用,即A,所以删掉后如果想恢复,可以用$a.appendTo(B)恢复
    empty()
    准确的说,empty()不是删除节点,而是清空所匹配的节点的所有内容和后代节点

    复制节点:
    clone()
    A.clone().appendTo()     //即 匹配的元素.clone([true]).复制到哪去
    clone()中的true参数是可选的,不带则表示只复制节点,不复制节点绑定的方法事件,不具备任何行为。如果带着true,则表示在复制了节点的同时也复制了节点中所绑定的事件。

    替换节点:
    replaceWith()     repalceAll()
    二者作用相同,只是表现形式相反。
    如将p元素节点替换为strong节点:
    $(“P”).replaceWith(“…..”)
    $(“…..”).replaceAll(“P”)
    被替换的节点所绑定的事件也会随之消失。

    包裹节点:
    wrap()     wrapAll()     wraplnner()
    把某个节点用其他标记包裹起来
    例如把p节点用strong包裹起来:
    $(“p”).wrap(“”);     //即

    ………

    注:
    wrap()是将匹配的元素分别单独包裹
    warpAll()是将匹配的元素一起包裹,如果被包裹的元素中间有其他元素,则其他元素会放到包裹元素之后。
    wraplnner()是将匹配元素的字内容用某标记包裹起来。

    属性操作:
    attr()     //获取,设置元素属性,语法类似与css()
    $(“p”).attr(“title”)
    $(“p”).attr(“title,titlevalue”)
    $(“p”).attr({
    属性名:值,
    属性名:值,
    ………………….
    })
    removeAttr()     //删除元素属性
    $(“p”).removeAttr(“title”)

    样式操作:即对元素中的class属性进行操作,
    addClass()     //是追加,不是替换,class=”a b c ”
    removeClass()

    切换样式:
    toggleClass()     //控制样式上的重复切换,如果类名存在则删除它,如果类名不存在则添加它,即该样式有何无之间的切换
    类似与toggle(),toggle()是控制行为上的重复切换。

    判断是否有某个样式:
    hasClass()      //有则返回true,否则返回false
    用法同于is()

    区分:html()     text()

    html()     获取或替换匹配元素中的html源码
    text()      获取或替换匹配元素中的文本内容

    转载:https://www.xuecaijie.com/tag-jquery/21.html

    © 2018 www.qingketang.net 鄂ICP备18027844号-1

    武汉快勤科技有限公司 13554402156 武汉市东湖新技术开发区关山二路特一号国际企业中心6幢4层7号

    微信登录

    扫码关注,全站教程免费播放

    发表评论 X

    登录成功
    开通VIP

    订单金额:

    支付金额:

    支付方式: