jQuery那些容易被忽略的问题

最新推荐文章于 2024-07-14 15:54:59 发布

徐徐图之

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量345

点赞数

分类专栏： web 文章标签： jquery javascript

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、jQuery对象和DOM对象

1、DOM对象：通过原生javascript（如getElementsByTagName或getElementId）获取的html节点。

var dom = document.getElementById("app") // 获取DOM对象
var html = dom.innerHTML;                // 获取DOM元素内的HTML代码

2、jQuery对象：被jQuery包装过的DOM对象

var jq = $("#app");      // 获取jQuery对象
var html = jq.html();    // 获取jQuery对象内的HTML代码

不能交换使用jQuery对象、DOM对象上的属性，如上面代码中的innerHTML与html()。

二、jQuery对象和DOM对象的相互转化

1、jQuery提供了2种转换DOM对象的方法：

（1）jQuery对象是一个类似于数组的对象，因此可以通过数组运算符[]获取指定索引的DOM对象。

var jq = $(".test");   // jQuery对象
var dom = jq[0];       // DOM对象

（2）通过jQuery本身提供的get(index)方法来获取指定index的对象。

var jq = $(".test");  // jQuery对象
var dom = jq.get(0);  // DOM对象

2、将DOM对象通过$()函数包装起来，就可以获得jQuery对象。

var dom = document.getElementById("test");
var jq = $(dom);

三、jQuery选择器性能

提升选择器性能的有效途径是为选择器指定上下文，并以上下文为基础使用first()、last()、find()、filter()、hasClass()等jQuery筛选API。下面对jQuery选择器的性能由高向低进行排序：

1、ID选择器：底层通过调用document.getElementById()实现。

$("#id")

2、标签选择器：底层通过调用document.getElementsByTagName()实现。

$("input")

3、类选择器：底层通过调用document.getElementsByClassName()实现。

$(".class")

4、属性及其它选择器：底层通过对HTML字符串进行正则表达式匹配来实现。

$("[contenteditable]")

四、缓存常用的jQuery选择器对象

将需要常用的jQuery选择器对象赋值给一个局部或全局变量，是有效提升jQuery运行性能的良好开端。

var $jq = $("#app");
$jq.find("div.tree").append("string");
$jq.find("[contenteditable].test").html();
$jq.find(".demo.test").html();

五、减少循环时的DOM操作

在for、while、$.each()等循环语句中，尽量减少DOM操作的次数，最好先将模板在循环中组装完成之后再一次性插入DOM。

var $app = $("#app");
var template = "";
for (var i = 0; i <= 100; i++) {
  template += "<p>This is a paragraph!<p>"
}
$app.find("div").html(template);

六、使用原生方式处理jQuery数组

<body>
  <div id="app">
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
    <div class="demo">4</div>
    <div class="demo">5</div>
  </div>
</body>

jQuery选择器的结果是一个数组类型的对象，建议使用for或while等原生语法对其进行处理，而非jQuery封装过的$.each()。

var $demo = $(".demo");
for (var i = 0; i < $demo.length; i++) {
  // 通过数组索引提取后，jQuery对象转换成DOM对象，所以这里使用了DOM对象的innerHTML属性
  console.info($demo[i].innerHTML);
}

可以通过关键字length检查数组长度，从而判断jQuery对象是否存在。

var $demo = $(".demo");
if ($demo.length !== 0) {
  // do something
}

七、尽可能使用事件委托

jQuery3.x版本继续简化了事件委托函数，仅剩下on()、off()、one()、trigger()、triggerHandler()五个事件处理函数。

<div id="app">
  <div id="parent">
    <p>parent</p>
    <div id="current">
      <p>current</p>
      <div id="child">child</div>
    </div>
  </div>
</div>

on可以用于处理冒泡事件，但是无法捕获事件

$("#current").on("click", function () {
  console.info("current is clicked!");
});
$("#child").trigger("click");  // on可以处理向上冒泡的click事件
$("#parent").trigger("click");  // on无法捕获父级元素的click事件

单页面场景下绑定的on事件，必须在路由切换时通过off解除事件绑定，否则会造成大量无用的事件句柄堆积在内存。

八、使用HTML5的data属性绑定数据

通过HTML5提供的data属性可以更加方便的完成数据绑定，特别是在不借助handlebar、lodash.template()等模板引擎的时候。

<div id="app"
  data-number = 13.2
  data-string = "uinika"
  data-boolean = true
  data-null = null
  data-undefine = undefine
  data-object= '{"name": "hank"}'
  data-array= '["demo1", "demo2"]'>
</div>

var app = $("#app");
console.log(app.data("number"));
console.log(app.data("string"));
console.log(app.data("boolean"));
console.log(app.data("null"));
console.log(app.data("undefine"));
console.log(app.data("object").name);
console.log(app.data("array")[1]);

九、尽量使用原生JavaScript

在不影响浏览器兼容性的情况下，尽量使用JavaScript原生API。

var $demo = $(".demo");  // 缓存选择器

$demo.is(":checked");  // 通过jQuery封装过的is()方法
$demo[0].checked;  // 通过DOM原生的checked属性

$demo.css({"color": "red"});  // 通过jQuery封装过的css()方法
$demo[0].style.color = "red";  // 通过DOM原生的style.color属性

$("<p></p>");  // 通过jQuery新建<p>标签
$(document.createElement("p"));  // 通过DOM原生的createElement方法

十、$(document).ready()

该函数内的代码会在DOM加载完毕后，内容（如图片）加载完成前执行；生产环境中，尽可能在每个js文件下使用该函数。

$(document).ready(function () {
  // 标准写法
});

$(function () {
  // 简化写法
});

JavaScript原生的window.onload()只会在DOM和图片等资源全部加载完成之后才执行。

文章转载自：https://uinika.github.io/2017/09/29/web/jquery

徐徐图之

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery那些容易被忽略的问题

jquery
复制链接

扫一扫

专栏目录

jQuery那些容易被忽略的问题

“相关推荐”对你有帮助么？