首页
学习
活动
专区
工具
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,为什么在React的JSx中我们却要使用onclick这样的方式来添加事件处理函数呢?...根据做同一件事的代码应该有高耦合性的设计原则,既然我们要实现一个Counter,为什么不把实现这个功能的所有代码集中在一个文件里呢?...JavaScript、HTML和CSS的功能集中在一个文件中,实现真正的组件封装。

86240
  • 浅谈 React 组件设计

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

    1.1K10

    浅谈 React 组件设计

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

    67520

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

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

    57510

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

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

    56880

    从零开始学 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页面,将jQuery的min.js 的资源文件导入。 <!...注意 jQuery 库文件的路径一定要写正确!!! 我们必须先把 jQuery 库文件引入,才能够使用 jQuery 语法。

    2.7K20

    简单说 JavaScript中的事件委托(上)

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

    59620

    JavaScript停止冒泡和阻止浏览器默认行为

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

    2.2K20

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

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

    6.2K30

    jQuery中的常用内容总结(一)

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

    1.1K90

    JSX onClick 和 HTML onclick 的区别

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

    1.8K20
    领券