jQuery入口函数

2020-01-28  本文已影响0人  David_Rao

1. 原生js入口函数写法

window.onload = function (ev) {
    alert("hello world");
} 

2. jQuery入口函数写法

// 1. 第一种写法
$(document).ready(function () {
    console.log('two'); 
});
// 2. 第二种写法
jQuery(document).ready(function () {
    console.log('two');
});
// 3. 第三种写法(推荐)
$(function () {
    console.log('two'); 
});
// 4. 第四种写法
jQuery(function () {
    console.log('two'); 
});

3. jQuery入口函数和原生js入口函数的区别

  1. 原生js和jQuery入口函数加载模式不同
// 原生js写法
window.onload = function (ev) {
    var img = document.getElementByTagName("img")[0];
    // 原生js入口函数中可以获得img元素宽高
    var width = window.getComputedStyle(img).width;
}
// jQuery写法
$(document).ready(function () {
    var $img = $("img")[0];
    // 在jQuery入口函数中不可以获得img元素宽高
    var $width = $img.width();  //永远是0
})
  1. 覆盖问题
//原生js
window.onload = function (ev) {
    console.log('one');  //不显示
};
window.onload = function (ev) {
    console.log('two');  //显示
}
//jq
$(document).ready(function () {
    console.log('one');  //显示
});
$(document).ready(function () {
    console.log('two');  //显示
});
上一篇 下一篇

猜你喜欢

热点阅读