jQuery入口函数

  • 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕
    $(function () {
// 此处是页面DOM加载完成的入口
}); $(document).ready(function () {
// 此处是页面DOM加载完成的入口
$('div').hide()
);

演示代码

  • 由于本人使用Flask Jinjia2注释样式为 {# #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> {# <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>#}
<script src="../static/jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<h1>Hello the World</h1>
<script type="text/javascript">
# 最原始的写法但是要求DIV提前加载
$('div').hide();
# 方法1. 等着DOM加载完毕后再去执行js代码
$(document).ready(function () {
$('div').hide()
});
# 方法2. 等着DOM加载完毕后再去执行js代码 隐藏DIV
$(function(){
$('div').hide();
});
</script>
<div></div>
</body>
</html>

END

[jQuery]入口函数(一) jquery.min.js 一定要单线程下载,复制粘贴容易入坑的更多相关文章

  1. jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

    this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(“”):获取元素   标 ...

  2. 5.js与jQuery入口函数执行时机

    js与jQuery入口函数执行时机区别: JS入口函数是在所有资源加载完成后,才执行.(包括:页面.外部js文件.外部css文件.图片) jQuery入口函数,是在文档加载完成后就执行.文档加载完成指 ...

  3. JS入口函数和JQuery入口函数

    首先,讲一下它们的区别: (1)JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行. (2)JQuery入口函数是在所有标签加载完之后,就会去执行. ...

  4. 01-老马jQuery教程-jQuery入口函数及选择器

    前言 这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟.视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html ...

  5. 1.jQuery入口函数

    <!--注意,如果需要对ie67兼容,我们可以使用原生低版本的jquery 比如说jquery-1.12.4.js--> <!DOCTYPE html> <html la ...

  6. 第69天:jQuery入口函数

    一.jQuery入口函数 1.$(document).ready(function(){}); 2.$(function(){}); 二.事件处理程序  1.事件源 Js方式:document.get ...

  7. 1.jQuery入口函数 与javaScript入口函数

    1.jQuery入口函数 与javaScript入口函数 JQ入口函数: $(document).ready(function(){ }); 或者 $(function(){ }) Js入口函数: w ...

  8. jQuery——入口函数

    中文网 http://www.css88.com/jqapi-1.9/ 版本兼容问题 版本一:1.x版本,兼容IE678 版本二:2.x版本,不兼容IE678 入口函数区别 <script> ...

  9. jquery 入口函数

    jQuery 入口函数: $(document).ready(function(){ // 执行代码 }); 或者 $(function(){ // 执行代码 }); JavaScript 入口函数: ...

随机推荐

  1. bootstrap4popper.js报错Uncaught ReferenceError

    这是因为bootstrap4需要umd版的popper.js <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/pop ...

  2. 数字任意组合 - gcd

    链接:https://www.nowcoder.com/acm/contest/160/A来源:牛客网 题目描述有一个计数器,计数器的初始值为0,每次操作你可以把计数器的值加上a1,a2,...,an ...

  3. Git创建远程分支并提交代码到远程分支

    1.可以在VS中新建分支 2.可以通过git branch -r 命令查看远端库的分支情况 这些红色都是远程的分支 3.从已有的分支创建新的分支(如从master分支),创建一个dev分支 (不用vs ...

  4. 初探ASP.NET Core 3.x (3) - Web的运作流程和ASP.NET Core的运作结构

    本文地址:https://www.cnblogs.com/oberon-zjt0806/p/12215717.html 注意:本篇大量地使用了mermaid绘制图表,加载需要较长的时间,请见谅 [TO ...

  5. .net core webapi搭建(3)Code first+拆层三层+仓储

    将项目拆层 我们要 将项目拆分成 Infrastructure     基础层 Core                   核心层 Utility                  工具 我们想在就 ...

  6. Python3基础之初识Python

    Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序, 作为ABC语 ...

  7. chrome 安装

    Centos7 yum安装chrome浏览器   跟着这个教程安装的:Centos7安装chrome浏览器 (点击) 1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 goo ...

  8. Linux 查看磁盘IO并找出占用IO读写很高的进程

    背景-线上告警 线上一台服务器告警,磁盘利用率 disk.util > 90,并持续告警. 登录该服务器后通过 iostat -x 1 10 查看了相关磁盘使用信息.相关截图如下: # 如果没有 ...

  9. Spring-data-Jpa项目搭建

    传送门:Spring Data 学习   Spring Data 开发环境搭建   Spring-data-jpa详解 简介 Spring Data是什么    Spring Data是一个用于简化数 ...

  10. Tomcat异常:UnsupportedClassVersionError unsupported major.minor version 51.0 unable to load class [dup

    案例 今天把项目换成了jdk1.8,启动tomcat报如下异常: UnsupportedClassVersionError unsupported major.minor version 51.0 u ...