当前位置: 首页 > article >正文

jQuery 入口函数 详解

入口函数:

什么是入口函数?

       不知道大家还有没有印象,我们在学习原生 JS 的 BOM 时,由于HTML元素在 script 标签的后方,因为代码自上而下运行而导致的报错情况,当时我们有两种解决方法,第一种是方法是 load,第二种方法是 DOMContentLoaded。在 jQuery 这里也存在这样的情况,如果我们的 script 标签放在HTML元素的前面,就需要入口函数了

作用:

       该入口函数的作用是等 DOM 结构渲染完毕就可以执行里面的代码了,不用等待图片,css等所有资源都加载完毕,其相当于原生 JS 中的 DOMContentLoaded

书写格式: 

第一种(推荐):$( function( ) {  XXXX })
第二种:$( document ).ready( function( ) { XXXX })

我们举一个例子,例如我们想使用 jQuery 隐藏一个div(使用 jQuery 的 hide 方法):

第一种书写格式:

 
  1.  
    <body>
        <script>
            $(function(){  //因为HTML元素在script下方,所以使用入口函数
                $('div').hide();
            })
        </script>
        <div></div>
    </body>

    第二种书写格式:

    <body>
        <script>
           $(document).ready(function(){  //因为HTML元素在script下方,所以使用入口函数
               $('div').hide();
           })
        </script>
        <div></div>
    </body>

    两种格式均正确有效,但普遍使用第一种,因为第一种更为简便

 顶级对象 $:

首先我们来说明一下 jQuery 的顶级对象:$,相当于原生 JS 中的 window,其实 $ 只是 jQuery 的别称,我们在开发编写代码时可以使用 jQuery 来代替 $,或者使用 $ 代替 jQuery,但是由于 $ 更加方便简洁,所以我们一般使用 $

例如在上面的入口函数代码中,我们将 $ 换为 jQuery 也是正确的:

<body>
    <script>
        jQuery(function(){ 
            jQuery('div').hide();
        })
    </script>
    <div></div>
</body>


http://www.kler.cn/news/315678.html

相关文章:

  • IT行业中的工作生活平衡探讨
  • Android 内核开发之—— repo 使用教程
  • Kotlin 函数和变量(四)
  • 双向链表:实现、操作与分析【算法 17】
  • 【Fastapi】参数获取,json和query
  • 深度学习02-pytorch-05-张量的索引操作
  • 2024 年最新前端ES-Module模块化、webpack打包工具详细教程(更新中)
  • Android 车载应用开发指南 - CarService 详解(下)
  • 在Spring Boot中实现多环境配置
  • 汽车总线之----FlexRay总线
  • LeetCode_sql_day31(1384.按年度列出销售总额)
  • C# 委托与事件 观察者模式
  • Java项目实战II基于Java+Spring Boot+MySQL的植物健康系统(开发文档+源码+数据库)
  • 设计模式之复合模式
  • 高级java每日一道面试题-2024年9月16日-框架篇-Spring MVC和Struts的区别是什么?
  • Redis发布和订阅
  • 波分技术基础 -- Liquid OTN技术特性
  • 高效打造知识图谱,使用LlamaIndex Relik实现实体关联和关系抽取
  • 火车站高铁站站点时刻查询网站计算机毕设/动车站点时刻查询
  • WebRTC编译后替换libwebrtc.aar时提示找不到libjingle_peerconnection_so.so库
  • 基于单片机控制的程控开关电源研究
  • list(一)
  • 基于微信小程序的健身房管理系统
  • ROS第五梯:ROS+VSCode+C++单步调试
  • [Golang] Context
  • GNU链接器(LD):设置入口点(ENTRY命令)的用法及实例解析
  • 科研绘图系列:R语言箱线图(boxplot)
  • error -- unsupported GNU version gcc later than 10 are not supported;(gcc、g++)
  • 计算机毕业设计 基于SpringBoot的小区运动中心预约管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • 【python】深度优先搜索文件夹并移动全部doc文件