jquery事件 | 易学教程

JQuery速成大法

阅读更多关于 JQuery速成大法

什么是 JQuery 呢，很多都是只闻其名。 jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。要用JQuery，首先要有一定的JS基础，否则根本看不懂这是个嘛玩意。有了JS基础后，就会发现，哇，JS好复杂，JQuery好简单粗暴下面就让我们来看一下如何来用JQuery 【Jquery语法】 1.通过jQuery("选择器").action();通过选择器调用事件函数。但JQuery中jQuery可以用$符代替，$("选择器").action(); ①选择器可以直接使用CSS选择器，选中元素 ②action表示对元素执行的操作 ps:各种选择器的用法可以自己去查帮助文档 2.文档就绪函数：防止了文档在完全加载(就绪)之前运行JQuery代码 $(document).ready(function(){ JQuery代码 }); $(function(){})//这是文档就绪函数简写方式PS 看到文档就绪函数，不免就会想到JS中的window.onload。这里我们来说一下它们俩的区别 ①

jQuery基础【1】

阅读更多关于 jQuery基础【1】

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：　　•HTML 元素选取　　　　　 •HTML 元素操作　　•CSS 操作　　　　　　　 •HTML 事件函数　　•JavaScript 特效和动画　　•HTML DOM 遍历和修改　　•AJAX　　　　　　　　　　•Utilities 1.向页面添加jQuery 库 1 <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 2 <%--使用 Google 的 CDN--%> 3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 4 /jquery/1.4.4/jquery.min.js"></script> 5 <%--使用 Microsoft 的 CDN--%> 6 <script type=

JQuery ----文档处理

阅读更多关于 JQuery ----文档处理

1.append(content|fn) 概述向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。 2.appendTo(content) 概述把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。 3.prepend(content) 概述向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。 4.prependTo(content) 概述把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。 5.after(content|fn) 概述在每个匹配的元素之后插入内容。 6.before(content|fn) 概述在每个匹配的元素之前插入内容。 7.insertAfter(content) 概述把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。 8.insertBefore(content) 概述把所有匹配的元素插入到另一个

Java进阶-3.jquery

阅读更多关于 Java进阶-3.jquery

一、jquery 将对原生js常见的方法和对象进行封装，方便使用。以前通过js获取对象的时候：var obj=document.getElementById("id"); 其实可以整合为一个函数，例如： funtion getId(id){ return document.getElementById("id"); } 1.jquery和html的整合 jquery是单独的js文件，通过script标签的src属性导入即可。例如： <script src="../js/jquery-1.11.0.min.js"></script> 2.获取一个jquery对象 $(" 选择器 ") 或者 jQuery(" 选择器 ") 3.dom和jquery的转换 dom 对象 ---->jquery 对象： $(dom 对象 ) //1.获取dom对象 var obj=document.getElementById("username"); //2.转化 var $user=$(obj); jquery 对象 --->dom 对象方式1：jquery对象[index]，因为jQuery可能是个数组方式2:：jquery对象.get(index) //1.获取jquery对象 var $u=$("#username2"); //2.转换 //2.1 方式1 var obj=$u.get

jQuery学习（1）猜数字游戏

阅读更多关于 jQuery学习（1）猜数字游戏

