绑定弹窗事件最好的方法,原生JS和JQuery方法

使用jQuery

ui = {
        $close: $(‘.close‘)
      , $pop: $(‘.pop‘)
      , $topopBtn: $(‘.topop-btn‘)
      , $popbtnArea: $(‘.popbtn-area‘)
    };
// 绑定打开弹窗
      ui.$popbtnArea.on(‘click‘,‘.topop-btn‘,function(){
      ui.$pop.eq($(this).index()).show();
      })
      // 关闭弹窗
      ui.$close.on(‘click‘,function(){
      ui.$pop.hide();
      });

原生JS代码

ui.$pop = document.getElementsByClassName(‘pop‘);
ui.$topopBtn = document.getElementsByClassName(‘topop-btn‘);
ui.$close = document.querySelectorAll(‘.close‘);

for(var i=0;i<ui.$topopBtn.length;i++){
        ui.$topopBtn[i].index = i;
}
      // 打开弹窗
      for(var i=0;i<ui.$topopBtn.length;i++){
        ui.$topopBtn[i].onclick = function(){
          ui.$pop[this.index].style.display = ‘block‘;
        }
      }
      // close关闭弹窗
      for(var i=0;i<ui.$close.length;i++){
        ui.$close[i].onclick = function(){
          this.parentNode.style.display = ‘none‘;
        }
      }

有错误或者更好的方法欢迎评论

时间: 2024-10-24 03:28:35

绑定弹窗事件最好的方法,原生JS和JQuery方法的相关文章

简单的原生js 模拟jquery方法

仓促的模拟敲一下就上传来保存了. Object.prototype.fadeIn = function(speed) { var that = this; setTimeout(function() { that.style.display = "block" }, speed) return that; } //原生模拟jq中 fadeOut()方法: Object.prototype.fadeOut = function(speed) { var that = this; setT

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运

【JS】如何用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 总的来说,window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.   具体一些,可以从以下几方面对比它们的区别: 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行

原生JS添加节点方法与JQuery添加节点方法的比较及总结

一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div

原生js和Jquery操作DOM

原生javascript和jQuery操作DOM的对比总结 目录: DOM元素节点:1)文档节点:2)元素节点:3)属性节点:4)文本节点:5)注释节点 1)创建节点 2)选择(访问)节点 3)操作: 1)节点操作 1)添加节点 2)删除节点 3)修改内容: 1)文本[text] 2)html 3)表单val 4)改变事件 2)CSS操作 3)动画 下文转自:http://www.jb51.net/article/103583.htm 这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一

【第2章第300回】原生JS与jQuery对AJAX的实现

一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况

原生js仿jquery一些常用方法

原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.displa

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

【前端性能】必须要掌握的原生JS实现JQuery

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 1.原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内