jQuery里ready方法用原生js实现原理
function ready(fn){
if(document.addEventListener){
//标准浏览器
document.addEventListener('DOMContentLoaded',function(){
//注销事件,避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
//执行函数
fn();
},false);
}else if(document.attachEvent){
//IE浏览器
document.attachEvent('onreadystatechange',function(){
if(document.readyState=='complete'){
document.detachEvent('onreadystatechange',arguments.callee);
//执行函数
fn();
}
});
}
}
亲测有效!
jQuery里ready方法用原生js实现原理的更多相关文章
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- 绑定弹窗事件最好的方法,原生JS和JQuery方法
使用jQuery ui = { $close: $('.close') , $pop: $('.pop') , $topopBtn: $('.topop-btn') , $popbtnArea: $( ...
- jQuery的ready方法实现原理分析
jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺 ...
- Jquery的Ready方法加载为什么两次?
Ready方法会调用两次? 查看对应的页面是否存在<iframe src="#" --> 存在iframe加载这个页面的时候,页面就会加载两次. $(document) ...
- 生JS实现jQuery的ready方法呢?下面是其中之一的做法:
function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMConten ...
- HTML DOM对象的属性和方法介绍(原生JS方法)
HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...
- jQuery 事件 - ready() 方法
转载:http://www.w3school.com.cn/jquery/jquery_hide_show.asp 实例 在文档加载后激活函数: $(document).ready(function( ...
- Jquery揭秘系列:ajax原生js实现
讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求 ...
随机推荐
- SQLyog12.08详细安装教程
SQLyog安装教程 一.软件下载 为了更好的学习,我们需要可视化界面,而不仅仅是通过命令行黑窗口管理数据库.SQLyog 就是一个快速而简洁的图形化管理MYSQL数据库的工具. SQLyog12.0 ...
- centos7使用fdisk:创建和维护MBR分区表
1.在VMware选择要添加硬盘的虚拟机,添加一块硬盘. 这样就有两块硬盘 2.重启虚拟机. cd /dev #dev是设备目录,下面有很多很多设备,其中就包含硬盘 ll grep | sd #过滤s ...
- docker安装mysql/redis
1.安装mysql容器 #搜索mysql镜像 docker search mysql #拉取mysql镜像 docker pull docker.io/mysql #创建mysql容器,MYSQL_R ...
- textarea输入文字限制个数
说明: w-count固定为数字部分的class textarea-active为超出最大输入文字个数报错信息的class html 部分: <div class="wrap wrap ...
- Mac视频下载转换器MovieSherlock使用教程
MovieSherlock for Mac是什么软件?moviesherlock for Mac是运行在Mac平台上一款专业的视频下载转换工具,能快速的下载和转换YouTube电影,并保持原视频的质量 ...
- c#画图之雷达图
public JsonResult DrawRadar() { List<Color> colors = new List<Color>() { Color.FromArgb( ...
- JAVA面向对象 - 抽象类、接口
抽象类 用abstract关键字来修饰一个类时,这个类就叫抽象类,用abstract关键字来修饰一个方式时,这个方法就是抽象方法.当一个类继承的父类是抽象类的话,需要我们把抽象类中的所有抽象方法全部实 ...
- Spring cloud微服务安全实战 最新完整教程
课程资料获取链接:点击这里 采用流行的微服务架构开发,应用程序访问安全将会面临更多更复杂的挑战,尤其是开发者最关心的三大问题:认证授权.可用性.可视化.本课程从简单的API安全入手,过渡到复杂的微服务 ...
- js内置对象的常用属性和方法(Array | String | Date | Math)
js内置对象:Array String Math Date <!DOCTYPE html> <html lang="en"> <head> ...
- 剑指offer-面试题5-替换空格-字符串
/* 题目: 请实现一个函数,把字符串中的每个空格替换成'%20'. 例如输入“We are happy",则输出 ”We%20are%happy". */ /* 结题思路: 考虑 ...