jquery 实践总结

Ready事件

对DOM操作之前需要监听页面加载进度,应当在页面加载完成之后再执行DOM编辑操作。

    $(document).ready(function(){
        ...
    });

或者

    $(function(){
        ...
    });

选择器

1.优先使用原生方法
var el = document.getElementById("element");
2.优先使用id选择器
性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器

    //性能从上到下递减
    $("#element")
    $("input")
    $(".element")
    $("[type=submit]")
    $(":hidden")

3.id选择器(getElementById),标签选择器(getElementsByTagName)都有原生方法因此速度很快,类选择器在除了IE6-8之外的主流浏览器都有原生方法(getElementsByClassName)。

var foo = document.getElementById("foo");
var input = document.getElementsByTagName("input");
//IE6-8不支持类选择器
var bar = document.getElementsByClassName("bar");

4.对没有id的元素检索,尽量采用路径最短的祖先元素id作为默认的搜索范围,并采用纯类选择器或者标签选择器。

样式表操作

对一个对象应用多个样式的时候,应尽量使用addClass/removeClass方法,避免多次操作该对象。

var $element = $("#element");
$element.css("width","200px");
$element.css("height","300px");
$element.css("background","#fff");

/*推荐写成这样:*/
.on{
   width:200px;
   height:200px;
   background:#fff;
}
var $element = $("#element");
$element.addClass("on");

选择器保存

如果对同一个元素进行多次操作,推荐将选择器缓存起来或者采用链式写法。

//性能较差
$("#element").click(function(){ });
$("#element").empty();
$("#element").show();
//推荐写法(缓存)
var $element = $("#element");
$element.click(function(){ });
$element.empty();
$element.show();
//推荐写法(链式)
$("#element").click(function(){
    //...
}).empty().show();

事件委托

javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。
当存在以下两种情况是,推荐使用时间委托的写法
  •为DOM中的很多元素绑定相同事件;
  •为DOM中尚不存在的元素绑定事件;

//比如,如果有100个td元素,那么这样写会绑定100次click事件
//性能较差
$("td").click(function(){
    //...
});
//推荐写成这样,只需1次将事件绑定在table上
//推荐写法
$("table").on("click","td",function(){
    //...
});

事件命名空间

如果可能尽量在绑定事件处理程序时使用一个命名空间,这样可以方便地取消绑定而不会影响其他绑定。

//事件绑定
$("#myLink").on("click.mySpecialClick", myEventHandler);
// 解除绑定
$("#myLink").off("click.mySpecialClick");

合并DOM操作

尽量减少或者合并对DOM的操作。

//性能较差
var i;
var $wrapper = $("#wrapper");
for(i = 0;i<100;i++){
    var html = "<div>"+i+"</div>";
    $wrapper.append(html);
}
//推荐写法
var i;
var $wrapper = $("#wrapper");
var html = "";
for(i = 0;i<100;i++){
    html += "<div>"+i+"</div>";
}
$wrapper.append(html);

JS原生方法

jQuery速度无法与原生的javascript方法相媲美。所以有原生方法可以使用的场合,尽量避免使用jQuery。

/*选择器*/
//性能较差
var id = $(this).attr("id");
//推荐写法
var id = this.id;
/*循环*/
//性能较差
$.each(arr,function(){
    ...
});
//推荐写法
for(var i = 0;i<arr.length;i++){
    ...
}

ajax

以下是标准ajax请求模板,事件处理推荐使用promise的写法。

