首页
学习
活动
专区
工具
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.为什么img的margin-top无效,margin-bottom有效?

89320
  • 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 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

    40520

    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

    React学习笔记—JSX

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

    86240

    第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

    jQuery:详解jQuery中的事件(一)

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

    1.7K20

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

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

    1.4K10

    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)的拼接而不是自己写函数名,

    3.1K20

    从零开始学 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

    window的onload事件和domcontentloaded执行顺序

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

    3.7K10

    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

    【JQuery】基础从零入门操作,简单详细

    一:JQuery介绍 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容 ⽹⻚结构 ⽹⻚样式 但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐...我们学习使⽤JQuery来操作⻚⾯对象 jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法....二:JQuery使用 三:JQuery语法 JQuery 的代码通常都写在 document ready 函数中 这是为了防⽌⽂档在完全加载(就绪)之前运⾏ jQuery 代码,即在 ⽂档加载完成后才可以对...这里用的是ID选择器,也可以用标签选择器 ①解释:点击button后就隐藏 ②代码简写 ③再简写(但是不规范) 四:JQuery选择器 JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有...⼀些⾃定义的选择器 JQuery中所有选择器都以开头:() 五:JQuery事件 1:事件的组成 事件由三部分组成: ① 事件源: 哪个元素触发的 ② 事件类型: 是点击, 选中, 还是修改?

    9910

    angularJS之站在jQuery的肩膀上

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

    88810

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

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

    6.1K40

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

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

    95920
    领券