首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery:为什么不引人注目的JavaScript /文档就绪功能而不是OnClick事件?

在这个问题中,我们讨论了为什么不使用JavaScript的文档就绪功能而是使用OnClick事件。

JavaScript的文档就绪功能是一种在文档加载完成后执行的方法,它可以确保在执行JavaScript代码时,所有的HTML元素都已经加载完成。然而,在某些情况下,使用文档就绪功能可能会导致问题,因为它可能会在用户交互之前执行代码,从而影响用户体验。

相比之下,OnClick事件是一种更具交互性的方法,它只在用户单击某个元素时触发。这意味着,当用户与页面进行交互时,才会执行相关的JavaScript代码。这种方法可以提高用户体验,因为它可以确保代码只在用户需要时执行,而不是在页面加载时立即执行。

因此,在某些情况下,使用OnClick事件而不是文档就绪功能可以提供更好的用户体验和交互性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

web前端开发初学者十问集锦(5)

+ 2; }()); 另外一种实现相同功能方法是省略包裹函数括号,因为当你将立即执行函数返回值赋值给一个变量时它们不是必需; var result = function () { return...事件为什么会导致页面刷新?...JavaScript中循环给元素添加onclick事件局部变量值均相同怪异现象! 故事还没有结束,现在注释掉alert,然后单击任意页面中span,你觉得会弹出什么值呢?0,1或者是2。...上面不是说nestedLocalVar是事件函数局部变量吗,为什么两次弹出值相同而且都是诡异2。 原因是暂时还未弄明白。但是有两个解决办法。...window.onload事件则需要HTML文档所有内容与相关联内容统统加载完成之后才能被触发。 9.为什么imgmargin-top无效,margin-bottom有效?

86320

JQuery语法

1.JQuery语法 $(sector).action() 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery action() 执行对元素操作...实例 $(document).ready(function(){     $("p").onclick(function(){          alert("这是我第一个JQuery实例")    ...})   }) 注释: 文档就绪事件 您也许已经注意到在我们实例中所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){... // 开始写 jQuery 代码... }); jQuery 入口函数与 JavaScript 入口函数区别: jQuery 入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。...JavaScript window.onload 事件是等到所有内容,包括外部图片之类文件加载完后,才会执行。

39520

JQuery 对控件事件操作

JQuery是非常棒js类库,有丰富UI库和插件,不过我钟爱他是他选择器,感觉其他功能有时跟后台人员距离很远,所以一般我也只使用一下他选择器。...jQuery绑定事件非常方便,有bind、live、one还有它帮你把一些常用事件给单独了出来,比如控件onclick事件,我们绑定onclick事件时候只需要 $("#testButton")...为什么有这个取消特定函数方法呢,我们来看下例子,我们会发现,javascript事件,跟C#事件如出一辙,事件绑定是叠加(+=) 不是覆盖。...我这里取消了绑定,又删除了特定绑定,为什么还会执行Eat呢? 其中原由要看jQuery类库了,我估计它只删除了通过JQuery绑定那些事件了,呵呵。 那这时候我们该如何呢?...$("#testButton").attr("onclick", ""); 这样就可以把onclick事件清除了,记住,attr上因为是元素属性,所以这里要写 “onclick不是click,

1.8K60

jQuery:详解jQuery事件(一)

之前用过一些jQuery动画和特效,但是用到部分也超过10%样子,感觉好浪费啊——当然浪费不是jQuery,而是Web资源。...现在就一点一点积累自己知识体系,记录自己学到和自己所理解jQuery。   JavaScript和HTML之间交互式通过用户和浏览器操作页面时引发事件机制来处理。...当文档或者它某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统JavaScript也能完成这些交互,但是jQuery增加兵扩展了基本事件处理机制。...).ready()方法注册事件处理程序,在DOM完全就绪时就可以被调用,也即此时网页所有元素对jQuery都是可以访问,但是并不是这些元素关联文件都已经下载完毕。   ...根据上述描述,显然使用jQuery$(docum).ready()方法时会出现一个问题。由于在该方法内注册事件,只要DOM就绪就会被执行,因此可能此时元素关联文件未下载晚。

1.6K20

React学习笔记—JSX

,网页应用开发界面一直倡导是用jQuery方法添加事件处理函数,直接写onclick会带来代码混乱问题。...这就带来一个问题,既然长期以来倡导在HTML中使用onclick为什么在ReactJSx中我们却要使用onclick这样方式来添加事件处理函数呢?...来代表内容,用CSS代表样式,用JavaScript来定义交互行为,这三种语言分在三种不同文件里面,实际上是把不同技术分开管理了,不是逻辑上“分而治之”。...根据做同一件事代码应该有高耦合性设计原则,既然我们要实现一个Counter,为什么不把实现这个功能所有代码集中在一个文件里呢?...JavaScript、HTML和CSS功能集中在一个文件中,实现真正组件封装。

