绑定弹窗事件最好的方法,原生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';
}
}
有错误或者更好的方法欢迎评论
绑定弹窗事件最好的方法,原生JS和JQuery方法的更多相关文章
- onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
- JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- 原生js替换jQuery各种方法-中文版
原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- 原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级
一.js中new一个对象的过程 首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤: 1.创建一个新对象: var obj = {}; 2.设置新对象的const ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
随机推荐
- 主机在无线网络的情况下,设置centos7.2虚拟机网络联通
1.vmvare中,编辑-虚拟网络编辑器 2.虚拟机设置 3.进入linux登录后 输入nmtui 4激活连接 5大功告成,输入ping www.baidu.com 发现ping通了
- Python-多线程之消费者模式和GIL全局锁
一.生产者和消费者模式 什么是生产者消费者模式 生产者消费者模式是通过一个容器来解决生产者和消费者的强耦合问题.生产者和消费者彼此之间不直接通讯,而通过阻塞队列来进行通讯, 所以生产者生产完数据之后不 ...
- LibreOJ #6007. 「网络流 24 题」方格取数 最小割 最大点权独立集 最大流
#6007. 「网络流 24 题」方格取数 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据 题目描述 ...
- UI设计师需要熟记的45个快捷键Windows、Mac
大家都知道PS快捷键很多,其实没必要都记住,今天为大家整理了45个比较实用的,别忘了收藏. 图层 填充图层 MAC: Alt+Backspace (前景) or Cmd+Backspace (背景) ...
- 原创:Spring整合junit测试框架(简易教程 基于myeclipse,不需要麻烦的导包)
我用的是myeclipse 10,之前一直想要用junit来测试含有spring注解或动态注入的类方法,可是由于在网上找的相关的jar文件进行测试,老是报这样那样的错误,今天无意中发现myeclips ...
- PHP图片处理库Grafika详细教程
转载自51CTO 开发频道 1.图像基本处理:http://developer.51cto.com/art/201611/520928.htm 2.图像特效处理模块:http://developer. ...
- R及Rstudio 的使用建议
对于新人来说,进行R的学习时,通常会发现一般的教程都是让大家在交互环境下使用R. 但是这有一些缺点,比如在交换环境下,出现错误是难以撤销的,有的时候甚至需要重头做起.尤其是在Rstudio的交互环境下 ...
- base64编码是什么
首先明确一点base64 是一种编码格式.就想utf-8一样,能在电脑上表示所有字符,或者换句话说通过编码能让电脑理解你想要标识的字符(因为电脑只知道0和1 ) 就像ascII 中 0100 0001
- 基于centos6.5 hadoop 伪分布式安装
步骤1:修改IP 地址和主机名: vi /etc/sysconfig/network-scripts/ifcfg-eth0 如果该文件打开为空白文件代表你计算机上的网卡文件不是这个名称“ifcfg-e ...
- Android Makefile中是 如何识别 TARGET_PRODUCT 的
http://blog.csdn.net/stevenliyong/article/details/5285334 今天有时间小看一下Android 的Makefile, 终于稍有明白Android ...