原生js实现jquery库中部分事件的功能（jquery库封装二）

继续昨天的封装,今天的部分继昨天选择器之后实现了css样式的获取和添加,attr的获取和添加和一部分事件的封装:只是我自己的理解,不妥之处欢迎大家在评论中提出,相互学习,共同提高 /** * Created by Jason on 2016/12/31. */ //jquery 的构造函数 function Jquery(arg){ //用来存选出来的元素 this.elemenets=[]; switch(typeof arg){ case 'function' : domReady(arg)…

jquery ajax 中各个事件执行顺序

jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.error 7.ajaxError (全局事件) 8.complete 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件) 下面看个例子: $("#ACCOUNT_TYPE").bind('click', function() { //alert( $(…

原生js监听input值改变事件

哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http://www.cnblogs.com/wteng/p/5434403.html $('input').bind('input propertychange', function() { //to do }) 现在用原生js来实现一遍(其实我翻了下jquery的监听事件on的源码,没找到不知道他写哪了),本…

ActiveX（二）Js 监听 ActiveX中的事件

在上一篇随笔:ActiveX(一)第一个简单的Demo 中,已经可以实现 js 单向调用 ActiveX 中的方法,在很多情况下ActiveX中的方法的执行时相对耗时.耗性能的.在这样的情况下.ActiveX的方法执行会使用异步策略,那么方法异步时,js又如何获取异步执行结果呢?方案无非两种,一种是轮训.一种是Notify. 如果是Notify,Js如何监听其事件呢? 这将是本篇随笔接下来的重点: 继续上一个Demo,假设,技术需求如下:当按回车时.ActiveX将密码框中的密码主动推给Js (…

js实例分析JavaScript中的事件委托和事件绑定

我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处理的时候.但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止.对于我这个比较好奇的人来说,实在很蛋疼.尤其是想更多的了解“事件委托”的时候. 这次干脆一劳永逸,自己把查出来的资料整理成一篇日志,总结这块的知识,也方便需要的朋友查阅. JavaScript中事件传播过程那些事儿…

jquery ajax中各个事件执行顺序如下

$(function(){ setTimeout(function(){ $.ajax({ url:'/php/selectStudent.php', }); },0); $(document).ajaxSuccess(function(){ console.log('success'); }) .ajaxStart(function(){ console.log('start') }) .ajaxSend(function(){ console.log('send') }) .ajaxComp…

【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例敲结果并不会执行. 在查阅资料后,发现原来在jquery1.9+版本以后,ajax全局事件需绑定到document对象上才能触发. 下面是各版本不同写法: <html> <head> <meta charset="utf-8"> <style>…

原生js给同一对象绑定多个事件

事件监听 var son = document.querySelector(".son"); son.addEventListener('click', once1); function once1() { alert(1) } son.addEventListener('click', once2); function once2() { alert(2) }…

jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值

写html时这样绑定 <input type="text" name="address4" id="address4" onFocus="open1(this);"> 函数则加一个对象 function open1(ob) { var id=$(ob).attr("id"); alert(id); } 如果是超链接,这样写是无效的,获取不到id <a href="javascri…

js_原生js实现上拉加载更多的功能。

1.人生啊,是我莽撞了啊.这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好. 2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很多弯路,对于我们在度娘上找到的一些方法,我们把它用到项目中的时候,也要把它弄懂, 只有自己弄懂了,才会实打实的沉淀下来,变成属于自己的东西.一个人对于一个问题的态度,终将把你变成那样的人.愿你对一个问题有一种把它切底弄懂的情怀.时间那么浅,别太把它用来打王者农药了,那段位的荣耀在生活中,终是不能成…

原生JS实现购物车全选多选按钮功能

对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style> <body> <table>…

原生JS实现图片上传并预览功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

jQuery中的事件机制深入浅出

昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中…

标签页（tab）切换的原生js,jquery和bootstrap实现

概述这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容标签页(tab)切换的原生js实现标签页(tab)切换的jquery实现标签页(tab)切换的bootstrap实现 js实现说明: 代码是我自己写的,与课程中的不一样. 主要利用display:none来把部分内容隐藏而显示其它内容. 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的. 代码: <!DOCTYPE html>…

原生js与jquery加载页面元素比较

原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascript"> window.onload = function(){ ...... }; </script> jquery:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快. <…

jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

第4章 jQuery中的事件和动画 jQuery中的事件加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function(){ // 编写代码... }); $(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行,可能此时DOM元素关联的东西(比如图片)并没有加载完. $(document).ready()方法能同时编写多个,每次调用$(document).ready()方法都…

原生JS与jQuery操作DOM对比

一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("Hel…

原生JS和jQuery操作DOM的区别小结

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比一.创建元素节点 1.1 原生JS创建元素/文本节点 document.createElement("p"); 1.2 jQuery创建元素/文本节点 $('<p>…

放弃jQuery，使用原生js吧！

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx…

原生js，jquery通过ajax获得后台json数据动态新增页面元素

一.原生js通过ajax获取json数据因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ try{ XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //在IE创建较高版本的ajax对象 } catch(e){ try{ XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP&…

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不…

jQuery源码解读-事件分析

最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventListener(event, function, useCapture) event:事件名,例如“click”,这里要提醒的一点是不要加前缀“on”; function:事件触发时执行的函数; userCapture:默认为false,表示event事件在冒泡阶段触发.如果设置为true,则…

[转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得…

详细解读-this-关键字在全局、函数、对象、jQuery等中的基础用法！

一.前言 1. Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其中this “指针”就是实现面向对象的一个很重要的特性.但是this也是Javascript中一个非常容易理解错,进而用错的特性. 2.this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象. 二.进入正题 1.全局代码中的——this 1. 浏览器宿主的全局环境…

原生js基础问题的一些备忘

1.在原生js里面 window.onload=function(){} 这个就相当于jquery中 $(document).ready(function(){}); 这样 2.getElementById的用法: 示例 var chat1=document.getElementById("wen"); (后面的ID不能加上# 需要加引号,这与jquery不同) 3.获取属性的方法就是先获取对象然后 .属性 ,不再赘述 4.innerHtml: innerHTML…

OpenLayers2中的事件_以Popup为例

SATURDAY, 21 MARCH 1-Preface 前几天阅读学习了OpenLayers'Cookbook中的第四章——Working with events. 从AFDS系统的开发项目进行至今,大部分时间都花费在了一些简单的关系数据查询实现以及网页设计与改版上,真正应用到地图部分的核心业务设计几乎还没有起步.目前系统仅仅只实现了基于OpenLayers和Geoserver的地图数据展示,简单要素的获取,基础要素的样式整饰.用户与地图部分的交互基本没有设计,所以,希望通过学习OpenLa…

javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会…