JQuery - JavaScript 的框架 - 语法简化版本

news2024/10/1 5:37:28

目录

  • js文件与 script 标签的位置问题
    • 总结:

有的时候是很坑,看了挺多资料,有时候乱糟糟的,都不说清楚,这是JavaScript的语法,还是 JQuery的语法,所以就会因为没有导入 JQuery的js文件,导致问题都不知道出在哪里,这一点对于初学者而言,真坑,学完JavaScript后,还要涉猎JQuery语法,学习 JQuery 一切都是为了简化,提高效率。

js文件与 script 标签的位置问题

问题:js文件在head标签里或者在div上面的位置时获取不到id的内容

这是由于加载顺序问题,html文档是从上往下加载,而不会全部加载后再执行js代码,因此导致get不到节点的信息

解决方案

  1. 在body标签下最末尾</body>前面引入 js 文件夹下的 js 文件
  2. 将js代码加一个window.onload函数
  3. 为 script 标签,添加一个属性 defer

方法 一 :这是最简单的方法

在这里插入图片描述

方法 二 : 这个方法一旦加进去了,无论是在哪个位置,都不会出现 js文件在head标签里或者在div上面的位置时获取不到id的内容的问题了,如 head 标签内也是可以的。

代码:

window.onload = function(){
	// 代码
	var test = document.getElementById('menu');
	console.log(test);
   };

结果测试:

在这里插入图片描述

方法 三 :script 标签添加 defer 属性

代码:

<script src="js/test.js" defer="defer"></script>

在这里插入图片描述

总结:

建议:如果是需要初始化自定义的 js 方法,可以自行选择上述方法,但是如果是对JavaScript框架(如JQuery)的 js 脚本调用,最好是放置在 head 标签内,虽然也不是必须的,只是为了标准化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/585359.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

「功能测试进阶到自动化测试」一路走来都离不每个阶段的计划

关于「从功能测试&#xff0c;转岗到自动化测试」&#xff0c;主要的几个问题 &#xff1a; 001 目前一直在走功能测试&#xff0c;工作中也没有机会接触自动化测试 。想后续从事自动化测试&#xff0c;我应该从哪里开始学 &#xff1f; 解答&#xff1a;自动化 &#xff0c…

【六】设计模式~~~结构型模式~~~适配器模式(Java)

【学习难度&#xff1a;★★☆☆☆&#xff0c;使用频率&#xff1a;★★★★☆】 1.1. 模式动机 在软件开发中采用类似于电源适配器的设计和编码技巧被称为适配器模式。通常情况下&#xff0c;客户端可以通过目标类的接口访问它所提供的服务。有时&#xff0c;现有的类可以满…

全渠道电子商务指南

希望将全渠道电子商务纳入您的业务战略&#xff0c;但不确定从哪里开始。这篇博文将指导您了解全渠道商务的基础知识&#xff0c;以及它与多渠道方法的区别。 全渠道电子商务旨在为线上和线下多个平台的客户创造全面的购物体验。客户可以通过各种接触点&#xff08;例如网站、…

网络安全-02-BurpSuite工具安装

网络安全-02-BurpSuite工具安装 &#x1f53b;一、BurpSuite简介&下载&#x1f4d7; 二、Windows安装Jdk&#x1f4f0; 2.1 下载Jdk并安装&#x1f4f0; 2.2 设置Jdk环境变量&#x1f4dc; 2.2.1 设置JAVA_HOME&#x1f4dc; 2.2.2 设置path&#x1f4dc; 2.2.3 Jdk验证 &a…

数据库基础——8.单行函数

这篇文章我们来讲一下数据库里面的单行函数 目录 1. 函数的理解 1.1 什么是函数 1.2 不同DBMS函数的差异 1.3 MySQL的内置函数及分类 2. 数值函数 2.1 基本函数 2.2 角度与弧度互换函数 2.3 三角函数 2.4 指数与对数 2.5 进制间的转换 3. 字符串函数 4. 日期和…

PyCharm配置Opencv

具体方案&#xff1a; Plan A&#xff1a;可以直接在pycharm中配置&#xff08;如果有梯子可以试试&#xff0c;没有可能下载不了&#xff09; 参考视频&#xff1a;直接在Pycharm中配置即可 两分钟用Pycharm安装并配置OpenCV_哔哩哔哩_bilibili PlanB&#xff1a;通过终端安…

dolphinscheduler3.1.7windows部署启动说明

简介 Apache DolphinScheduler是一个新一代分布式大数据工作流任务调度平台&#xff0c;致力于“解决大数据任务之间错综复杂的依赖关系&#xff0c;整个数据处理开箱即用”。它以 DAG(有向无环图) 的方式将任务连接起来&#xff0c;可实时监控任务的运行状态&#xff0c;同时…

01Redis单线程 VS 多线程

不同版本&#xff0c;情况不同 Redis的版本很多3.x、4.x、6.x&#xff0c;版本不同架构也是不同的&#xff0c;不限定版本问是否单线程也不太严谨。 版本3.x &#xff0c;最早版本&#xff0c;也就是大家口口相传的redis是单线程 数据结构简单避免锁的开销和上下文切换可以有…

