当前位置 博文首页 > 向往的那片海洋：jQuery 中的 DOM 操作梳理

最大化 缩小

    向往的那片海洋：jQuery 中的 DOM 操作梳理

    作者：[db:作者] 时间：2021-09-06 22:35

    jQuery 中的 DOM 操作

    DOM 操作梳理

    我们对 jQuery 中的 DOM 操作大致做个梳理：

      1. 查找节点
      • 查找元素节点：var $li = $('ul li:eq(2)'); 利用选择器做查找
      • 查找文本节点：console.log($('p').text()); text() 方法获取（设置）文本节点的文本内容
        • text() 方法类似于 DOM 中的 textContent 属性
      • 查找属性节点：console.log($('p').attr('title')); attr(attrName) 方法获取（设置）属性的值
        • attr() 方法类似于 DOM 中的 getAttribute() 方法
      1. 遍历节点
      • 获取父结点
        • parent() 方法：获取一个包含着所有匹配元素的唯一父元素的元素集合
          • var $element = $('selector.parent([expr])');
          • selector ：表示 jQuery 中的选择器
          • expr 可选，parent() 方法的参数，用于表示筛选的选择器
        • parents() 方法：获取一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）
        • closest() 方法：从元素本身开始逐级向上级元素匹配，并返回最先匹配的元素
      • 获取子节点：children() 方法 获取指定元素的所有子元素
        • var $element = $('selector').children([expr]);
          • selector：表示 jQuery 中的选择器
          • expr：可选，children() 方法的参数，用于筛选的选择器
        • children() 方法只获取指定元素的子元素集合，而不获取其后代元素
      • 获取兄弟节点
        • next() 方法：用于获取指定元素的下一个相邻兄弟元素
          • var $element = $('selector').next([expr]);
          • selector 选择器，expr 可选，用于筛选选择器
        • prev() 方法：用于获取指定元素的上一个相邻兄弟元素
          • var $element = $('selector').prev([expr]);
          • selector 选择器，expr 可选，用于筛选选择器
      • 查找后代元素
      1. 创建节点
      • 创建元素节点：通过 jQuery 的工厂函数来创建元素节点
        • var $element = $(elementName);
        • elementName：表示元素名称
      • 创建文本节点
      • 创建属性节点
      • 工厂函数
      1. 插入节点
      • 插入内部节点（子节点）
        • append() 方法：向每个匹配的元素内部追加内容（类似于 DOM 中的 appendChild()）
          • append(content|fn)
          • content|fn ：要追加到目标中的内容（把 B 追加到 A 里面）
        • appendTo() 方法：把所有匹配的元素追加到另一个指定的元素元素集合中
          • appendTo(content) 与 append() 颠倒（把 A 追加到 B 里面）
        • prepend() 方法：向每个匹配的元素内部前置内容
          • prepend(content) 插入指定节点的所有子节点列表的最前面
        • prependTo() 方法：把所有匹配的元素前置到另一个、指定的元素元素集合中
          • prependTo(content)插入指定节点的所有子节点列表的最后面
      • 插入外部节点 （兄弟节点）- 用法与内部节点相同
        • before() 方法：在每个匹配的元素之前插入内容
        • after() 方法：在每个匹配的元素之后插入内容
        • insertBefore() 方法：把所有匹配的元素插入到另一个、指定的元素元素集合的前面
        • inserAfter() 方法：把所有匹配的元素插入到另一个、指定的元素元素集合的后面
      • 插入节点的方法也可以做移动效果
      1. 删除节点
      • remove() 方法：用于从 DOM 中删除所有匹配元素
        • $element.remove([expr]); expr 用于筛选元素的 jQuery 表达式
      • empty() 方法：删除匹配的元素集合中所有的子节点
        • $element.empty();
      1. 替换节点
      • replaceWith() 方法：将所有匹配的元素替换成指定的 HTML 或 DOM 元素
        • $element.replaceWidth(content); content 用于将匹配元素替换掉的内容
      • replaceAll() 方法
        • 颠倒后的 replaceWith() 方法，$("<b>Paragraph. </b>").replaceAll("p");
      1. 复制节点
      • clone() 方法：克隆匹配到的 DOM 元素并且选择这些克隆的副本
      • $element.clone(events);
        • events：一个布尔值指示事件处理函数是否会被复制。默认为 false
      • 该方法与原生 DOM 中的复制节点的方法 cloneNode() 使用时相似
        • DOM 中的 cloneNode(Boolean) 方法，Boolean 表示是否复制后代节点
        • jQuery 中的 cloneNode(Boolean) 方法，Boolean 表示是否复制事件
      1. 属性操作
      • 获取或设置属性：设置或返回被选元素的属性值
        • attr(name|properties|key,value|fn)
      • 删除属性：从每一个匹配的元素中删除一个属性
        • removeAttr(name)
      1. 样式操作
      • attr() 方法：设置或返回被选元素的属性值。
        • attr(name|properties|key,value|fn)
        • 可以通过设置 style 属性为 <div> 元素添加内联样式和外链样式
      • addClass(className) 方法
        • 表示添加样式（并不影响指定元素原本的样式）
      • removeClass() 方法
        • removeClass() 删除所有样式、removeClass(className)删除指定样式
        • 如果删除多个指定样式，样式名称之间使用空格分隔
      • toggleClass() 方法：在删除指定样式与添加指定样式之间切换
      • hasClass() 方法：判断指定元素中是否包含指定样式名称
      • css() 方法：
        • css(name)：获取指定元素的指定样式属性值
        • css(name,value)：为指定元素设置指定的样式属性值（内联样式）
        • css(options) ：为指定元素设置指定的样式属性值（内联样式）
          • options ：是一个对象类型的，表示所有的样式属性
      1. HTML 操作
      • html() 方法：取得第一个匹配元素的html内容
      • val() 方法 ：获得匹配元素的当前值。

    DOM 操作的一些用法：

    1. 自定义获取祖先元素方法

    我们可以自定义方法进行使用：

    var bj = document.getElementById('bj');
