腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

如何做到 jQuery-free?

0
回复
410
查看
[复制链接]

3

主题

0

帖子

28

积分

钻石VIP

Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32Rank: 32

积分
28
        
发表于 19-1-20 16:19:25 | 显示全部楼层 |阅读模式
需要注意,input元素的this.value返回的是输入框中的值,链接元素的this.href返回的是绝对URL。如果需要用到这两个网页元素的属性准确值,可以用this.getAttribute('value')和this.getAttibute('href')。
% U! G' ?7 K- }* Z3 ~. l6 F' \6 A七、addClass方法
& y9 X8 B8 N: Z" n1 F7 q& `7 u. PjQuery的addClass方法,用于为DOM元素添加一个class。- e9 m* ?# K. |) h2 n
DOM元素本身有一个可读写的className属性,可以用来操作class。
# C- S1 p1 ?$ w. a! aHTML 5还提供一个classList对象,功能更强大(IE 9不支持)。
8 L+ w. r( z8 p: J+ p- t八、CSS/ L. @3 t* N& e* n" \( s  l$ R
jQuery的css方法,用来设置网页元素的样式。
: p+ F" y0 ^; ^. lDOM元素有一个style属性,可以直接操作。/ P- }( X: V# m' N
九、数据储存
9 b9 F( d% i; b/ f1 K5 IjQuery对象可以储存数据。
- o7 Q$ P6 `- c# I* uHTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。
& C) x) e7 w  E7 b+ b- H2 C  x十、Ajax0 j1 W0 F! M/ a+ X# ?
jQuery的Ajax方法,用于异步操作。
# I- S$ q9 x# I& N我们可以定义一个request函数,模拟Ajax方法。
* P) a9 d: ~! K: Q9 j  a4 M+ B7 u  r) n/ Z) K  b- `
然后,基于request函数,模拟jQuery的get和post方法。
8 c  p* j  }6 v) k十一、动画
  s7 q2 _4 ~* N) }& ojQuery的animate方法,用于生成动画效果。+ ~5 k# z2 ?2 D% ^9 S, W
jQuery的动画效果,很大部分基于DOM。但是目前,CSS 3的动画远比DOM强
8 M& e0 j2 ]6 D4 T大,所以可以把动画效果写进CSS,然后通过操作DOM元素的class,来展示动画。; y) G  E& D. S( P' A$ e" ^
如果需要对动画使用回调函数,CSS 3也定义了相应的事件。
3 D: ^3 Y/ z# h7 D# B十二、替代方案& F1 z4 X- }' M6 G, i
下面就探讨如何用JavaScript标准语法,取代jQuery的一些主要功能,做到jQuery-free。( W3 ]3 Y$ [8 n; u
一、选取DOM元素
4 Q0 y9 \0 d3 a" n+ TjQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。9 ?1 c) `5 L. ^3 H0 X# }
这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。如果有需要,可以考虑将Nodelist对象转为数组。. U5 s! m( g) e. K/ {& n1 w
二、DOM操作
) L0 N; ~  ]/ y" Q7 B( ^/ QDOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。
3 m$ j% H; o7 K' b# m$ P" }6 C1 X尾部追加DOM元素。8 V- J. H' u; y. T1 r' \
头部插入DOM元素。: v4 n- W" |; \- h
删除DOM元素。
# o- q1 p/ N. N三、事件的监听* ?4 t( k+ e7 I) N
jQuery的on方法,完全可以用addEventListener模拟。3 m0 F5 @$ z) ^) d3 U( H
为了使用方便,可以在NodeList对象上也部署这个方法。
, i; p7 B% O& {) i四、事件的触发# _0 ^/ M& u, _. I$ R" e
jQuery的trigger方法则需要单独部署,相对复杂一些。
* g5 Y+ P$ K4 v( _; @& u在NodeList对象上也部署这个方法。1 A9 ?( L; [) l! L
五、document.ready! x1 V0 k! u3 Y  E' C
目前的最佳实践,是将JavaScript脚本文件都放在页面底部加载。这样的话,其实document.ready方法(jQuery简写为$(function))已经不必要了,因为等到运行的时候,DOM对象已经生成了。
; V% \2 G8 r/ Z3 g! u1 Q六、attr方法
1 `7 ^" T8 k8 c0 v9 yjQuery使用attr方法,读写网页元素的属性。
8 h! U& Z5 A  h, W& J( w* ZDOM元素允许直接读取属性值,写法要简洁许多。. N8 f) o1 n% k
由于jQuery体积过大,替代方案层出不穷。  U( b" D( P0 H& d
其中,最有名的是zepto.js。它的设计目标是以最小的体积,做到最大兼容jQuery的API。zepto.js 1.0版的原始大小是55KB,优化后是29KB,gzip压缩后为10KB。" V8 u5 H$ z9 r. n
如果不求最大兼容,只希望模拟jQuery的基本功能,那么,min.js优化后只有200字节,而dolla优化后是1.7KB。
/ G2 b0 ~" X/ G, c此外,jQuery本身采用模块设计,可以只选择使用自己需要的模块。具体做法参见它的github网站,或者使用专用的Web界面。. b# S8 i7 A) `
十三、参考链接
) }/ s& b) T( t% dRemy Sharp,I knowjQuery. Now what?% C' l7 f9 t: K0 `5 p
Hemanth.HM,Power ofVanilla JS4 p( n6 m! v" r0 d
Burke Holland,5 Things YouShould Stop Doing With jQuery
2 j) c# V; i; l  v( B后语1 G5 G  A; l1 \; `, `9 B7 e! Z. J2 t
你学习js是从什么时候开始的?从哪方面开始入手的,欢迎讨论~
% w; D0 c- y/ r关于本文

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

qiuqiufa.com

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除