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

如果在html中没有onclick = "showHide (this),但在jquery中没有onclick=“this(This),我如何才能实现同样的目标呢?

要实现同样的目标,可以通过使用jQuery来绑定事件来替代在HTML中使用onclick属性。具体步骤如下:

  1. 在HTML中,删除掉onclick属性。
  2. 在JavaScript中,使用jQuery的事件绑定方法来给相应的元素添加点击事件。

例如,如果你想给一个按钮添加点击事件,可以使用以下代码:

代码语言:txt
复制
$(document).ready(function() {
  // 选择按钮元素,并绑定点击事件
  $('button').click(function() {
    // 在这里写入你想要执行的代码
    showHide(this);
  });
});

在上面的代码中,$('button')选择了所有的按钮元素,并使用.click()方法来绑定点击事件。当按钮被点击时,代码块中的showHide(this)会被执行。

这样就达到了在HTML中没有使用onclick="showHide(this)"的效果。

至于showHide函数的具体实现,由于题目要求不涉及第三方云计算品牌商,无法提供具体的代码实现。但你可以根据自己的需求,编写一个JavaScript函数来实现相应的功能。在函数中,你可以使用jQuery来操作DOM元素,实现显示或隐藏的效果。

希望以上内容能够帮助到你。如果有任何疑问,请随时追问。

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

相关·内容

React学习笔记—JSX

React判断一个元素是HTML元素还是React组件原则就是看第一个字母是否大写,如果在JSX我们不使用Counter而是使用counter就得不到想要结果。...其次,在JSX可以通过onClick这样方式给一个元素添加一个事件处理函数,当然,在HTML也可以用onclick(注意和onClick拼写有区别),但在HTML中直接书写onclick一直就是为人诟病写法...这就带来一个问题,既然长期以来不倡导在HTML中使用onclick,为什么在ReactJSx我们却要使用onclick这样方式来添加事件处理函数?...根据做同一件事代码应该有高耦合性设计原则,既然我们要实现一个Counter,为什么不把实现这个功能所有代码集中在一个文件里?...JavaScript、HTML和CSS功能集中在一个文件实现真正组件封装。

84540

浅谈 React 组件设计

jQuery 还大行其道时代,我们在网上可以到处一些 jQuery 插件,里面有各种丰富插件,比如轮播图、表单、选项卡等等。 组件?插件? 组件和插件区别是什么?...封装 DOM 结构 在一些最简单无脑 jQuery 插件,它们一般会将 DOM 结构直接写死到插件,这样插件拿来即用,但限制也比较大,我们无法修改插件 DOM 结构。...这部分可以是状态逻辑,也可以是 HTML 结构。 以下面这个组件为例,这样写看上去的确没有大问题。...考虑到这样一种业务场景,我们页面上有多个输入框,但这些输入框前面的 Icon 都是不一样,代表着不同含义。相信肯定不会有人会对每个 Icon 都实现一个 Input 组件。...在设计一个组件时候,很多人往往会陷入一种怪圈,那就是该怎么才能封装更多功能?怎么才能兼容不同渲染? 这时候我们就不妨换一种思路,如果将渲染交给使用者来控制

1.1K10

浅谈 React 组件设计

jQuery 还大行其道时代,我们在网上可以到处一些 jQuery 插件,里面有各种丰富插件,比如轮播图、表单、选项卡等等。 组件?插件? 组件和插件区别是什么?...封装 DOM 结构 在一些最简单无脑 jQuery 插件,它们一般会将 DOM 结构直接写死到插件,这样插件拿来即用,但限制也比较大,我们无法修改插件 DOM 结构。...这部分可以是状态逻辑,也可以是 HTML 结构。 以下面这个组件为例,这样写看上去的确没有大问题。...考虑到这样一种业务场景,我们页面上有多个输入框,但这些输入框前面的 Icon 都是不一样,代表着不同含义。相信肯定不会有人会对每个 Icon 都实现一个 Input 组件。...在设计一个组件时候,很多人往往会陷入一种怪圈,那就是该怎么才能封装更多功能?怎么才能兼容不同渲染? 这时候我们就不妨换一种思路,如果将渲染交给使用者来控制

63920

【前端】详解JavaScript事件代理(事件委托)

如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层,和目标元素增减是没有关系,执行到目标元素是在真正响应执行事件函数过程中去匹配;所以使用事件在动态绑定事件情况下是可以减少很多重复工作...document.title = "事件委托"; }; item3.onclick = function() { alert("hi"); }; 如果在一个复杂...DOCTYPE html> <script src="http://lib.sinaapp.com/js/<em>jquery</em>...性能考虑:虽然事件代理可以减少内存消耗,<em>但在</em>某些情况下,如事件处理逻辑非常复杂,可能会影响性能。 兼容性:事件代理在所有现代浏览器中都得到支持,<em>但在</em>老旧浏览器<em>中</em>可能存在问题。...总结 Hello,各位看官老爷们好,<em>我</em>已经建立了CSDN技术交流群,如果你很感兴趣,可以私信我加入<em>我</em><em>的</em>社群。

