jQuery学习记录

2015-12-02

字数统计: 5.2k字 | 阅读时长≈ 21分

onload/ready，模拟jQuery方法

window.onload只能注册一次，后面覆盖前面，$(document).ready可注册多次;
onload要等所有DOM元素创建完毕，图片、css加载完毕后才促发，而ready则是DOM创建好之后即被促发，这样提高了网页响应速度。

模拟jQuery方法

(function()
        {
            var $ = function(id){
            return document.getElementById(id);
        }
        window.$ = window.jQuery = $;
        })();

模拟了一个id获取的jQuery方法，$做window的一级方法，即全局方法。

jQuery对象和DOM对象

DOM对象和jQuery对象不能互相使用，必须转化后才能使用。就是var $div = $(oDiv)或者var div = $div[0]之类的伪装成敌方就能使用了。

$(function()
            {
                $("#d1").html('af');
            });

            $(document).ready(function(){
                $(".as").html("1234565")
            });

map，each

map可以遍历数组元素并进行操作，返回数组。

var arr = [1,23,4,5,6,76,7,21,45];
        arr = $.map(arr,function(ite){
            return ite*3;
        });
        alert(arr);

each方法遍历数组或字典，然后得到每一个值对。

//定义一个字典  
var dic ={"name":"zs","age":18,"sex":"男"};  
//在function中传入两个值的情况  
$.each(dic,function(key,value)  
{  
    alert(key+":"+value);  
});  
//在function中传入一个值的情况  
$.each(dic,function(key)  
{  
    alert(key+"+"+dic[key]);  
});  
//在function中不传值的情况  
$.each(dic,function()  
{  
    //this 在这里指的是字典中的值  
    alert(this);  
});

全选反选，label、prop、toggle

<label>
    <input type="checkbox" />
    网站制作
</label>

label中点击文字也能选中checkbox；或者用for对应到id，也可以。

1 2	var box = $('input:checkbox'); box.prop("checked", true);

属性选择器。checked属性true。prop-property
toggle语法

1	$(selector).toggle(function1(),function2(),functionN(),...)

当指定元素被点击时，在两个或多个函数之间轮流切换。

弹出或关闭

原生js

1
2
3

var maincon = document.getElementById("main");
maincon.style.display = "none";
maincon.style.display = "block";

jQuery

1 2	$("#main").hide(1000); //数字代1000ms缓慢隐藏 $("#main").show(1000);

在线客服的显隐

html-css-js从骨架到装饰到灵魂。先要建立起骨架，穿起衣裳，才好把玩。

$('.qq_s').click(function(){
    $('.main_im').css('height', '0');     
    $('.qq_s').hide();
    $('.qq_d').show();
});
$('.qq_d').mouseleave(function(){
    $('.main_im').css('height', '133');
    $('.qq_d').hide();
    $('.qq_s').show(500);
})

搜索菜单

input点击后出现有颜色的边框

去除方法

1
2
3

input:focus{
    outline:none;
}

css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active，这个顺序不能乱写的否则就会出现问题。

动态改变class

1	<div class="searchbar" onmouseover="this.className='searchover'"></div>

background背景图的位置控制还是不熟练啊。

移入图片显示文字可点击

$(function(){
    $('.lili').hover(function(){
        $('.wenzi').fadeIn(2000);
        $(this).find("a").stop(true,true).show();
        },
        function(){
            $(this).find('a').stop(true,true).hide();           
        }
    );
});

点击缩略图显示大图

思路：

首先大图小图的src都是一样的，所以先获取小图的src，在点击缩略图的时候，动态改变大图的src。

$(function(){
    $('.xt img').click(function(){
        var dz = $(this).attr('src');
        $('.bigimg img').attr({src : dz});
    })
});

向上无缝滚动

思路：

首先定义一个全局布尔值。随后在DOM加载完后即启动滚动函数，鼠标移上停止，移开继续滚；选择到第一个li元素,使向上slideUp，同时将这个元素追加到末尾，但向下slideDown相同的时间内同步。为了实时更新，setTimeout函数绑定滚动函数。

