jQuery的入口函数

  • 一、jQuery的入口函数写法
  • 二、jQuery的核心函数
  • 核心函数用法：1、接收一个函数，入口函数
  • 核心函数用法：2、接收一个字符串（字符串选择器、代码片段）
  • 核心函数用法：3、 接收一个DOM元素
  • 三、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元素

jquery 调用函数 jquery函数的写法_js


图片代码:

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

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

var 元素 = $(元素);

注意：会被包装成jQuery对象返回。

jquery 调用函数 jquery函数的写法_js_02

图片代码：

<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中编写多个入口函数，后面不会覆盖前面的。

jquery 调用函数 jquery函数的写法_加载_03


图片代码：

<!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、自定义一个访问符号

注意：

  • 定义操作必须在编写其他的jQuery之前编写。
  • 定义之后不能在使用$
<script>
        var aaa = jQuery.noConflict();
        aaa(function() {
            alert("$符号冲突，解决方法二");
        });
    </script>