jQuery基础-DOM篇

jQuery对DOM的操作上,在原生的JS的基础上封装和简化出对节点的创建、删除、插入、替换和复制,还有jQuery中丰富的遍历操作。

1、从创建DOM节点写起

通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作一般而言我们都是先定义好HTML结构,但是想想一下当我们过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了,而动态的处理节点就是常见的一个DOM操作,下面先列举一个DOM创建节点及节点属性的例子
HTML

<div class="left">
    点击当前区域会动态创建元素节点
</div>

<script type="text/javascript">
    var body = document.querySelector('body')
    var div = document.querySelector('.left')

  
    div.addEventListener('click',function(){
      //创建一个div元素,为其设置一个class=right的属性
      var rightDiv = document.createElement('div')
      rightDiv.setAttribute('class','right')
      //动态的为创建的节点添加内容,将节点添加到body上
      rightDiv.innerText = "动态的创建DIV节点" 
      body.appendChild(rightDiv)
    })
</script>

CSS样式

.left,.right {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left {
        background: red;
    }
    
    .right {
        background: yellow;
    }

代码演示
查看源码

在上面例子HTML中引入jQuery后,script部分可以这样写

  let $body = $('body');
  $('div').on('click',function(){
    let div = $("<div class='right'>动态创建DIV节点</div>")
    $body.append(div)
  })

通过上面实现同样的功能,但是DOM操作经过jQuery封装后比使用原生JS简洁很多,这里常见就是将操作的节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构")

$("<div class='right'>动态创建DIV节点</div>")

这就是jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活。

2、DOM节点的删除

在jQuery中常见的对DOM节点删除操作的是empty()和remove()方法,下面直接通过一个demo说明

<style>
    .test {
      width: 100px;
      height: 100px;
      background: red;
    }
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通过jQuery empty方法移除元素</h2>
    <div class="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>通过点击jQuery的empty移除元素</button>

    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <div class="test2">
        <p>p元素5</p>
        <p>p元素6</p>
    </div>
    <button>通过点击jQuery的remove移除元素</button>
    <button>通过点击jQuery的remove移除指定元素</button>

    <script type="text/javascript">
    $("button:first").on('click',function(){
      //只删除div节点中的节点
      $(".test").empty()
    })

    $("button:eq(1)").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中,包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('5')")
    })
    </script>

代码演示

需要注意的是使用remove方法删除div节点的时候,remove内部会自动销毁操作事件的方法,这样可防止"内存泄漏",下面我们通过上面的例子来总结下empty()和remove()删除节点的区别:

empty()

  • 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点
  • empty不能删除自己本身这个节点

remove()

  • 该节点与该节点所包含的所有后代节点将同时被删除
  • 提供传递一个筛选的表达式,删除指定合集中的元素

3、DOM节点的插入

前面已经写过如何的去动态创建元素,但这样是不够的,只是将其临时的存放在内存中,最终我们需要的时候将动态创建的元素放到页面文档中并呈现出来,那么问题来了,如何操作了?
这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部。针对这样的处理,jQuery就定义2个操作的方法:

  • append :这个操作就是指定的元素执行原生appendChild方法
  • appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

其实这里的append()和appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同,除了以上两种方法还有prepend()和prependTo(),只不过后两种是将匹配的元素前置内容当中

4、DOM节点的复制和替换

  • 复制节点:clone()
    复制节点是DOM常见的操作,clone()复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点;当我们在clone(ture)传入一个布尔值ture时,不仅复制了节点结构,还将其绑定的事件和数据一并克隆了,下面看一个例子:
    HTML
<div class="clone">
    <h3>仅复制节点结构 => clone()</h3>
    <p>你喜欢的水果是?</p>
    <ul>
      <li>苹果</li>
      <li>橘子</li>
      <li>菠萝</li>
    </ul> 
  </div>
  
  <div class="cloneTrue">
    <h3>复制节点结构、绑定的事件、数据 => clone(true)</h3>
    <p>你喜欢的水果是?</p>
    <ul>
      <li>苹果</li>
      <li>橘子</li>
      <li>菠萝</li>
    </ul> 
  </div>