//ajax模板
var successHandler = function(){
    //...
};
var failureHandler = function(){
    //...
};
var alwaysFunc = function(){
    //...
};
var jqxhr = $.ajax({
    url: url,
    type: "GET", // 默认为GET,你可以根据需要更改
    data: {}, // 将请求参数放这里.
    dataType: "json", // 指定想要的数据类型
    statusCode: { // 如果你想处理各状态的错误的话
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
jqxhr.always(alwaysFunc);
时间: 2024-10-11 10:46:07

jquery 实践总结的相关文章

jQuery实践树(2)

上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你打开页面时,会看到一闪一闪的雪花效果.这不是使用jQuery的效果,只是用CSS设置了背景图片为动态图而已.本实践将要用jquery改变页面的背景图. 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equ

JQuery 实践--让页面动起来

获取和设置元素特性特性属性:是指DOM元素中能够和HTML元素中某个特性对应得上的属性.通常JS特性属性的名称与对应的特性一一匹配,但class <=>className操作特性还是操作属性,取决于想做什么以及想如何去实现.JQuery 没有用于获取或修改元素苏醒的具体命令.然而可以利用原生JS表示法,存取属性和属性值,首先获取元素引用. each(iterator) 遍历包装集里所有元素,为各个元素分别调用传递进来的迭代器函数 参数为一个函数,函数参数为被设置为保障局里当前元素的下标,当前元

JQuery实践--插件

jQuery插件的概览http://docs.jquery.com/Pluginshttp://jquery.com/plugins/most_popular 官方的表单插件http://jquery.com/plugins/project/form    jquery.form.js   获得表单控件的值         收集包装集里所有成功表单控件的值,返回这些值构成的字符串数组.没有值就返回空数组 fieldValue(excludeUnsuccessfull) bool:false不成功

JQuery 实践--扩展JQuery

Why扩展JQuery通过扩展可以利用JQuery所提供的现有代码基础.避免从头编写代码 有效扩展JQuery的规则扩展JQuery的两种形式: $上直接定义实用工具函数 和JQuery包装集进行操作的方法  1. 文件名以 jquery为前缀  2. 前缀后接插件的名称  3. 文件名以.js结尾  4. 小心$.  用本地化方式引用JQuery: (function($){xxx})(jQuery)  5.简化复杂的参数列表:选项散列对象,多个可选参数被击中到单个参数,object名/值对

JQuery实践--动画

显示和隐藏没有动画的元素 使包装集里的元素隐藏 hide(speed,callback) speed:可选,速度.slow,normal,fastcallback:函数,可选,完成后调用的函数,无参数.有this上下文 包装集   使包装集里的元素显示 show(speed,callback)   包装集   切换显示隐藏 toggle(speed,callback)   包装集   使非隐藏的元素逐渐淡出 fadeout(speed,callback)   包装集   使隐藏的元素逐渐淡入 f

JQuery实践--事件

通过HTML网页所呈现的界面是异步的和事件驱动的.步骤: 建立用户界面 等待又去的事情发生 做出相应的反应 重复 浏览器所实现的事件模型 DOM第0级事件模型 事件处理程序是通过吧函数实例的引用指派到DOM元素的属性而声明的.                                                  或HTML的特性.当指定到HTML特性上时,匿名函数就会利用特性的值作为函数体而自动创建onclick <=> click事件onmouseover <=>mo

JQuery实践--实用工具函数

实用工具函数,$命名空间的一系列函数,但不操作包装集.它要么操作除DOM元素以外的Javascript对象,要么执行一些非对象相关的操作. JQuery的浏览器检测标志可在任何就绪处理程序执行之前使用这些标志.$.browser :msie,mozilla,safari,opera,version(引擎的版本)$.boxModel: 方框模型,true/false. 决定了元素的内容大小$.styleFloat: float样式的名称,值为字符串,供属性名称使用   element.style[

jquery 实践操作:div 动态嵌套页面

此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.html", function () { //其他操作,可对载入的 handle.html 中元素进行操作 }); 2. 加载页面片段 $("#result").load("ajax/test.html #container"); 3. 以 POST 形式发送 附

jquery 实践操作:div 动态嵌套(追加) div

此片记录在指定 div 中动态添加 div html(): append(): 在被选元素的结尾(但仍在元素内部)插入指定的内容. 语法: $(selector).append(content); //其中,参数content是必需的,指定要附加的内容. append 能够使用函数给被选元素附加内容,语法为: $(selector).append(function(index,html)); //function()是必需的,参数index和html都是可选的.index表示接收选择器的inde