82540

第86节:Java中JQuery基础

jquery是一种快速,小巧,功能丰富JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用一种api,可以在多种浏览器中工作。...封装了JavaScript常用功能代码,提供了一种简便JavaScript设计模式,优化了HTML文档操作,事件处理,动画设计和ajax交互。...事件,ready(fn) 当dom载入就绪就可以查询及操纵时绑定一个要执行函数,这是事件模块中最重要一个函数,因为它可以提高web应用程序响应速度。.../js/jquery-1.11.0.js" > /*文档加载完成事件*/ jQuery(document).ready(function(){ alert("jQuery(document...).hide() - 隐藏当前元素 jquery函数 // 为了防止文档完全加载就绪之前运行代码 $(document).ready(function(){ }); 选择器 元素选择器 $("p.kk

2.9K30

求职 | 史上最全web前端面试题汇总及答案

当浏览器解析到该元素时,会暂停其他资源下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部不是头部。...em不是固定,它是相对单位,em是指当前默认字号大小(继承父元素默认字号)倍数,可根据父元素字号改变自动调整。...()是当DOM文档树加载完成后执行一个函数 (包含图片,css等)所以会比load较快执行。...jQuery是一个js库,主要提供功能是选择器,属性修改和事件绑定等等。 jQuery UI则是在jQuery基础上,利用jQuery扩展性,设计插件。...它封装JavaScript常用功能代码,提供一种简便JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.3K10

从零开始学 Web 之 jQuery(一)jQuery概念,页面加载事件

毕竟 jQuery 知识 JavaScript 编写函数库而已,有些功能 jQuery 没有封装,则还需要通过自己写原生 JavaScript 来实现。 5、为什么要学 jQuery?...它封装JavaScript常用功能代码,提供一种简便操作,优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。...三、jQuery对象和DOM对象互转 注意:通过 DOM 方式和 jQuery 方法获取同一个元素,不是相同对象。...3、jQuery对象.val();表示获取该对象 value 属性值; 4、jQuery对象.val("值");表示设置该对象 value 属性值; 四、页面加载事件 1、DOM中页面加载事件...$ 也可以换成 jQuery。 特点:不是整个页面的所有元素,而是页面中基本元素加载完后就执行,所以比使用 load 方式快一些。

1.6K40

ajax全套

异步JavaScript: 使用 【JavaScript语言】 以及 相关【浏览器提供类库】 功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript回调函数】。...send里面 send相当于请求体 数据转换成这种格式 } jQuery Ajax Query其实就是一个JavaScript类库,其将复杂功能做了上层封装,使得开发者可以在其基础上写更少代码实现更多功能...jQuery 不是生产者,而是大自然搬运工。...浏览器同源策略并不是对所有的请求均制约: 制约: XmlHttpRequest 叼: img、iframe、script等具有src属性标签 跨域,跨域名访问,如:http://www.c1.com...只能用GET请求,因为src这个属性只能发送GET请求;      2.约定规则,客户端要把函数名发送给服务端,服务端应该用客户端发过来函数名去做funcname(arg)拼接不是自己写函数名,

3K20

windowonload事件和domcontentloaded执行顺序

在此我简单翻译一下: .ready()只要页面的文档对象模型(DOM)可以安全地操作,该方法就提供了一种运行JavaScript代码方法。...从jQuery 3.0开始,jQuery确保在一个处理程序中发生异常不会阻止随后添加处理程序执行。 大多数浏览器以事件形式提供类似的功能DOMContentLoaded。...注意,尽管DOM总是在页面完全加载之前就绪,但是在 .ready()处理程序期间执行代码中附加加载事件侦听器通常不安全。...为什么我上面说是类似于DOMContentLoaded,看了上面官方文档解释应该会明白了。...所以jqready事件执行结束时间和DOMContentLoaded结束时间并不是完全相同,所以在使用过程中应当进行一些注意。

3.6K10

Github 移除 JQuery 过程

实现CSS类名切换; CSS现在支持在样式表不是JavaScript中定义可视化动画; $.ajax请求可以使用Fetch标准执行; addEventListener()接口足够稳定,可以跨平台使用;...我们可以很容易地用轻量级库封装事件委托模式; 随着JavaScript语言发展,jQuery提供一些语法糖已经变得多余了。...默认情况下,当没有匹配初始选择器时,jQuery会自动跳过整个expresion;但对我们来说,这种行为是一个bug,不是一个特性。...相反,我们: 设置指标,跟踪每行代码使用jQuery调用比率,并随时间监视该图,以确保它要么保持不变,要么下降,不是上升。 我们鼓励在任何新代码中导入jQuery。...例如,默认显示原始时间戳,并升级以将时间转换为本地时区, 嵌套在元素中时,即使没有JavaScript也具有交互作用,但通过辅助功能增强进行升级。

