QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 2074|回复: 0

[HTML/CSS/JS] 用原生 JavaScript 实现十大 jQuery 函数

[复制链接]

等级头衔

积分成就    金币 : 2857
   泡泡 : 1516
   精华 : 6
   在线时间 : 1317 小时
   最后登录 : 2025-3-19

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-4-18 10:41:05 | 显示全部楼层 |阅读模式
       有时我需要创建一个简单的静态 HTML 或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的 JavaScript 来完成工作,知道它们的工作远离感觉真的很爽。
4 r7 F. k" d: N7 ~& Q) |       在开始之前,首先要知道标题是要转换为原生 JavaScript 的 jQuery 函数。接下来将简要介绍它做什么,然后是转换后的 JavaScript 代码和一些附加说明。* R$ }. h( q1 z
1) $(document).ready(..)2 `$ ~  {: u/ |6 W
       检查文档是否已加载并准备好执行脚本。3 }( k, R( S+ C/ X- f' t% C
let isLoaded = false;
let myOnLoadCallBack = function(){
    isLoaded = true;
    //my stuff here
}
document.addEventListener("DOMContentLoaded", myOnLoadCallBack());

document.addEventListener('readystatechange', (event) => {
    if (document.readyState === 'complete' && !isLoaded) {
        myOnLoadCallBack();
    }
);
      使用了 DOMContentLoaded 事件侦听器,这是在构建 DOM 树但尚未加载任何其他资源(即样式表、图像等)时触发的。如果在 HTML 文档中找到任何 script 标记,DOMContentLoaded 也会等待加载这些脚本。
7 x$ Q8 l$ B) H: _" i1 Y* i! n# L       如果样式后面有脚本标记,在加载样式时就会出现问题。出现这种情况时,如果脚本需要修改样式,则在脚本之前加载样式。4 T5 n" T2 @3 G0 H
       IE 8 及更低版本不支持 DOMContentLoaded。如果你不得不支持 IE 8,应该用 document.readyState。: v7 B8 S& o' \# U% i
以下是不同的状态:
' M5 C9 H1 S$ P5 I1 R$ l: n1 R! l" K
  • loading       : 正在加载文档
  • interactive  : 文档已完全读取
  • complete    : 文档已完全读取,所有资源(样式、图像)也被加载
    - X; U) j' w+ A/ d. Z1 B/ u! @
2) $(…).HTML()
; u8 _' O- t9 `       查找现有 DOM 元素的值,或插入一些内容。要查找现有值,只需引用 innerHTML 属性即可。( L+ i9 l& L/ m1 O5 M- M9 L
var content = document.querySelector("section#html div.content p.retrieve").innerHTML;
      要插入一些内容,请将 innerHTML 分配给可包含 HTML 标记的新内容。请注意:这将替换所有的现有内容。
: z1 H0 k$ ?% l. h, {7 r9 B* D) M
document.querySelector("section#html div.results p.sample").innerHTML = “<p>Starting a new paragraph</p>”;
3) $(…).Append2 ]6 S8 }+ r% |* n
       在现有元素的末尾插入一些 HTML。首先,需要找到并获取我们想要插入新内容的元素。
* L' A& M4 v6 d1 Q9 z# _
var appendEl = document.querySelector("section#append div.content div.results");
      接下来创建要插入的元素。5 a/ ?6 Y  }: C& v
var childEl = document.createElement("div");
childEl.innerHTML = "<p>New <strong>child</strong> Content!</p>"
      最后,插入元素。  B/ Z% o# B" d
//appending
appendEl.appendChild(childEl);
      当然,这需要三个步骤才能完成,但可以简化一下。首先创建新元素。' }9 o+ H2 u) I9 n3 }  r
var childEl = document.createElement("div");
childEl.innerHTML = "<p>New <strong>child</strong> Content!</p>"
      接下来在一行中找到并插入新元素。2 D& Y  c! O: h
document.querySelector("section#append div.content div.results").appendChild(childEl);
      如果想进一步简化,或者发现自己做了很多工作,你可以创建一个包装函数来做到这一点。
! {/ `* N$ u  P& P; }. X1 Z; f4) $(…).prepend()% r; H9 d1 g, e+ i% V
       与上面的 append 非常相似,唯一的区别是这个插入到元素的开头。所以我们直接跳转到简化的解决方案。创建要插入的新元素。, Y7 Y5 b5 r, M$ Z7 |% l  x
var newDiv = document.createElement("div");
var textNode = document.createTextNode("new content to inserted!");
newDiv.appendChild(textNode);
      查找现有元素并插入新元素。* p% }4 u- P4 B! ]1 M$ d5 [  |3 f* C' W
document.querySelector("section#prepend div.content p#existing").insertBefore(newDiv, prependEl.firstChild);
5) $(…).empty()3 k5 n1 a% |& g" U
       清空或清除 DOM 元素。你可能会认为只需要将 innerHTML 属性赋给一个空字符串就行了。但这只做了一半,想一想如果目标元素还有子 DOM 元素会发生什么?我们会做到这一点,它也很简单。首先从清除现有元素的内容开始。
) P: Y$ m% ^  }
document.getElementById("empty-content").innerHtml = “”;
      好的,现在怎样处理所有内部 DOM 元素?先清除现有内容,然后在循环中删除所有子 DOM 元素。
+ P! R$ Y6 @& ~, k% L. C0 y
var contentEl = document.getElementById("empty-content");
contentEl.innerHtml = "";
while(contentEl.firstChild){
    contentEl.removeChild(contentEl.firstChild);
}
      用 while 循环进行迭代,直到没有子项要删除为止。4 R2 `- l8 [9 @5 ~
6) $(…).Attr(name)
+ t" @/ \0 b2 i. c7 Z$ E$ v4 y. _0 ^' V       获取现有 DOM 元素的属性(attribute)值,或设置属性。要记住重要一点是:并非所有 DOM 元素都有相同的属性。例如复选框与按钮(按钮不具有 checked 属性)。从获取复选框的 checked 属性开始。
. ^) N  \: @0 T' Z5 G
let isChecked = document.querySelector("div#attributes input#my-check-box").getAttribute("checked");
      现在让我们看看怎样设置相同的属性(attribute)。) G; E  ]2 {8 m9 Q) f* ^