jQuery的clone()方法

    $('.clone ul li').on('click',function(){
      $(this).clone().appendTo('ul:first')  //复制当前点击的节点,并将其追加到ul中
    })

    $('.cloneTrue ul li').on('click',function(){
      console.log(this)
      //复制当前点击的节点元素和其所绑定的点击事件,并将其追加到ul中
      $(this).clone(true).appendTo('ul:last')  
    })

代码演示

  • 替换节点:replaceWith()和replaceAll()
    replaceWith(newContent):使用$()选择节点A,调用replaceWith方法,传入一个新的内容B(HTML字符串、DOM元素或jQuery对象),用来提花选中的节点A。
    replaceAll(target):功能与replaceWith()类似,但目标和源相反。
    下面我们举一个例子来对上面两个替换方法进行说明
    HTML
<div class="left">
        <button class="bt1">点击,通过replaceWith替换内容</button>
        <button class="bt2">点击,通过rreplaceAll替换内容</button>
    </div>
    <div>
        <div class=oneDiv>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    
<script>
   $(".bt1").on('click', function() {
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })

        //找到内容为第六段的p元素
        //通过replaceAll删除并替换这个节点
    $(".bt2").on('click', function() {
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    })
</script>

这里我们需要注意的是,replaceWith()与replaceAll() 方法替换的同时删除掉被替换节点相关联的数据和事件绑定

  • 包裹节点:wrap()
    若需要讲元素用其他元素包裹起来,即给它增加一个父元素,jQuery提供了一个wrap方法。先看一段代码
<p>p元素</p>

给P增加一个div包裹

$('p').wrap('<div></div>')      //为p元素增加一个父div结构

需要注意的是wrap(fn)可以传入一个回调函数,返回用于包裹元素的HTML内容或jQuery对象

$('p').wrap(function(){
  return '<div></div>'       //同上面类似,但写法不一样
})

与wrap()相反的是,unwrap()方法用来给选择的元素删除父节点,这个与remove()方法不同的是,它只是删除父节点而保留子节点。

5、DOM节点的查找和遍历

  • find()、children()方法
    理解节点查找关系:
<div class="div">
  <ul class="son">
    <li class="grandson">open</li>
  </ul>
</div>

我们可以通过$('div').find('li')来查找出li元素节点,若使用$('div').children()查找的只能是ul元素节点,其实这里我们依据定义方法的单词就可以判断出find()查找方法更为广泛,而children()只可以查找出自己的子元素节点

  • parent()、parents()方法
    与上面的children()查找方法相反,parent()是用来查找父元素的$('li').parnet() ,这样我们查找的也是ul元素节点 。也类似find与children的区别,parent只会查找一级,parents则会往上一直查到查找到祖先节点,也就是说可以$('li').parnets()再上面查找到的就是祖辈元素div

  • next()、pre()方法
    这里其实很好理解next()就是查找某个节点的下一个兄弟元素,而pre()就是查找某个节点的上一个兄弟元素,下面还是举一个简单的例子

        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>

        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>

        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <button>点击:next()查找</button>
        <button>点击:pre()查找</button>

jQuery的next()和pre方法

//点击第一个button,触发回调函数;找到所有class=item-2的li
//然后给每个li加上红色的边框
$('button:first').on('click',function(){
  $('item-1').next().css('border','1px solid red')
})

$('button:first').on('click',function(){
  $('item-2').pre().css('border','1px solid blue')
})
  • siblings()方法
    与next()和pre()不同,siblings()方法是取得匹配的元素中其他兄弟节点的集合

上面讲的这些方法都是如何去查找匹配元素节点的,而遍历一般用的是jQuery中的each()方法

  • each()方法
    each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。
    上面的一段介绍中有总结出来就是3个重点:
    1、each是一个for循环的包装迭代器
    2、each通过回调的方式出来,并且有两个固定的实参,索引和元素
    3、each回调方法中的this指向当前迭代的dom元素

语法:$('xxx').each(function(index element))

完!

其实和数据库操作类似,主要的DOM操作也无非就是增、删、改、查,外加一个遍历,通过这篇总结希望有时候忘了一些操作方法的时候可以随时来查看

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 800评论 0 8
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,002评论 0 9
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,316评论 0 8
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 594评论 0 1
  • jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活. 一、创建节点 1.创建元素...
    尘中老阅读 283评论 1 1