jQuery--入口函数、核心函数

jQuery的使用

引入jQuery库

• 引入jQuery文件，有两种方式：
  • jquery.com下载jquery库并引入；
  • 使用CDN（内容分发网络）引入；

//1.下载文件后引入
<script src="jquery-1.10.2.min.js"></script>
//2.使用cdn
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">//百度cdn
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">//新浪

编写代码

• 与使用原生js相同，html页面中的代码需要包裹在script标签中；

jQuery版本

• jQuery 1x、2x：兼容IE6、7、8，但是已经停止更新（百度、京东在用）；
• jQuery 3x：不兼容IE6、7、8，是官方目前主要维护更新的版本；

jQuery入口函数

• jQuery的入口函数语法：

$(document).ready(function(){
    //要执行的代码
});

• 原生js的入口函数（window.onload为例，当然还有其他方法）:

window.onload = function(){
    //要执行的操作
};

jQuery入口函数与原生JavaScript入口函数的区别总结：

第一：加载模式不同

• 原生js的入口函数（window.onload），会等到DOM加载完成，同时其中的图片等元素也加载完成后再执行js代码；
• jQuery的入口函数，只要DOM加载完成即可；

<!-- 该链接会随机生成假图 -->
<img src="https://picsum.photos/200/300" alt="">

<script>
    // 1.原生js：DOM及DOM中所有资源加载完成后才执行js代码
    window.onload =function(){
        var img = document.getElementsByTagName('img')[0];
        console.log(img.offsetWidth);//200,图片加载完成再执行js代码，因此能拿到图片宽度
    }
    // 2.jQuery：只要DOM加载完就行
    $(document).ready(function(){
        $img = $('img')[0];
        console.log($img.width);//0，执行代码时，仅是DOM加载完毕，其内嵌的图片资源还没加载
    })
</script>

第二：可指定的入口函数数量不同

• 原生js的入口函数，只能指定一个入口函数，如果是通过DOM0级的方法指定的，后指定的入口函数会覆盖先指定的入口函数；
• jQuery的入口函数，后面的不会覆盖前面的，会按照指定顺序执行相应代码；

// 入口函数数量
// 1.原生js（需要是DOM0方式），只能有一个，后覆盖前
window.onload = function(){
    console.log('111');
}
window.onload = function(){
    console.log('222');//只输出222，111被覆盖了
}

// 2.jQuery：可以指定多个，按照顺序执行
$(document).ready(function(){
    console.log('11');//11
})
$(document).ready(function(){
    console.log('22');//22
})

3.jQuery入口函数的其他写法

• 除了上文提到的写法，jQuery入口函数还有三种写法：

// 第一种，将$替换为jQuery
jQuery(document).ready(function(){});

// 第二种，去掉ready及其前面部分，将该位置换成jQuery
jQuery(function(){});

// 第三种，去掉ready到$之后的那部分
$(function(){});//实际上用的比较多的也是这个

冲突问题（$符冲突）

• 实际开发中可能会出现其他框架也使用$的情况，此时后引入的框架的$才有效；
• 解决办法：释放jQuery的$；

jQuery.noConflict（）/$.noConflict()方法

• 该方法用于释放$使用权,唯一参数：removeAll,传入该参数时会释放所有jQuery变量使用权；
• 注意：一旦释放了$使用权，就不能再使用$，相应地位置需要用jQuery代替；并且释放操作需要在最前面指定；

//释放$符使用权
jQuery.noConflict();
//$相应地位置需要用jQuery替换
jQuery(function(){})

• 释放$后，可以==指定自定义的字符代替$==；
• 指定自定义符号：

var peanut = jQuery.noConflict();

jQuery核心函数

• jQuery的核心函数就是：$();
• 可以给核心函数传递以下几种类型的值：
  • 函数；
  • 选择器；
  • 代码片段；
  • DOM元素；

<span></span>
<script>
    // 1.接受一个函数参数，此时就是入口函数
    $(function(){
        console.log('函数参数');
    });
    
    // 2.接受一个选择器：此时能在DOM中查找与选择器匹配的元素，返回jQuery对象
    $span = $("span");
    
    // 3.代码片段:返回一个jQuery对象，其中包含了新创建的DOM元素
    $node = $("<p>jQuery写入的内容</p>");
    $('body').append($node);
    
    // 4.接受一个DOM元素：此时核心函数可以将该DOM元素包装成一个jQuery对象
    var ele = document.getElementsByTagName('span')[0];
    $span = $(ele);
    console.log($span);
</script>

一些特殊的参数

• 其他转换为布尔值为false的值，传入核心参数时，返回一个空对象，比如null、undefined、false、0、NaN；
• true：返回一个包含true的对象；
• 数组：返回将数组转换成对象后的结果；