02-jQuery的入口函数：入口函数写法、核心函数、与原生JS入口函数比较、解决$冲突问题

最新推荐文章于 2022-03-16 11:56:36 发布

不及你笑靥如花

最新推荐文章于 2022-03-16 11:56:36 发布

阅读量570

点赞数 1

分类专栏： jquery 文章标签： jquery js

本文链接：https://blog.csdn.net/qq_43775721/article/details/111152166

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的四种入口函数写法，核心函数的三种用法，包括接收函数、字符串选择器和DOM元素。对比了jQuery与原生JavaScript的入口函数在加载模式和覆盖情况上的差异。此外，还讨论了如何解决jQuery中$符号与其他库冲突的问题，提供了两种解决方案：释放$使用权或自定义访问符号。

摘要由CSDN通过智能技术生成

jQuery的入口函数

一、jQuery的入口函数写法
二、jQuery的核心函数
三、jQuery的入口函数以及与原生JS入口函数比较
- 1、入口函数加载模式不同
- 2、入口函数加载覆盖不同
四、解决jQuery的$冲突问题
- 1、释放'$'的使用权，后面使用jQuery代替' $'
- 2、自定义一个访问符号

一、jQuery的入口函数写法

   <script>
        $(document).ready(function() {
            alert("第一种写法");
        });

        jQuery(document).ready(function() {
            alert("第二种写法");
        });

        $(function() {
            alert("第三种写法(推荐)");
        });

        jQuery(function() {
            alert("第四种写法");
        });
    </script>

二、jQuery的核心函数

$()；就代表了jQuery的核心函数

核心函数用法：1、接收一个函数，入口函数

示例：

   <script>
   		//入口函数
        $(document).ready(function() {
        
        });
    </script>

核心函数用法：2、接收一个字符串（字符串选择器、代码片段）

字符串选择器：var name= $(“类名或ID名”);
代码片段：var name = $(标签);
注意：函数返回的是jQuery对象，即对象中保存了找到或者创建的DOM元素
在这里插入图片描述
图片代码:

  //入口函数
        $(document).ready(function() {
            //字符串
            var $a = 0;
            //字符串选择器
            var $a = $(".class");
            console.log($a);
            //接收代码片段
            var $p = $("< p > 我是段落 < / p>");
            console.log($p);
        });

核心函数用法：3、接收一个DOM元素

var 元素 = $(元素);
注意：会被包装成jQuery对象返回。
在这里插入图片描述

图片代码：

   <script>
        //入口函数
        $(document).ready(function() {
            //接收一个DOM元素
            var span = document.getElementsByTagName("span")[0];
            var $span = $(span);
            console.log($span);
        });
    </script>

三、jQuery的入口函数以及与原生JS入口函数比较

1、入口函数加载模式不同

原生JS的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的JS文件、外部的CSS文件、图片等。
jQuery的入口函数，是在文档加载完成后就执行。文档加载指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载成功。
补：文档加载的顺序为：从上往下，边解析边执行。

图片代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-jQuery和JS入口函数的区别(1)</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        window.onload = function(ev) {
            //1、通过原生的JS入口函数可以拿到DOM元素
            var img = document.getElementsByTagName("img")[0];
            console.log("onload", img);
            //2、通过原生的JS入口函数可以拿到DOM元素宽高
            var width = window.getComputedStyle(img).width;
            console.log("onload", width);
        }

        $(document).ready(function() {
            //1、通过原生的jquer入口函数可以拿到DOM元素
            var $img = $("img");
            console.log("ready", $img);
            //2、通过原生的jquer入口函数不可以拿到DOM元素宽高
            var $width = $img.width();
            console.log("ready", $width);
        });
    </script>
</head>

<body>
    <img src="//img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png" alt="背景图片">
</body>

</html>

2、入口函数加载覆盖不同

原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的。
jQuery中编写多个入口函数，后面不会覆盖前面的。

在这里插入图片描述
图片代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-jQuery和JS入口函数的区别(2)</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        window.onload = function(ev) {
            alert("onload,hello world1!");
        }
        window.onload = function(ev) {
            alert("onload,hello world2!");
        }

        $(document).ready(function() {
            alert("ready,hello world1!");
        });

        $(document).ready(function() {

            alert("ready,hello world2!");
        });
    </script>
</head>

<body>
</body>

</html>

四、解决jQuery的$冲突问题

’$‘符号在jQuery目的是为了减少写的代码但是可以做的更多，缺点是容易和其他框架’ $'符号冲突。 解决方法有2种：

1、释放’$‘的使用权，后面使用jQuery代替’ $’

注意：

释放操作必须在编写其他的jQuery之前编写。
释放之后不能在使用$

<script>
        jQuery.noConflict();
        jQuery(function() {
            alert("$符号冲突，解决方法一");
        });
    </script>

2、自定义一个访问符号