YOLOv7 tiny 新增小目标检测层

YOLOv7 tiny 新增小目标检测层 YOLOv7 tiny 新增小目标检测层修改yolov7-tiny.yaml文件YOLOv7 tiny 结构图调用 models/yolo.py验证 YOLOv7 tiny 新增小目标检测层 根据已有的结构进行新增小目标层&#xff0c;&#xff0c;个人理解&#xff0c;仅供参考&#xff01;&#xff…

GPT模型应用及遥感云大数据在灾害、水体与湿地领域典型案例展示

GPT GPT的全称&#xff0c;是Generative Pre-Trained Transformer&#xff08;生成式预训练Transformer模型&#xff09;是一种基于互联网的、可用数据来训练的、文本生成的深度学习模型。 GPT与专注于下围棋或机器翻译等某一个具体任务的“小模型”不同&#xff0c;AI大模型…

Seata XA 模式理论学习、使用及注意事项 | Spring Cloud54

一、前言 通过以下系列章节&#xff1a; docker-compose 实现Seata Server高可用部署 | Spring Cloud 51 Seata AT 模式理论学习、事务隔离及部分源码解析 | Spring Cloud 52 Spring Boot集成Seata利用AT模式分布式事务示例 | Spring Cloud 53 我们对Seata及其AT事务模式的…

chatgpt赋能python:Python下载后的打开方法

Python 下载后的打开方法 Python是一种流行的编程语言&#xff0c;用于开发各种类型的应用程序&#xff0c;从Web应用程序到数据分析工具再到科学计算应用程序。许多人下载了Python&#xff0c;但是不确定如何在计算机上安装和打开它。在本篇文章中&#xff0c;我们将讨论Pyth…

如何实现UI交互?

UE5 插件开发指南 前言0 交易物品1 拖放物品1.0 拖放在背包里1.1 拖放在快捷栏里1.2 拖放在商店里1.3 放在其他地方2 小结前言 之前实现了UI的显示,这一篇补充UI的交互功能实现,先把思维导图画出来,程序员的自我修养就是任何时候都要理清思路,思路清晰是编码的前提,如下所…

解决幂等问题

1.概述 作为开发人员&#xff0c;我们每天都要开发大量的接口&#xff0c;其中包括了读接口和写接口&#xff0c;而对于写接口来说&#xff0c;除了要保证他的性能、可用性以外&#xff0c;还需要有一个重要的问题&#xff0c;那就是考虑如何保证接口的幂等性。 “幂等&#x…

mysql数据库连接失败授权认证 reading authorization packet --别的电脑可以,但是本地电脑连接失败

1.分析原因是否由于本机多次失败连接导致 在能连接的主机上或者服务器上 查看当前数据库阻断连接次数是否在不断增长 SHOW GLOBAL STATUS LIKE Aborted_connects;1.2观察这个终端连接次数是否一直在增长 如果一直在增长&#xff0c;说明mysql服务器被计算机不断的进行连接且被…

安科瑞针对HVDC方案推出的解决方案介绍

​安科瑞虞佳豪 摘 要&#xff1a;近年来&#xff0c;随着数据中心的迅猛发展&#xff0c;数据中心的能耗问题也越来越突出&#xff0c;有关数据中心的能源管理和供配电设计已经成为热门问题&#xff0c;合理可靠的数据中心配电系统方案&#xff0c;是提高数据中心电能使用效率…

数据结构与算法05:跳表和散列表

目录 【跳表】 跳表的实现原理 如何确定跳表的层高&#xff1f; 【散列表】 散列函数的设计 散列冲突 &#xff08;1&#xff09;开放寻址法&#xff08;Open Addressing&#xff09; &#xff08;2&#xff09;链表法&#xff08;chaining&#xff09; 装载因子 如何…

如何把两个视频拼接在一起?这些工具太棒了!

如何把两个视频拼接在一起&#xff1f;对于自媒体行业的人来讲&#xff0c;平时在进行短视频的剪辑时&#xff0c;总会需要合并多个视频&#xff0c;之后再剪辑处理。不过对于大部分没有从事自媒体行业的人来讲&#xff0c;可能对合并视频并不了解。下面我就来给大家分享可以拼…

paddleclas pp-shitu v1/v2

null集开放数据、开源算法、免费算力三位一体&#xff0c;为开发者提供高效学习和开发环境、高价值高奖金竞赛项目&#xff0c;支撑高校老师轻松实现AI教学&#xff0c;并助力开发者学习交流&#xff0c;加速落地AI业务场景https://aistudio.baidu.com/aistudio/projectdetail/…

BlackIce病毒分析

概述 blackice是一个古老的感染型病毒&#xff0c;可感染系统中exe、doc和xls文件&#xff0c;通过USB设备和网络驱动器来传播&#xff0c;会向C&C下载pe执行&#xff0c;会关闭常用的杀软进程。下面找了一个样本&#xff0c;这个样本的代码结构清晰&#xff0c;用IDA pro…