为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery——dom操作

标签:
JQuery

续:

3、dom操作
   1)查找  dom / d1.html
       a,查询或者修改节点的html内容
           html()
       b,查询或者修改节点的文本
           text()
       c,查询或者修改节点的属性
           attr()
       d,查询或者修改节点的值
           val()
   2)创建  dom / d2.html
       $a = $(html)
       如:$('<a>dfd</a>') 就创建好,之后再使用append()方法插入到dom中。
   3)插入节点  
       append():向每个匹配的元素内部追加内容
       prepend():向每个匹配的元素内部前置内容
       after():在每个匹配的元素之后插入内容
       before():在每个匹配的元素之前插入内容
   4)删除节点  dom / d3.html
       remove() //这个方法返回时删除节点的引用。
       remove(selector)
       empty():清空节点元素里的内容
   6)复制节点   dom /d5.html
       clone()
       clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
       如:$(selector).clone(true).appendTo(selector)//复制的节点再添加到后面的选择器中
   7)属性操作
       读取:attr('id');
       设置:    attr('id','d1') 或者一次
       设置多个 attr({"id":"d1","class":"s1"});
       删除:removeAttr('id')
   8)样式操作 dom / d6.html
       获取和设置: attr("class","")    或者 attr("style","")
       追加:addClass('s1')
       移除:removeClass('s1')
       或者removeClass('s1 s2')
       或者removeClass()//会删除所有样式
       切换样式:toggleClass,有该样式,就删除,没有,就添加。
       是否有某个样式 hasClass('s1')
       读取css('font-size')
       设置css('font-size','60px')或者
       css({'':'','':''})//设置多个样式
   9)遍历节点 dom / d7.html
       children()/children(selector):获取子元素集合。只考虑子元素,不考虑其它后代元素。
       next()/next(selector):下一个兄弟
       prev()/next(selector):前一个兄弟
       siblings()/siblings(selector)其它兄弟
       find(selector):从当前节点开始查找后代。    
       parent():父节点
       closest():取得最近匹配元素。首先检查当前元素是否匹配,如果匹配直接返回,不匹配 就向上查找父元素,逐级向上直到匹配到。若一直没有匹配到就返回空的jQuery对象。
   10)替换节点
       replaceWith() :将匹配的元素替换成指定的元素
       replaceAll()  :和replaceWith一样,只不过是颠倒了replaceWith的操作。
       如:把<p>I Love You</p>标签替换成<strong>I Love You</strong>
           $('p').replaceWith('<strong>I Love You</strong>');或者$('<strong>I Love You</strong>').replaceAll('p');

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消