【前端3分钟】高效使用jQuery

简介: 【前端3分钟】高效使用jQuery

DOM 操作

  • createDocumentFragment 代替 createElement 创建节点内容
    在createDocumentFragment中可以将多个文档内容片段先缓存起来,最后一次性插入到DOM中;而createElement每次创建节点都需要插入到DOM 中,所以前者能提高DOM操作效率。

JQuery 高效使用

  • 尽可能使用ID选择器进行DOM查询操作,不同使用组合选择器
  • 缓存一切需要复用的jqeury Dom 对象,使用find()子查询
  • 不用滥用jQuery,尽量使用原生代替
  • 尽可能使用jQuery静态方法
  • 使用事件代理,不要直接使用元素的事件绑定
  • 尽量使用较新的的版本
  • 尽可能使用链式写法来提高编程效率和代码运行效率

前端MVC模式

基本思路: 将DOM交互的内容分为“数据模型”、“视图”、“事件控制函数”三个部分,并对它们进行统一管理。

  • Model用来存放请求的数据结果和数据对象;
  • View 用于页面DOM的更新与修改;
  • Controller用于根据前端路由条件来调用不同Model给View渲染不同数据内容
    路由的主要思路:让URL地址内容匹配对应的字符串然后进行相应的操作;另外HTML5中history.pushState(state,title,url)方法可以改变当前页面的url而不发生跳转,并将不同的state数据和对应的url对应起来。如果页面显示的内容是根据不同的数据状态来自动完成的,这样根据state的内容来加载不同的组件就很有用。


相关文章
|
1月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
45 13
|
2月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$("p")`、`$("#myDiv")`、`$(".myClass")`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
22 0
|
3月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
28 0
|
4月前
|
JavaScript 前端开发 算法
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
|
4月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
4月前
|
JavaScript 前端开发
【Web 前端】jQuery 库中的 $() 是什么?
【5月更文挑战第1天】【Web 前端】jQuery 库中的 $() 是什么?
|
4月前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
4月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
4月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
4月前
|
前端开发 JavaScript API