10110

使用IE6看老赵博客——比较完美版(可以在线查看、回复)

上一个版本主要是测试一下想法,也是熟悉一下jQuery,代码这个东东不动手写一下是很难弄明白。   有想法,写代码,出现错误,修改错误 = 不断进步。   带着问题去学习,动力就很大了。...能不能点里面的连接,然后就直接看了?试了一下,很不幸又跳到那个郁闷页面了。   怎么办?这就是问题。如何解决?修改连接,就是改一下a标签。点了之后不进行跳转不就行了吗?...查看了一下页面代码,原来css连接文件也是href形式,把css文件也给干掉了。没有css那页面就不用说了。   那么就要准确识别a标签了,其他标签不能替换。怎么办?听说正则表达式可以。...>有点小问题,如果是第一次访问,请在下面点一下,然后才能开始查看。...>如果没有加载,请单击 运行代码  单击“运行代码”按钮,然后会弹出来一个新页面,然后在按一下浏览器里“转向”,等上几秒钟就可以看到老赵博客首页了

55480

从零开始学 Web 之 HTML5(四)拖拽接口,Web存储,自定义播放器

2、浏览器默认会阻止目标元素 ondrop 事件:我们必须在目标元素 ondragover 阻止浏览器默认行为(使用事件参数对象 preventDefault()方法),才能将拖拽元素放到目标元素...分析问题:既然有多个被拖拽元素和多个目标元素存在,这些元素都存在于 document ,那么可不可以给 document 添加这些事件? 答案是可以。...我们知道不同浏览器音频视频播放器控件显示样式有差异,那么我们怎么做一个在任何浏览器下都有相同样播放器?...注意:jQuery没有提供对视频播放控件方式,所以如果使用jQuery操作元素,必须将其转为原生 js 方式来调用这些方法。...2、进度条一栏实际上有4层,处理可以看到总时长,缓存时长,播放时长外还有一个最顶层透明层,用于点击进度条实现跳变功能。

1.5K20

如何优雅设计 React 组件

那么,为什么大家会觉得 jQuery “过时了”?一来,文章《No JQuery!...为了让组件“一次编写,随处使用”原则,我们可以进一步拆分 TodoList 组件以满足其他组件使用。 但是,如何拆分组件才是最合理?...觉得这个问题没有最好答案,但我们可以从几个方面进行思考:可封装性、可重用性和灵活性。...但你有没有发现,这样实现 Title 组件并没有起到简化和封装作用,反而增加了使用复杂度,对于 HTML 来讲,h1 本身也是一个组件,所以我们拆分组件也是需要掌握一个度。...当然,如何设计取决于你自己项目,正所谓:没有最好,只有更合适。还是希望本篇文章能给你带来些许小收获。

4K00

如何优雅设计 React 组件

那么,为什么大家会觉得 jQuery “过时了”?一来,文章《No JQuery!...为了让组件“一次编写,随处使用”原则,我们可以进一步拆分 TodoList 组件以满足其他组件使用。 但是,如何拆分组件才是最合理?...觉得这个问题没有最好答案,但我们可以从几个方面进行思考:可封装性、可重用性和灵活性。...但你有没有发现,这样实现 Title 组件并没有起到简化和封装作用,反而增加了使用复杂度,对于 HTML 来讲,h1 本身也是一个组件,所以我们拆分组件也是需要掌握一个度。...当然,如何设计取决于你自己项目,正所谓:没有最好,只有更合适。还是希望本篇文章能给你带来些许小收获。

5.3K100

jQuery常用内容总结(一)

jQuery常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写;同时闲谈几句:在这里建议各位开发童鞋,如果有疾病尽快治疗,...:上一个选择对象(如果没有则都是document) selector:选择方式(就是选择器括号里面的内容)  且注意!...如果是ID选择器,则jQuery对象没有prevObject这个参数,因为ID本身就是唯一,例如上面的代码,如果在html定义了两个ID,jQuery选择器永远只会选择第一个匹配,如果你只需要在...p")[4]); 已经学会使用选择器了,现在讲解下jQuery选择器常用方法和属性: next():下一个节点                 样例:$('.2').next(); prev(...; OK,节点选择内容大致说完了,下面说说节点操作和节点CSS操作==> 实际开发对节点常用操作有哪些,这里理一理:节点显示和隐藏、取值、设置或修改参数、删除、设置或修改节点CSS、选中

1K30

JQuery安装与下载教程(efficiency)