var ul = bj.parentElement;
var div = ul.parentElement;
var body = div.parentElement;
var html = body.parentElement;
var root = html.parentElement;  // null

    console.log(root);
var arr = [];  // 用于存储指定元素的所有祖先元素
function parents(element){
    // 获取指定元素的父元素
    var parent = element.parentElement;
    console.log(parent);
    // 判断当前的父元素是否为 null
    if(parent === null){return;}
    // 将获取到的父元素，添加到指定数组中
    arr.push(parent)
    // 定义递归函数
    parents(parent); 
}
parents(bj)
console.log(arr);

    body 部分

    <body>
    <div class="container">
        <ul>
            <li id="bj">北京
                <ul>
                    <li>海淀区</li>
                    <li>朝阳区</li>
                    <li>通州区</li>
                </ul>
            </li>
            <li>天津</li>
            <li>重庆</li>
        </ul>
    </div>
</body>

    上述代码运行效果如下图所示：

    https://gitee.com/project_almanac/change/raw/master/jQuery/eW481^1Z2!7x.png

    1. HTML 操作

    body 部分

    <body>
    <ul id="city">
        <li id="bj">北京</li>
        <li>南京</li>
        <li>天津</li>
    </ul>
    
    <input type="text" value="请输入你的用户名">

</body>

    console.log($('#city').html());
var $html = $('#city').html();
$html += "<li>长春</li>";
$('#city').html($html);
console.log($('input').val());
$('input').val('密码')

    上述代码运行效果如下图所示：

    https://gitee.com/project_almanac/change/raw/master/jQuery/0bN4v83wVdsu.png

    1. 创建节点：

    方式一：

    // 1. 创建元素节点
var $newLi = $('<li></li>');
// 2. 设置文本内容
$newLi.text('保定 ');
// 3. 设置属性
$newLi.attr('id','cc');

    方式二：

    var $newLi = $('<li id="cc">保定</li>');

    上述代码运行效果如下图所示：

    https://gitee.com/project_almanac/change/raw/master/jQuery/R^iV8IHc*!AG.png

    1. 获取父节点
    // 1. 获取元素
var $bj = $('#bj');

console.log($bj.parent(''));
console.log($bj.parents(""));
console.log($bj.closest(''));
    1. 获取子节点
    var $ul = $('ul:first');

// 获取指定元素的所有子元素
console.log($ul.children());
// 获取指定元素的指定后代元素
console.log($ul.find('li'))
    1. 获取兄弟节点
    var $tj = $('#tj');
console.log($tj.next('li'));  // 获取下一个相邻兄弟元素
console.log($tj.prev());      // 获取上一个相邻兄弟元素

    上述代码运行效果如下图所示：

    https://gitee.com/project_almanac/change/raw/master/jQuery/4KuUUmVbr^pw.png

    1. 操作节点
    // 1. 删除节点
$('#code').empty();
$('#p').remove();
// 2. 替换节点
$('#ph').replaceWith("<li>小米</li>");
$("<li>坚果</li>").replaceAll($('#o'));
// 3. 复制节点
var $copy = $('#btn').clone(true);
$('body').append($copy);
    cs
    上一篇：向往的那片海洋：jQuery 的事件操作
    下一篇：没有了