JavaScript + jQuery + DOM 速查手册

后端开发人员的前端速查字典，用到哪查到哪。

一、三个东西的关系

  • DOM：页面结构，HTML 被浏览器解析后的树形结构
  • JavaScript：浏览器原生语言，操作 DOM
  • jQuery：JS 的一个库，让 DOM 操作更简洁，符号是 $

二、DOM 核心概念

概念解释例子
节点树上每个东西<div>、"文字"
元素节点HTML 标签<td>、<span>
文本节点标签里的文字"发票明细"
父节点包着当前节点的<td> 是 <span> 的父
子节点当前节点里面的<span> 是 <td> 的子
兄弟节点同一层相邻的两个 <td> 互为兄弟
属性标签上的 key=valueid="mini-51$2"

三、JavaScript 速查

3.1 获取元素

// 通过 id 获取，返回单个元素
document.getElementById("bottom-tabs");

// 通过 class 获取，返回类数组集合（多个元素）
document.getElementsByClassName("mini-tab");

// 通过标签名获取，返回类数组集合
document.getElementsByTagName("td");

// CSS 选择器，返回第一个匹配的元素
document.querySelector("#bottom-tabs .mini-tab");

// CSS 选择器，返回所有匹配的元素集合
document.querySelectorAll(".mini-tab");

3.2 读取 / 修改内容

el.textContent;             // 取纯文本（含换行空格）
el.innerText;               // 取可见文字（受 CSS 影响）
el.innerHTML;               // 取内部 HTML（包含标签）

el.textContent = "新文字";   // 修改文本
el.innerHTML = "<b>新</b>";  // 修改 HTML

3.3 读取 / 修改属性

el.getAttribute("class");       // 取属性值
el.setAttribute("x", "y");      // 设置属性
el.removeAttribute("x");        // 删除属性
el.hasAttribute("x");           // 判断有没有 → true/false
el.id;                          // 标准属性直接用点访问                      // 标准属性直接访问

3.4 修改 class

el.classList.add("active");       // 添加
el.classList.remove("active");    // 移除
el.classList.toggle("active");    // 切换
el.classList.contains("active");  // 判断有没有

3.5 修改样式

el.style.display = "none";         // 隐藏
el.style.display = "";             // 恢复
el.style.color = "red";            // 单个样式
el.style.cssText = "color:red;";   // 批量样式

3.6 DOM 树上爬

el.parentNode;                  // 父节点
el.children;                    // 所有子元素
el.firstElementChild;           // 第一个子元素
el.previousElementSibling;      // 前一个兄弟
el.nextElementSibling;          // 后一个兄弟
el.closest(".mini-tab");        // 往上找最近的匹配祖先

3.7 创建 / 删除 / 替换

document.createElement("div");       // 创建
el.appendChild(newEl);               // 追加到末尾
el.insertBefore(newEl, target);      // 插入到某个元素前面
el.remove();                         // 删除自己
el.replaceWith(newEl);               // 替换自己

3.8 循环

var list = document.querySelectorAll(".mini-tab");
for (var i = 0; i < list.length; i++) {
    console.log(list[i]);
}
list.forEach(function (el) {
    console.log(el);
});

四、jQuery 速查

4.1 核心选择器

$("#bottom-tabs");           // 通过 id
$(".mini-tab");              // 通过 class
$("td.mini-tab");            // CSS 选择器

4.2 查找关系

$("#x").find(".y");          // 往下找所有子元素
$("#x").children(".y");      // 只找直接子元素
$(".y").parent();            // 往上找直接父
$(".y").closest(".z");       // 往上找最近的匹配祖先
$("#x").next();              // 下一个兄弟
$("#x").prev();              // 上一个兄弟
$("#x").siblings();          // 所有兄弟
$("#x").first()              // 第一个
$("#x").last()               // 最后一个
$("#x").eq(2)                // 第 3 个

4.3 内容操作

$("#x").html();                     // 取 HTML
$("#x").html("<b>新</b>");          // 设 HTML
$("#x").text();                     // 取文本
$("#x").text("新");                 // 设文本
$("#x").empty();                    // 清空
$("#x").append("<p>尾</p>");        // 内部末尾追加
$("#x").prepend("<p>头</p>");       // 内部开头插入
$("#x").after("<p>外后</p>");       // 外部后面插入
$("#x").before("<p>外前</p>");      // 外部前面插入

4.4 属性操作

$("#id").attr("href");              // 取属性
$("#id").attr("href", "新地址");     // 设属性
$("#id").removeAttr("href");        // 删属性
$("#id").val();                     // 取表单值
$("#id").val("新值");               // 设表单值
$("#id").data("title");             // 取 data-title
$("#id").data("title", "新标题");    // 设 data-title

4.5 class 操作

$("#x").addClass("active");       // 添加
$("#x").removeClass("active");    // 移除
$("#x").toggleClass("active");    // 切换
$("#x").hasClass("active");       // 判断

4.6 样式操作

$("#id").css("color");             // 取样式
$("#id").css("color", "red");      // 设单个
$("#id").css({color: "red"});       // 批量
$("#id").show();                   // 显示
$("#id").hide();                   // 隐藏
$("#id").toggle();                 // 切换

4.7 替换 / 删除

$("#old").replaceWith("<div>新</div>");  // 替换
$("#old").remove();                      // 删除