大家好,又见面了,是你们朋友全栈君。 一. 认识 (1) jQuery 文件有两个常用版本:一个是 1.x 版本,另一个是 3.x 版本。...开发版是没有压缩,以“jquery.js”命名,一般供开发者学习 jQuery 内部实现原理。压缩版是经过高度压缩,以“jquery.min.js”命名,一般供实际开发者使用。...在实际开发,我们一般都是使用压缩版,也就是“jquery.min.js”版本。压缩版经过压缩,体积小很多,这样也可以提高页面加载速度。那么小伙伴们就会问了:“为什么不用开发版?”...引入资源文件,并测试是否引加载成功,如果是undefinition 就没有引入 创建一个html页面,将jQuerymin.js 资源文件导入。 <!...注意 jQuery 库文件路径一定要写正确!!! 我们必须先把 jQuery 库文件引入,才能够使用 jQuery 语法。

2.7K20

简单说 JavaScript事件委托(上)

从上面的图中我们看见,当点击 蓝色 p 元素时,先触发了 p 元素上绑定事件,然后又触发了 红色 div 元素上绑定事件,这就是事件冒泡了。 事件委托 实现 先来段代码 <!...我们再来看另一种情况,当元素最开始不存在时,需要绑定事件,最先能想到会出现这种情况场景就是,元素是通过发请求,获取数据后,拼接到页面上。而这种元素如果在发请求之前就绑定事件,是不会生效。 上面这段代码,在元素 li3 还不存在时候就绑定事件了,所以执行代码后就会报错 ?...总结 这篇文章是比较基础,还有一些东西没有说,比如文中说 事件委托实现 时候,举例子比较简单,监听 li 里面没有子元素,如果存在子元素时,那点击子元素 事件就不会触发,那怎么办?...还有 JQuery事件委托 又是怎么做? 看这里 简单说 JavaScript事件委托(下)

57820

EasyUI学习笔记

EasyUI官网 EasyUI概述 jQuery EasyUI是一组基于jQueryUI插件集合, 而jQuery EasyUI目标就是帮助web开发者更轻松打造出功能丰富并且美观UI界。...> 在页面添加html标签;class属性里面全部小写,格式以”easyui-“开头,加上主键 (”-“后面更英文单词被称为组件) <div class="easyui-panel" data-options...EasyUI初始化原理 页面扫描class=”easyui-” 实现准备好了一大堆样式文本和样式类....事件监听方式,使用on方法添加事件.例如linkbutton linkButton没有事件,需要通过jquery方式去处理. <!...但在同一个时间只会显示一个面板。 每个选项卡面板都有头标题和一些小按钮工具菜单, 包括关闭按钮和其他自定义按钮。 <!

10.3K30

JavaScript阻止冒泡和取消默认事件(默认行为)

= false; preventDefault它是事件对象(Event)一个方法,作用是取消一个目标元素默认行为。...既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。 什么元素有默认行为?如链接,提交按钮等。...当Event 对象 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用。...> var a = document.getElementById("testB"); a.onclick = function(){ return false; }; 下面这个是使用jQuery,既阻止默认行为又停止冒泡...firefox里event跟IE里不同,IE里是全局变量,随时可用;firefox里要用参数引导才能用,是运行时临时变量。

5.9K30

JSX onClickHTML onclick 区别

在 JSX 可以通过 onClick 这样方式给一个元素添加一个事件处理函数,当然,在 HTML 也可以用 onclick (小写 c),但在 HTML 中直接书写 onclick 一直就是为人垢病写法...,网页应用开发界一直倡导是用 jQuery 方法添加事件处理函数,直接写 onclick 会带来代码混乱问题。...: 既然长期以来一直不倡导在 HTML 中使用 onclick,为什么在 React JSX 我们却要使用 onClick 这样方式来添加事件处理函数?...JSX onClickHTML onclick 区别 上面 HTML onclick 这些问题,在 JSX 中都不存在,JSX onClick 事件处理方式和 HTML onclick...JSX 组件使用 onClick,并不会产生直接使用 onclick HTML,而是使用了事件委托(event delegation)方式处理点击事件,无论有多少个 onClick 出现,其实最后都只在

1.7K20

jQuery常用内容总结(一)

jQuery常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写;同时闲谈几句:在这里建议各位开发童鞋,如果有疾病尽快治疗,...:上一个选择对象(如果没有则都是document) selector:选择方式(就是选择器括号里面的内容)  且注意!...如果是ID选择器,则jQuery对象没有prevObject这个参数,因为ID本身就是唯一,例如上面的代码,如果在html定义了两个ID,jQuery选择器永远只会选择第一个匹配,如果你只需要在...p")[4]); 已经学会使用选择器了,现在讲解下jQuery选择器常用方法和属性: next():下一个节点                 样例:$('.2').next(); prev(...; OK,节点选择内容大致说完了,下面说说节点操作和节点CSS操作==> 实际开发对节点常用操作有哪些,这里理一理:节点显示和隐藏、取值、设置或修改参数、删除、设置或修改节点CSS、选中

1.1K90
领券