jQuery是一个快捷、小型且特征丰富的JavaScript库。它使得HTML文档遍历及操作，事件处理，动画，Ajax等更简洁方便。它通过调用一个简单易用的API，就能在各种浏览器中使用。由于jQuery本身很好的兼容性和延展性，它的出现改变了千百万使用者书写JavaScript的习惯。本次分享将会对jQuery的学习做一个简单的应用，那就是猜数字游戏。开始页面如下：我们有必要对该游戏的处理逻辑做一些简单的分析。首先，后台会随机产生一个1-100之间的整数。然后，用户在输入框中进行输入操作，当输入不是数字时，则弹出对话框并提示；如果输入的数字<1或者>100，则则弹出对话框并提示；如果输入的数字等于产生的随机数，则提出输入正确；若如果输入的数字小于产生的随机数，则提出输入的数字过小；若如果输入的数字小于产生的随机数，则提出输入的数字过小。完整的jQuery代码如下： <!DOCTYPE html> <html> <head> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function(){ var correctNumber = Math.floor(Math.random()*100)+1; var result = ""; $("button").click

jQuery .click() 与 .on('click') 的区别

阅读更多关于 jQuery .click() 与 .on('click') 的区别

两个方法都是点击事件，但有什么区别呢？ $(selector).click() : 处理静态的DOM元素，HTML加载后的页面元素。 $(selector).on('click') : 处理动态的DOM元素，页面加载后动态添加的元素。其他 dblclick 、事件也是一样的原理。来源： CSDN 作者： ericpeng2014 链接： https://blog.csdn.net/Ericpengjun/article/details/103697410

【js杂记】js、jquery实战杂记 1

阅读更多关于【js杂记】js、jquery实战杂记 1

1、jquery中event.originalEvent属性该方法的作用是指向原始的事件对象 2、JS滚轮事件(mousewheel/DOMMouseScroll) IE、Chrome：mousewheel FireFox：DOMMouseScroll IE、Chrome：event.wheelDelta（向下滚动为负值） FireFox：event.detail（向下滚动为正值） $(document).bind({ // Mouse Scroll // IE、Chrome：mousewheel // FireFox：DOMMouseScroll 'mousewheel DOMMouseScroll' : function(e) { var delta = e.originalEvent.wheelDelta || - e.originalEvent.detail, time = new Date().getTime(); if(time - scroll_screen.lastTime < 1000) { return; } scroll_screen.move(delta); //if( delta < 0 ){ // next scroll_screen.lastTime = time; } }); 3、jquery右键事件 contextmenu 4、监听输入框

深入理解-事件委托

阅读更多关于深入理解-事件委托

深入理解-事件委托 2016-11-20 15:02 javascript 、 web开发综合、性能优化 JS性能优化、事件冒泡、事件委托、事件委托优化、事件委托导致性能损失 65 views 很多人是在使用事件委托的，那对于一个使用者来说，只要能正确的使用好事件委托，完成工作，就算可以了，那么你有认真的考虑过事件委托的原理，以及你的使用场景是否适合使用事件委托呢，如果需要使用事件委托，那么你是否有正确的使用呢？这里我想简单的说一下我对事件委托的理解，希望可以有机会多多交流。概述事件委托有哪些好处，才会被现在人们大量的使用呢？那么就得先说说事件的一些性能和使用的问题： 1：绑定事件越多，浏览器内存占用越大，严重影响性能。 2： ajax 的出现，局部刷新的盛行，导致每次加载完，都要重新绑定事件 3：部分浏览器移除元素时，绑定的事件并没有被及时移除，导致的内存泄漏，严重影响性能 4：大部分 ajax 局部刷新的，只是显示的数据，而操作却是大部分相同的，重复绑定，会导致代码的耦合性过大，严重影响后期的维护。这些个限制，都是直接给元素事件绑定带来的问题，所以经过了一些前辈的总结试验，也就有了事件委托这个解决方案。我们本篇将要说的是，事件委托。事件委托的基础如果我们相对一个技术点了解的更深，用的更好，那么我们就需要对这个技术点的原理有更多的了解

jquery源码分析

阅读更多关于 jquery源码分析

作者：zuoxiaolong8810（左潇龙），转载请注明出处，特别说明：本博文来自博主原博客，为保证新博客中博文的完整性，特复制到此留存，如需转载请注明新博客地址即可。前段时间上班无聊之时，研究了下jquery的源码。现在记录下自己的成果，分享一下。下面是我自己琢磨和编写的jquery模型，里面有我所写的注释。 /* * my-jquery-1.0 */ /* * 网上也有很多实现的版本，不过这是我在我自己的理解下写的，加上注释，希望可以解释清楚。 */ /* * 整个jquery包含在一个匿名函数中，专业点叫闭包，就是下面的形式，如(function(window,undefined){}(window))。 * 闭包的定义在这里不太容易讲清楚，我只说下这样说的好处。 * 1.使整个jquery中定义的变量成为局域变量，不会影响全局变量，个人觉得这也是jquery被成为轻量级的原因之一。 * 2.增加jquery运行速度，因为局域变量运行速度高于全局变量。 * 3.就像你看到，传入的window和undefined，可以自定义名字，方便编写。当然，现在你看到的仍是原来的写法，但是你可以看看jquery的min版本，一定是压缩的。 */ (function( window, undefined ) { var /*jquery的定义，我们平时用的$和jQuery就是它

浅谈移动前端的最佳实践

阅读更多关于浅谈移动前端的最佳实践

前言这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距：这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用文中有误请您提出，以免误人自误技术选型单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点： ① 用户体验好 ② 可以更好的降低服务器压力但是单页有几个致命的缺点： ① SEO支持不好，往往需要单独写程序处理SEO问题 ② webapp本身的内存管理难，Javascript、Css非常容易互相影响当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是： webapp模式门槛较高，很容易玩坏其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。 webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架

订阅 jquery事件