《锋利的jQuery》之四

Posted 2020-10-04 奋斗的蜗牛cn

1、原生JS中window.onload 和jQuery中$(document).ready()的区别：

　　window.onload 方法是在网页中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JS此时才可以访问网页中的任何元素。

　　$(document).ready() 方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页中的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

　　注意：在$(document).ready()方法内注册事件，例如与图片有关的html下载完毕，并且已经解析为DOM树了，但很有可能图片还未下载完毕，所以图片的高度和宽度这些属性都不一定有效，解决这个问题，可以使用jQuery中的load()。 $(window).load(function(){　　}).

2、事件绑定：

　　要为元素绑定事件完成某些操作，用

bind(type [, data] , fn)

第一个参数是事件类型，类型包括：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup 和 error。

第二个参数为可选参数。

第三个参数是用来绑定的处理函数。

3、鼠标悬停事件：

hover(enter , leave)

当光标移到元素上时，会触发第一个函数（enter），当光标移出这个元素时，会触发第二个函数（leave）。

4、鼠标连续单击事件：

toggle(fn1 , fn2 , ... , fnN)

作用一：第一次单击元素，触发指定的第一个函数（fn1），当再次单击同一元素时，触发指定的第二个函数（fn2），如果有更多的函数，则依次触发，直到最后一个。随后的每次单击都重复对着几个函数的轮番调用。

$(function(){
            $("#panel h5.head").toggle(function () {
                $(this).next("div.content").hide();
            },function(){
                $(this).next("div.content").show();
            })
        });

作用二：切换元素的可见状态。如果元素是可见的，单击元素后是隐藏的；如果元素是隐藏的，单击元素后是可见的。