2.1K10

快速学习-登录功能实现-页面中错误提示

JavaScript是一种解释型脚本语言,C、C++、Java等语言先编译后执行, JavaScript是在程序运行过程中逐行进行解释。 ② 基于对象。...JavaScript是一种采用事件驱动脚本语言,它不需要经过Web服务器就可以对用户输入做出响应。跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器支持。...JavaScript事件驱动 ① 用户事件:用户操作,例如单击、鼠标移入、鼠标移出等 ② 系统事件:由系统触发事件,例如文档加载完成。...③ 常用事件: onload onclick onblur onfocus onmouseover onmouseout BOM ① Borwser Object Model 浏览器对象模型...代表当前HTML文档,包含了整个文档树形结构。

1.9K30

angularJS之站在jQuery肩膀上

jQuery:用更少代码,实现更强悍功能 托互联网日新月异发展福,浏览器变成了人们接入互联网入口,JavaScript 这个曾经小语种,终于成功地站到了舞台中央,唤起了开发者兴趣。...浏览器里原生JavaScript有点像汇编语言,不同浏览器就像不同CPU架构, 汇编语言各有千秋,这让前端开发者很恼火。聪明人很快发现了这个痛点,于是, 抹平浏览器差异jQuery库出现了。...jQuery由一小撮对浏览器极其熟稔极客负责抹平不同浏览器差异,其他开发 者只需要基于jQuery进行开发,可以更好地关注业务实现,不是把时间花在 适配不同浏览器上。...标准HTML页面是静态,被浏览器渲染后就产生了一个DOM树: ? jQuery让静态文档动起来,通过提供一系列选择符,jQuery使开发者能够 极其方便地选中一组DOM节点,对其进行操作。...在DOM文档就绪后,启动一个定时器 使用$(document).ready()可以监听DOM文档就绪事件,通常简写成$(...)。

86910

第78天:jQuery事件总结(一)

JavaScript和HTML之间交互式通过用户和浏览器操作页面时引发事件机制来处理。当文档或者它某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。...当然使用传统JavaScript也能完成这些交互,但是jQuery增加并扩展了基本事件处理机制。jQuery不仅提供了更加优雅事件处理语法,而且极大增强了事件处理能力。   ...一、jQuery事件 1、加载DOM:   执行时机:在常规JavaScript中,通常使用window.onload方法,而在jQuery中,使用是$(document).ready()方法,...).ready()方法注册事件处理程序,在DOM完全就绪时就可以被调用,也即此时网页所有元素对jQuery都是可以访问,但是并不是这些元素关联文件都已经下载完毕。   ...根据上述描述,显然使用jQuery$(docum).ready()方法时会出现一个问题。由于在该方法内注册事件,只要DOM就绪就会被执行,因此可能此时元素关联文件未下载完。

93220

前端入门6-JavaScript客户端api&jQuery

正文-JavaScript-客户端API & jQuery JavaScript 是用来丰富网站内容,让网站支持各种交互行为功能等等。...a; boolean a; JavaScript 中,统一用 var 定义一个变量: var a; 变量数据类型 虽然声明变量时,不必指出变量类型,但也要清楚下,JS 中基本数据类型 : ?...但有一个更方便解决方案,那就是使用jQuery,这是一个基于 JavaScript 框架库,它封装了操纵 DOM 各种功能,内部对不同浏览器进行了兼容性处理,那么我们使用时候就可以不用再去考虑那么兼容性处理了...,其实也就是表示文档当前所显示窗口对象,所以一些窗口性功能都可以通过这个对象来调用。...jQuery 为什么使用 jQuery 类似于 JVM 隐藏了不同操作系统之间差异,让开发能够更专注于功能实现,不必花费过多时间适配不同操作系统。

6K40

好久不用 jQuery, 来复习一下

jQuery 凭借简洁语法和跨平台兼容性,极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 操作。...1.1.2 jQuery 引用 ① 下载 jQuery  ☞ 1.x:兼容 ie678,使用最为广泛,官方只做 BUG 维护,    ♞ 功能不再新增。...通过 jQuery (document).ready() 方法注册事件处理程序,在 DOM 完全就绪时就可以被调用。...另外,需要注意一点,由于在 (document).ready() 方法内注册事件,只要 DOM 就绪就会被执行,因此可能此时元素关联文件未下载完。...示例 // 提交表单 form.submit(); 1.6.3 其他事件绑定 // 绑定事件 jq对象.on("事件名称",回调函数) // 解除绑定,如果off方法传递任何参数,则将组件上所有事件全部解绑

5.5K40
领券