var el = document.querySelector("div#attributes input#my-check-box");
      可以通过访问 JavaScript 属性(property)来更改其状态。% ]% E7 i. h2 p4 ]. R* [& R; L
el.checked = true;
      你可能已经注意到我将 checked 键称为 JavaScript 属性(property)。元素属性(attribute)和 JavaScript 属性(property)有什么区别吗?简单来说,属性(property)是 JavaScript 来自元素属性(attributes)的继承键。这意味着你可以将 DOM 元素属性(attribute)作为 JavaScript 对象属性(property)进行访问。
1 i0 e& J1 j" I' v- z# B以下是有关 propertie 与 attribute 的几个要点。
5 I  c$ j5 Y4 k6 c* ]3 F
  • property 是来自 attribute 的 JavaScript 继承值(即 .class vs className)
  • 元素属性(property)仅在其为标准属性(property)时才从属性(attribute)创建。所以如果你引入了自定义属性(attribute),它将不会成为对象属性(property)的一部分。
  • 根据元素,可用属性(attribute)会有所不同(即复选框与按钮)
    " T: h5 ?$ x" d1 ?1 J+ u
7) $(…).val()0 m3 {- A, A1 v4 n
       获取匹配的 DOM 元素的值。这也比较简单,让我们从获取现有元素的值开始。为了使这些命令清晰,我将它们分开了。虽然它们可以在一行中完成。
% y( F4 Q2 ]) |  H5 t& u& R
var contentEl = document.querySelector("#my-input-el");
var lnameValue = contentEl.querySelector("input[name='lname']").value;
      设定值同样简单,也可以在一行中完成。9 c! z3 W6 c, H) S9 l
contentEl.querySelector("input[name='fname']").value = "Some random value";
      与使用 innerHTML 设置内容类似,这也会覆盖元素当前的所有值。" y6 N) L% `, b8 t  ]) H
8, 9) (…).off()) V" M4 y0 D( v5 K( j2 B! o
       要从元素添加或删除事件,请相应地使用 on() 或 off()。添加事件处理:
. X6 C2 n; x8 ^- f" s/ A
document.getElementById("my-button").addEventListener("click", function(evt){
    //my custom code here
});
      删除事件处理,这里需要对浏览器所支持的属性进行额外检查。* \9 e$ E# p3 Y+ U# T) T( C/ b6 Z
var toggleFunction = function(){...}
if (toggleBtn.removeEventListener) { // For all major browsers, except IE 8 and earlier
    toggleBtn.removeEventListener("click", toggleFunction);
} else if (toggleBtn.detachEvent) { // For IE 8 and earlier versions
    toggleBtn.detachEvent("click", toggleFunction)
}
添加或删除事件处理时需要注意以下几点。5 n  c" {* A/ \9 g0 W. l& u& }
  • 在实例化代码时元素必须存或者没有被附加事件。
  • 删除事件侦听器时,函数引用必须相同。
  • 内联匿名函数不起作用,因为引用不同。
  • 与 jQuery 不同,删除事件处理时,你必须指定要被删除的事件。" @, g1 x' j8 b4 E/ m8 H# R4 q
       有一种在不明确的情况下删除所有事件处理的方法,就是克隆元素并替换它。这也将会消除子元素所有的附加事件。最后删除所有元素。: V4 X  }. ?" F3 Z
var currEl = document.getElementById("button");
var cloneEl= currEl.cloneNode(true);
currEl.parentNode.replaceChild(cloneEl, currEl);
10) $(…).toggle()
1 R& s) E7 d# g$ x) s6 Z# J       切换元素上的显示,可以通过几种方式完成。每种方法都有不同的结果。你需要决定所需的行为。
6 g2 T( s: j0 B- U" M  }       第一种方法是将元素的 display 属性更改为 none 以从 DOM 中删除元素,并将其设置为 initial 以将其设置回来。这里重点是:如果你切换显示,将会影响你的布局和切换元素。
. ]1 h7 T1 _) a# Q% e1 N% N       在这里,我们通过直接访问元素的 style 属性来切换图像元素上的显示。
) j5 W+ d& p6 R7 i" Y
if(imgEl.style.display && imgEl.style.display === "none"){
    imgEl.style.display = "initial";
} else {
    imgEl.style.display = "none";
}
      第二种方法是更改元素可见性,这将隐藏元素并保留布局。3 R, q3 ]8 e0 j
if(imgEl.style.visibility && imgEl.style.visibility === "hidden"){
    imgEl.style.visibility = "initial";
} else {
    imgEl.style.visibility = "hidden";
};
总结* C4 G$ V/ m1 Q8 t! S& P3 b
       如果你一直在使用库和 JavaScript 框架,那么很容易忽略一些实现的简单性。但最重要的是,你也忽略了对 DOM 的一些核心工作原理的基本理解。很好地理解 DOM 不仅可以帮你更好的设计应用,还可以解决调试上的问题。
0 Q1 K" [0 O: l2 A       这些只是我最常用的一些函数。现在我把它们分享给你,如果你想写出自己的函数,而不是在自己的程序中添加使软件体积增加的库的话。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-4-4 23:29

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表