4.8 循环遍历

$(".mini-tab").each(function (index, el) {
    var text = $(this).find(".mini-tab-text").text().trim();
    if (text === "发票明细") {
        $(this).hide();
        return false;   // 相当于 break
    }
});

五、原生 JS 与 jQuery 对照速查

操作原生 JSjQuery
id 选择document.getElementById("x") $("#x")
class 选择getElementsByClassName("x")$(".x")
选择器querySelectorAll("x") $("x")
往下找el.querySelectorAll(".x") $el.find(".x")
往上找el.closest(".x") $el.closest(".x")
父节点el.parentNode $el.parent()
下一个兄弟el.nextElementSibling $el.next()
取文本el.textContent $el.text()
设文本el.textContent = "x" $el.text("x")
取 HTMLel.innerHTML $el.html()
设 HTMLel.innerHTML = "x" $el.html("x")
取属性el.getAttribute("x") $el.attr("x")
设属性el.setAttribute("x","y") $el.attr("x","y")
删属性el.removeAttribute("x") $el.removeAttr("x")
加 classel.classList.add("x") $el.addClass("x")
删 classel.classList.remove("x") $el.removeClass("x")
设样式el.style.display = "none" $el.css("display","none")
隐藏el.style.display = "none" $el.hide()
显示el.style.display = "" $el.show()
替换el.replaceWith(newEl) $el.replaceWith("html"
删除el.remove() $el.remove()
追加el.appendChild(child) $el.append("html")
循环for / forEach $el.each(function(){})

六、实战：完整隐藏 Tab 示例

/**
 * 按标题隐藏 Tab
 */
function hideTabByTitle(title) {
    $("#bottom-tabs").find(".mini-tab").each(function () {
        var tabName = $(this).find(".mini-tab-text").text().trim();
        if (tabName === title) {
            $(this).hide();
            $(this).next(".mini-tabs-space2").hide();
            return false;
        }
    });
}

/**
 * 显示所有 Tab
 */
function showAllTabs() {
    $("#bottom-tabs").find(".mini-tab").show();
    $("#bottom-tabs").find(".mini-tabs-space2").show();
}

对应代码

<div class="mini-tabs clear-float mini-tabs-position-top" id="bottom-tabs"
     style="border-width: 0px; height: 100%; padding: 0px;">
    <table class="mini-tabs-table" cellspacing="0" cellpadding="0">
        <tbody>
        <tr style="width:100%;">
            <td></td>
            <td style="text-align:left;vertical-align:top;width:100%;">
                <div class="mini-tabs-scrollCt" style="padding-right: 0px; width: 1599px;">
                    <div class="mini-tabs-nav" style="display: none;"><a class="mini-tabs-leftButton mini-disabled"
                                                                         href="javascript:void(0)" hidefocus=""
                                                                         onclick="return false"></a><a
                            class="mini-tabs-rightButton mini-disabled" href="javascript:void(0)" hidefocus=""
                            onclick="return false"></a></div>
                    <div class="mini-tabs-buttons" style="display: block;"></div>
                    <div class="mini-tabs-headers mini-tabs-header-top" style="width: auto;">
                        <table class="mini-tabs-header" cellspacing="0" cellpadding="0">
                            <tbody>
                            <tr>
                                <td class="mini-tabs-space mini-tabs-firstSpace">
                                    <div></div>
                                </td>
                                <td title="" id="mini-51$1" index="0" class="mini-tab mini-tab-active" style=""><span
                                        class="mini-tab-text">数量明细</span></td>
                                <td class="mini-tabs-space2">
                                    <div></div>
                                </td>
                                <td title="" id="mini-51$2" index="1" class="mini-tab " style=""><span
                                        class="mini-tab-text">发票明细</span></td>
                                <td class="mini-tabs-space2">
                                    <div></div>
                                </td>
                                <td title="" id="mini-51$3" index="2" class="mini-tab " style=""><span
                                        class="mini-tab-text">车号明细</span></td>
                                <td class="mini-tabs-space2">
                                    <div></div>
                                </td>
                                <td title="" id="mini-51$4" index="3" class="mini-tab " style=""><span
                                        class="mini-tab-text">车统33并车统36</span></td>
                                <td class="mini-tabs-space mini-tabs-lastSpace" style="width: 100%;">
                                    <div></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="mini-tabs-bodys mini-tabs-body-top" style="padding: 0px; width: 1601px; height: 259px;">
                    <div id="mini-51$body$1" class="mini-tabs-body mini-tabs-hideOverflow"
                         style="overflow: hidden; height: 259px;">
                        <iframe name="mini-iframe-102"
                                src="http://192.168.10.225:9937/hcys/hcys/saopaccountjzgzdetail.do?retrieve=true&amp;accountId=JgWoCnPWqjikHVYp&amp;assoId=H7tPZpmRmBkmmDGm&amp;_t=459317&amp;_winid=w7195"
                                style="width:100%;height:100%;" frameborder="0"></iframe>
                    </div>
                    <div id="mini-51$body$2" class="mini-tabs-body " style="overflow:hidden;display:none;"></div>
                    <div id="mini-51$body$3" class="mini-tabs-body " style="overflow:hidden;display:none;"></div>
                    <div id="mini-51$body$4" class="mini-tabs-body " style="overflow:hidden;display:none;"></div>
                </div>
            </td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>