var flag = true;
$(function(){
    goto();
    $('.gundong').mouseover(function(){
        flag = false;
    }).mouseout(function(){
        flag = true;
    });
});
function goto(){
    if(flag){
        $('.gundong dl dd:first').slideUp(500,function(){
            $(this).appendTo('.gundong dl').slideDown(500);
    });
}
    setTimeout(goto,600);
}

自己学习过程中，多有懈怠。如果能想到做一个什么点子，或许更有动力吧。

time: 2015/12/04 aielab

任何的语言，语法，使用方法，学到的只是形，你只会用，但还不明白其中的设计思想。
万法同宗，掌握原理才是最重要的，也是最根本的学习之道。

阮一峰的博客-jQuery设计思想

一.选择网页元素
jQuery的基本设计思想和主要方法，就是“选择某个网页元素，然后对其进行操作。此乃区别其他js库的根本特点。
选择表达式可以是css选择器:

$(document)

$(‘#myId’)

$(‘div.myClass’)

$(‘input[name=first]’)

也可以是jQuery特有表达式:

$(‘a:first’)

$(‘tr:odd’) //选择奇数行

$(‘#myForm:input’)

$(‘div:visiable’)

$(‘div:gt(2)’) //选择除前三个外所有div元素

$(‘div:animated’)

二.改变结果集
设计思想之二，提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

$(‘div’).has(‘p’);

$(‘div’).not(‘.myClass’)

$(‘div’).filter(‘.myClass’) //class等于myClass的div元素

$(‘div’).first();

$(‘div’).eq(5); //选择第6个div元素

有时从结果集出发，移动到附近元素；DOM树上移动方法:

$(‘div’).next(‘p’);

$(‘div’).parent();

$(‘div’).closest(‘form’);

$(‘div’).children();

$(‘div’).siblings(); //同级元素

三.链式操作
设计思想之三，对元素进行一系列的操作，可以连在一起，以料条的形式写出。

$(‘div’).find(‘h3’).eq(2).html(‘hello’);

分解开来：

$(‘div’) //找到div
　　.find(‘h3’) //选择其中h3元素
　　.eq(2) //选择第三个h3元素
　　.html(‘hello’) //内容改为hello

原理在于每一步jQuery操作都返回一个jQuery对象，所以不同操作可以连在一起。
jQuery还提供.end()方法，是结果集可后退一步:

$(‘.div’)
　　.find(‘h3’)
　　.eq(2)
　　.html(‘hello’)
　　.end() //退回到选中所有元素的h3元素那一步
　　.eq(0)
　　.html(‘world’) 　　

四.元素操作:取值和赋值
设计思想之四，同一个函数既取值(getter)又赋值(getter)，即“取值器”与“赋值器”合一，由参数决定取值还是赋值。

$(‘h1’).html(); //没有参数，代表取值

$(‘h1’).html(‘hello’); //赋值

常见取值和赋值函数如下：

.html()
.text()
.attr()
.width()
.height()
.val() //取出某个表单元素的值

五.元素操作：移动
设计思想之五，提供两组方法来来操作元素在网页中的位置移动。一种直接移动，另一组移动其他元素，使得目标元素达到我们想要的位置。
.insetAfter(),插入到某元素后，如div移到p元素后:

1	$('div').insetAfter($('p'));

第二种方法.after(),把p移到div后：

1	$('p').after($('div'))

两种方法的重大差别是，返回元素不一样。第一种返回div元素，第二种返回p元素。
此模式操作方法共四对：

.insertAfter()和.after():现存元素外部，从后面插入元素
.insertBefore()和.before():现存元素外部，从前面插入元素
.appendTo()和.append():现存元素内部，从后面插入
.prependTo()和.prepend():现存元素内部，从前面插入元素

六.元素操作：复制、删除和创建
复制：.clone()
删除：.remove()和detach()。区别是，前者不保留删除元素的事件，后者保留，有利于重新插入文档。
清空元素内容，不删除该元素：.empty()
创建新元素，新元素传入jQuery构造函数:

1
2
3

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');

七.工具方法
设计思想之六：提供一些与元素无关的工具方法。不必选中元素就可以直接使用此方法。

如果你懂JavaScript的继承原理，更好理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，可直接使用。而操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method(),所以必须生成实例（即选中元素）后使用。
常用工具方法有：

$.trim()  //取出字符串两端空格
$.each()  //遍历数组或对象
$.inArray()  //返回一个值在数组中的索引位置。入股没有，返回-1
$.grep()  //返回数组中符合某种标准的元素
$.extend()  //多个对象合并到第一个对象
$.makeArray()  //对象转化为数组
$.type()  //判断对象类别
$.isArray()  
$.isEmptyObject()  
$.isFunction()
$.isPlainObject()  //判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support()  //判断浏览器是否支持某个特性。

八.事件操作
设计思想之七，把事件直接绑定在网页元素上。

1
2
3

$('p').click(function(){
    alert('hello');
});

目前jQuery支持事件：

　　.blur() 表单元素失去焦点。
　　.change() 表单元素的值发生变化
　　.click() 鼠标单击
　　.dblclick() 鼠标双击
　　.focus() 表单元素获得焦点
　　.focusin() 子元素获得焦点
　　.focusout() 子元素失去焦点
　　.hover() 同时为mouseenter和mouseleave事件指定处理函数
　　.keydown() 按下键盘（长时间按键，只返回一个事件）
　　.keypress() 按下键盘（长时间按键，将返回多个事件）
　　.keyup() 松开键盘
　　.load() 元素加载完毕
　　.mousedown() 按下鼠标
　　.mouseenter() 鼠标进入（进入子元素不触发）
　　.mouseleave() 鼠标离开（离开子元素不触发）
　　.mousemove() 鼠标在元素内部移动
　　.mouseout() 鼠标离开（离开子元素也触发）
　　.mouseover() 鼠标进入（进入子元素也触发）
　　.mouseup() 松开鼠标
　　.ready() DOM加载完成
　　.resize() 浏览器窗口的大小发生改变
　　.scroll() 滚动条的位置发生变化
　　.select() 用户选中文本框中的内容
　　.submit() 用户递交表单
　　.toggle() 根据鼠标点击的次数，依次运行多个函数
　　.unload() 用户离开页面

以上事件均在jQuery内部，都是.bind()的便捷方式。使用.bind()可更灵活的控制事件，比如一个元素的多个事件绑定同一个函数：

$('input').bind(
    'click change',//同时绑定两个事件
    function(){
        alert('Hello');
    }
);

事件只运行一次，用.one()方法：

1
2
3

$("p").one("click",function(){
    alert("hello");  //只运行一次，以后的点击无效
});

.unbind()用来解除事件绑定：

1	$('p').unbind('click');

所有事件处理函数，都可接受一个事件对象(event object)作参数：

1
2
3

$('p').click(function(e){
    alert(e.type);   //"click"
});

事件对象常用的属性和方法：

event.pageX 事件发生时，鼠标距离网页左上角的水平距离
event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
event.type 事件的类型（比如click）
event.which 按下了哪一个键
event.data 在事件对象上绑定数据，然后传入事件处理函数
event.target 事件针对的网页元素
event.preventDefault() 阻止事件默认行为（比如点击链接，会自动打开新页面）
event.stopPropagation() 停止事件向上层元素冒泡

this关键字返回事件针对的DOM元素：

$('a').click(function(e){
    if($(this).attr('href').match('evil')){
        //如果确认为有害链接
        e.preventDefault(); //阻止打开
        $(this).addClass('.evil'); //加上表示有害的class
    }
});

有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

1 2	$('a').click(); $('a').trigger('click');

九、特殊效果
最后，jQuery允许对象呈现某些特殊效果。

1	$('h1').show(); //展现一个h1标题

常用的特殊效果如下：

.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 调整透明度
.hide() 隐藏元素
.show() 显示元素
.slideDown() 向下展开
.slideUp() 向上卷起
.slideToggle() 依次展开或卷起某个元素
.toggle() 依次展示或隐藏某个元素

除了.show()和.hide()，所有其他特效的默认执行时间都是400ms（毫秒），但可以改变这个设置。

1 2	$('h1').fadeIn(300); // 300毫秒内淡入 $('h1').fadeOut('slow'); // 缓慢地淡出

在特效结束后，可以指定执行某个函数。

1
2
3

$('p').fadeOut(300, function() { 
    $(this).remove(); 
});

更复杂的特效，可以用.animate()自定义。

$('div').animate(
    {
        left:"+50"， //不断右移
        opacity:0.25 //指定透明度
    }，
    300， //持续事件
    function(){alert("done!");}
）；

.stop()和.delay()用来停止或延缓特效执行。
$.fx.off如果设置为true，则关闭所有网页特效。

按照创意共享许可3.0,声明:内容转自阮一峰的博客 - jQuery设计思想
time:2015/12/07 aielab

jQuery最佳实践

趁热打铁，再来一篇阮一峰的jQuery博客，更进一步，了解“如何用好jQuery”.
1.使用最新版本
因为新版本总会改进性能，还有很多新功能。
2.用对选择器
(1)最快的选择器：id选择器和元素标签选择器
如下语句的性能最佳：

1
2
3

$('#id')
$('form')
$('input')

遇到这些选择器，jQuery内部会自动调用浏览器原生方法（如getElementById）,所以执行速度快。
(2)较慢的选择器：class选择器
$(‘.className’)性能取决于浏览器。
IE5-8没有部署getElementByClassName(),所以这个选择器在IE中会很慢。
(3)最慢的选择器：伪类选择器和属性选择器

1 2	$(':hidden') $('[attribute=value]')

如上，因为浏览器没有针对他们的原生方法，所以最慢。但一些新版浏览器增加了querySelector()和querySelectorAll()方法，对此类选择器的性能有大幅提高。
总体而言：

1	ID>Input/form selector>Class>others

从另一个侧面看，选择器的优先级与性能成正比。浏览器对某种选择器的支持越好，性能越好，优先级自然更高。

3.理解子元素和父元素的关系
下列6个选择器，都是从父元素中选择子元素，知道哪个速度最快吗？

$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))

(1)$(‘.child’,$parent)
此句意思是，给定一个DOM对象，从中选择一个子元素。jQuery会自动转换成$.parent.find(‘child’),这会导致一定性能损失。比最快形式慢了5%-10%。

(2)$parent.find(‘.child’)
.find()方法会调用原生方法，所以最快。

(3)$parent.children(‘.child’)
此语句在jQuery内部会使用$.sibling()和js的nextSibling()方法一个个遍历节点。比最快方法慢50%。

(4)$(‘#parent>.child’)
jQuery内部使用sizzle引擎，处理各种选择器。顺序从右到左，这条语句先选.child,然后再一个个过滤出#parent，比最快形式慢70%。

(5)$(‘#parent.child’)
同上。但上一条只选择直接的子元素，这一条可以选择多级子元素，速度更慢，慢了77%。

(6)$(‘.child’,$(‘#parent’))
jQuery内部会转化成$(‘#parent’).find(‘.child’),比最快形式慢23%。

综上，最佳选择是$parent.find(‘.child’)。而且由于$parent往往在前面操作已经生成，jQuery会进行缓存，所以进一步加快了执行速度。

4.不要过度使用jQuery
jQuery再快也无法与原生js相比。
简单的选择器为例，document.getElementById(‘foo’)要比$(‘#foo’)快10多倍。
再比较一个：

1
2
3

$('a').click(function(){
    alert($(this).attr('id'));
});

调用了两次jQuery。第一次是$(this),第二次是attr(‘id’).
完全不必要，可以采用原生js调用this.id:

1
2
3

$('a').click(function(){
    alert(this.id);
});

速度快了20多倍。

5.做好缓存
选择某个网页元素是开销很大的步骤。所以，使用选择器的次数越少越好，并且尽可能的缓存选中的结果，便于以后反复使用。
糟糕的写法：

1 2	jQuery('#top').find('p.classA'); jQuery('#top').find('p.classB');

更好的写法：

1
2
3

var cached=jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');

测试显示缓存时快了2-3倍。

6.使用链式写法
采用链式写法，jQuery自动缓存每一步的结果。链式写法比不适用缓存的非链式写法快了25%左右。

7.事件的委托处理(Event Delegation)
js的事件模型，采用”冒泡”模式，即子元素的事件会逐级向上”冒泡”，成为父元素的事件。
现有一个ul,里面有一百个li，要在每个li上绑定一个点击事件，是否需要将下面的命令执行100次呢。

1
2
3

$('li').on('click',function(){
    $(this).toggleClass('click');
);

当然是不要。只要在ul上绑定事件就可以了，当li发生点击事件时，该事件就会’冒泡’到父元素ul上，从而被监听到。
这就是”事件委托”，即子元素”委托”父元素处理这个事件。

1
2
3

$('ul').on('click','li',function(){
    $(this).toggleClass('click');
});

更好的写法则是把事件绑定在document对象上：

1
2
3

$(document).on('click','li',function(){
    $(this).toggleClass('click');
});

取消事件绑定，用off()方法：

1	$(document).off('click','li');

8.少改动DOM结构
(1)改动DOM结构开销很大，不要频繁使用.append()/.insertBefore()/.insetAfter()这些方法。
如果插入多个元素，先合并再一次性插入，速度快10倍左右。
(2)如果对一个DOM进行大量处理，应先用.detach()方法将次元素从DOM中取出，处理完毕后，再重新插回文档。快60%左右。
(3)在DOM元素上存储数据，不要这样：

1 2	var elem=$('#elem'); elem.data(key,value);

而要：

1 2	var elem=$('#elem'); $.data(elem[0],key,value);

根据测试，后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的，而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多。（此处可以参阅下面第10点。）
(4)插入html代码时，浏览器原生innerHTML()方法会比jQuery对象的html()更快。

9.正确处理循环
循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。
javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。

10.尽量少生成jQuery对象
每当你使用一次选择器（比如$(‘#id’)），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象。
举例来说，许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。下面两个例子，都是取出一个元素的文本，使用的都是text()方法。
你既可以使用针对jQuery对象的版本：

1 2	var $text=$('#text'); var $ts=$text.text();

也可以使用针对jQuery函数的版本：

1 2	var $text=$('#text'); var　$ts=$.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作，所以相对开销较小，速度比较快。

11.选择作用域链最短的方法
严格地说，这一条原则对所有Javascript编程都适用，而不仅仅针对jQuery。
我们知道，Javascript的变量采用链式作用域。读取变量的时候，先在当前作用域寻找该变量，如果找不到，就前往上一层的作用域寻找该变量。这样的设计，使得读取局部变量比读取全局变量快得多。
请看下面两段代码，第一段代码是读取全局变量：

var a = 0;
function x(){
    a += 1;
}

第二段代码是读取局部变量：

function y(){
    var a = 0;
    a += 1;
}

第二段代码读取变量a的时候，不用前往上一层作用域，所以要比第一段代码快五六倍。
同理，在调用对象方法的时候，closure模式要比prototype模式更快。
prototype模式：

var X = function(name){ this.name = name; }
X.prototype.get_name = function() { return this.name; };
//closure模式：
var Y = function(name) {
　　var y = { name: name };
    return { 'get_name': function() { return y.name; } };
};

同样是get_name()方法，closure模式更快。

12.使用Pub/Sub模式管理事件
当发生某个事件后，如果要连续执行多个操作，最好不要写成下面这样：

function doSomething{
    doSomethingElse();
    doOneMoreThing();
}

而要改用事件触发的形式：

function doSomething{
    $.trigger('DO_SOMETHING_DONE');
}

$(document).on('DO_SOMETHING_DONE',function(){
    doSomethingElse();
});

还可以用deferred对象。

function doSomething(){
　　　　var dfd = new \$.Deferred();
　　　　//Do something async, then... 
　　　　//dfd.resolve();
　　　　return dfd.promise();
　　}
　　function doSomethingElse(){
　　　　$.when(doSomething()).then(//The next thing);
　　}

完
按照创意共享许可3.0,声明:内容转自阮一峰的博客 - jQuery最佳实践
time: 2015/12/07 aielab

本文作者： Linking
本文链接： https://linking.fun/2015/12/02/jQuery学习记录/