jquery文档操做

时间 2019-11-10

标签 jquery 文档栏目 JQuery 繁體版

原文原文链接

js的DOM操做,也就是所谓的增删改查DOM操做。经过js的DOM的操做，你们也能发现，大量的繁琐代码实现咱们想要的效果。那么jQuery的文档操做的API提供了便利的方法供咱们操做咱们的文档。javascript

看一个以前咱们js操做DOM的例子：html

$(function () {
    var ul0 = document.getElementsByTagName('ul')[0]; //第一个ul
    var newli = document.createElement('li'); //li对象建立
    // newli.innerHTML = '<a>小马过河</a>'; //建立的li添加内容  引号添加文本，反引号添加html。
    newli.innerHTML = `<a href="#">小马过河</a>`; //建立的li添加内容
    ul0.appendChild(newli);  //li对象追加到ul的最后
})

一.插入操做

知识点1：

语法：java

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素能够为：stirng | element（js对象） | jquery元素jquery

代码：app

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降风云变</title>
    <style>
    </style>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
         <script type="text/javascript">
            $(function () {
                var newli=document.createElement('li');
                newli.innerText='魔降风云变'
                $('ul :eq(0)').append('<li>小马过河</li>')//父中添加子，子能够是string
                $('ul :eq(0)').append(newli) //子能够是js对象
                $('ul :eq(0)').append($('.active'))//子能够是jq对象，结果是移动位置了。移动标签位置
        })
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    ------------------
    <ul>
        <li class="active"> ul2的一 </li>
        <li>ul2的二</li>
    </ul>
</body>
</html>

View Code

<li>小马过河</li>不是string，纠正一下。父追加子，子能够字符串，引发来的标签，DOM对象，jq对象dom

PS:若是追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操做。ide

彷佛追加到第一个子标签后面了，难道不是追加到最后么？开头添加一个元素，结果仍是第一个追加是在开头元素的后面，后面的追加到上一个追加的后面this

实际上是这样的：spa

指定索引的标签追加子元素，将子元素在第一个子元素内添加，这样的话，都是行内就一行显示，第一个子元素中有块级的就换行显示3d

不用指定索引的追加子元素才是正常的追加。

知识点2：

语法：

子元素.appendTo(父元素)

解释：追加到某元素子元素添加到父元素

            $(function () {
            $('<li>使用选择器追加，是从父的最后一个追加，且与索引追加没冲突</li>').appendTo($('.ul1'))
            $('<li>使用索引添加，从第一行后面开始追加</li>').appendTo($('ul :eq(0)'))
        })

$('<li>小马过河</li>').appendTo($('ul :eq(0)')) //子追加到父，

PS:要添加的元素一样既能够是stirng 、element(js对象) 、 jquery元素

知识点3：

语法：

父元素.prepend(子元素)；

解释：前置添加，添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

父前置加子，这里父是第一个ul，li里文字和这里的文字都是行内全部一行显示，‘’是谁 ‘’ 在前

父使用索引 prepend放法，不是想象的那样

没有索引，prepend, 前置追加一个子

知识点4：

语法：

子元素.prependTo(父元素)；

解释：前置添加，添加到父元素的第一个位置

$('<a href="#">mmm</a>').prependTo($('.ul1'))

知识点5：

语法：

兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；

解释：在匹配的元素以后插入内容

$('.ul1 li').after('mcw')  
 $('<li>小马过河</li>').insertAfter('.ul2 li')

元素对象.的后面加内容；$()对象点插入在元素选择器后 (非对象)

知识点6：

语法：

兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；

解释：在匹配的元素以后插入内容

$('.ul1 li').before('我是一个粉刷匠')
$('<h5>我是一个h5标题</h5>').insertBefore('.ul2 li')

元素对象.的前面加内容；内容对象.插入前面在选择器选中的（非对象）

2、克隆操做

语法：

$(选择器).clone();

解释：克隆匹配的DOM元素

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其全部的事件处理而且选中这些克隆的副本(简言之，副本具备与真身同样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

3、修改操做

知识点1：

语法：

$(selector).replaceWith(content);

将全部匹配的元素替换成指定的string、js对象、jquery对象。

//将全部的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将全部h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

将选中的对象替换用内容

知识点2：

语法：

$('<p>哈哈哈</p>')replaceAll('h2');

解释：替换全部。将全部的h2标签替换成p标签。

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

感受和replaceWith没太大区别

四、删除操做

知识点1：

语法：

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

View Code

点击一次就删除，按钮就没了。；

在前面再把按钮加上，可是再点击的时候事件没有发生了。删除节点后，事件也会删除

知识点2：

语法：

$(selector).detach();

解释：删除节点后，事件会保留

var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降风云变</title>
    <style>
    </style>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $('button').click(function () {
            alert('小马过河');
            $(this).detach();
            $('.ul1').before($(this).detach())
        })
        })
    </script>
</head>
<body>
    <button class="butt">按钮</button>
    <ul class="ul1">
        <li>1</li>
        <li>2</li>
    </ul>
    ------------------
    <ul class="ul2">
        <li class="active"> ul2的一 </li>
        <li>ul2的二</li>
    </ul>
</body>
</html>

View Code

使用detach实现了反复点击，反复生成这一个窗口事件。

知识点3：

语法：

$(selector).empty();

解释：清空选中元素中的全部后代节点

//清空掉ul中的子元素，保留ul
$('ul').empty()

添加置空的事件

点击以后ul匹配上的都没有了

参考连接：https://www.cnblogs.com/majj/p/9119467.html