jquery事件 | 易学教程

jQuery 语法

阅读更多关于 jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。 jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action() 美元符号定义 jQuery 选择符（selector）“查询"和"查找” HTML 元素 jQuery 的 action() 执行对元素的操作实例: $(this).hide() - 隐藏当前元素 $(“p”).hide() - 隐藏所有元素 $(“p.test”).hide() - 隐藏所有 class=“test” 的元素 $("#test").hide() - 隐藏所有 id=“test” 的元素文档就绪事件您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $ ( document ) . ready ( function ( ) { // 开始写 jQuery 代码... } ) ; 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：试图隐藏一个不存在的元素获得未完全加载的图像的大小提示：简洁写法

jQuery之防止冒泡事件

阅读更多关于 jQuery之防止冒泡事件

jQuery之防止冒泡事件冒泡事件就是点击子节点，会向上触发父节点。祖先节点的点击事件。以下是html代码部分： <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> 相应的jQuery代码例如以下： <script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息 $('#msg').html(txt);// 设置html信息 }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p

前端基础之jquery

阅读更多关于前端基础之jquery

知识预览一 jquery是什么？二什么是jquery对象三寻找元素（选择器和筛选器）四操作元素（属性，CSS，文档处理）扩展方法（插件机制）实例练习一 jquery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二什么是jquery对象？ jquery对象是通过jquery包装DOM对象后产生的对象。jquery对象是jquery独有的，如果一个对象是jquery对象，那么他就可以使用jquery里的方法$("#test").html(); $("#test").html() 意思是：获取ID为test的元素内的HTML代码。其中HTML

jQuery中的bind(), live(), on(), delegate()

阅读更多关于 jQuery中的bind(), live(), on(), delegate()

当我们试图绑定一些事件到DOM元素上的时候，我相信上面这4个方法是最常用的。而它们之间到底有什么不同呢？在什么场合下用什么方法是最有效的呢? 准备知识：当我们在开始的时候，有些知识是必须具备的： DOM树下图仅仅是一个示例，这是一个在browser环境下的一棵模拟DOM树，在下面的代码中仅起到演示的作用： Event bubbling (aka event propagation)冒泡我们的页面可以理解为一棵DOM树，当我们在叶子结点上做什么事情的时候（如click一个a元素），如果我们不人为的设置stopPropagation(Moder Browser), cancelBubble(IE)，那么它的所有父元素，祖宗元素都会受之影响，它们上面绑定的事件也会产生作用。看一个示例： $('a').bind('click', function() { alert("That tickles!") }); 当我们在a 上面点击的时候，首先会触发它本身所绑定的click事件，然后会一路往上，触发它的父元素，祖先元素上所有绑定的click事件，就像下图演示的那样。示例HTML 为了对下面的代码进行演示，添加一些HTML代码： <ul id="members" data-role="listview" data-filter="true"> <!-- ... more list

jQuery事件绑定on()、bind()与delegate() 方法详解

阅读更多关于 jQuery事件绑定on()、bind()与delegate() 方法详解

jquery中有四种事件绑定函数，bind()，live()，on()，delegate(),由于live现在并不常用，因此不做过多解释。 1. bind()用法 $("div p").bind("click",function(){ alert("点击"); });同：$("div p").click(function(){ alert("点击");}); 这里为div绑定了click事件，相应为弹出内容，绑定简单快捷，但是存在两个问题：1；用了隐式迭代方法，如果匹配的元素特别多，例如div中有多个p标签，方法就绑定多次，影响性能。2；对于尚未存在的元素无法绑定，点击页面上的按钮，将动态添加一个p元素，点击这个p元素会发现动作没有响应。用delegate方法可以解决以上问题。2.delegate()用法 $("div").delegate("p", "click", function () { alert($(this).text()); }); 这种方式采用了事件委托概念，不直接为p元素绑定事件而是为其父元素（或者祖先元素也可）绑定事件，当在div内点击任意元素时，事件一层层根据event target向上冒泡，直到到达绑定事件的元素，在冒泡过程中，如果事件的currentTarget与选择器匹配，就会执行代码。这样就解决了bind（）的问题，不用再一个个为p元素绑定事件

jQuery事件绑定on()、bind()与delegate() 方法详解

阅读更多关于 jQuery事件绑定on()、bind()与delegate() 方法详解

文章转载： http://www.jb51.net/article/67166.htm 啃了一段日子的js相关了，学的过程中发现在jQuery中绑定事件时，有人用bind()，有人用on()，有人用delegate()，还有人用live()，看代码的时候觉得都实现功能了也就掀过去了，只是一直没完全弄懂之间的区别，于是今天查了下资料，自己做个总结。之所以有这么多类型的绑定方法，是因为jQuery的版本更新的原因，如on()方法就是1.7以后出现的。 jQuery的事件绑定api页面上，提到live()方法已经过时，不建议使用。所以这里我们主要就看下以下三个方法：bind()、delegate()、on() 我们准备一个html页面，用于各种类型事件绑定的测试。 <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一个p元素</p> <p>第二个p元素</p> <p>第三个p元素</p> <p>第四个p元素</p> <p>第五个p元素</p> <

jquery中的ajax方法(备忘)

阅读更多关于 jquery中的ajax方法(备忘)

参考： https://www.cnblogs.com/tylerdonet/p/3520862.html w3school: http://www.w3school.com.cn/jquery/ajax_ajax.asp 1.url : 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type : 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout : 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 4.async : 表示请求是否异步处理要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 5.cache : 表示浏览器是否缓存被请求页面要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。 6.data : 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式

解密jQuery事件核心 - 委托设计（二）

阅读更多关于解密jQuery事件核心 - 委托设计（二）

第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息：事件信息都存储在数据缓存中对于没有特殊事件特有监听方法和普通事件都用addEventListener来添加事件了。而又特有监听方法的特殊事件，则用了另一种方式来添加事件。本章分析的重点：通过addEventListener触发事件后，回调句柄如何处理？具体来说就是，如何委派事件的，用到哪些机制，我们如果用到项目上是否能借鉴？涉及的处理：事件句柄的读取与处理事件对象的兼容，jQuery采取什么方式处理？委托关系的处理 jQuery引入的处理方案 jQuery.event.fix(event)：将原生的事件对象 event 修正为一个可以读读写event 对象，并对该 event 的属性以及方法统一接口。 jQuery.Event(event，props)：构造函数创建可读写的 jQuery事件对象 event，该对象即可以是原生事件对象 event 的增强版，也可以是用户自定义事件 jQuery.event.handlers：用来区分原生与委托事件能学到的思路缓存的分离适配器模式的运用事件兼容性的封装委托的设计事件的绑定执行顺序结构 <div id='p1' style="width: 500px;height:

深圳Web前端学习：前端前沿技术精选|千锋《JavaScript全套资料》免费领

阅读更多关于深圳Web前端学习：前端前沿技术精选|千锋《JavaScript全套资料》免费领

深圳Web前端学习：前端前沿技术精选|千锋《JavaScript全套资料》免费领当下，随着5G商用脚步的靠近，很多传统的前端工程师并不能满足时下企业用人需求了，越来越多的开发模式以及前端框架不断的涌现出来，这也就要求程序员需要不断去自我增值。前端要学习的东西很多，对于自学的小伙伴来说，除了入门基础，最大的难处在于进阶，进阶需要的课程要求更高，系统全面是关键所在。今天小千就为大家准备了千锋出品的《JavaScript全套视频~全套资料》精选资源！助力想要进阶的小伙伴一臂之力！本次完全免费放送！后续小千还会不定期为大家分享一些精品视频教程，请大家随时关注！课程介绍 2019千锋《JavaScript全套视频~全套资料》，主要讲解Javascript基础知识以及高级进阶知识。课程亮点对于已经有一定前端基础，想要进阶的人群来说，通过本课程可以进一步掌握Javascript日常开发，能够实现所有常见特效及数据交互动作。 JavaScript全套视频~全套资料课程目录第001集 Javascript基础(1) 第002集 Javascript基础(2) 第003集 Javascript常用方法第004集数据类型String、Number、Boolean、undefined 第005集数据类型Object 第006集聊聊js大纲第007集堆栈详解第008集

Jquery中ajax基本语法

阅读更多关于 Jquery中ajax基本语法

一.$.ajax的基本使用结构 var response = $.ajax({ type: "POST", url: "/index.php?m=content&c=index&a=getList", data: { "page" : currentPage, "pTime":new Date().getTime() }, dataType: "json", beforeSend:function(){ //发送时的代码提示 }, success: function(data){ //成功时的代码提示 }, complete:function(){ //完成时的代码提示 }, error: function (msg){ //报错时的代码提示 }, async: true }); 二.$.post的基本使用结构 var data = { 'page':page, 'pagesize':pagesize, 'type': type } $.post( '/index.php?m=content&c=index&a=index', data, function(data){ console.log(data); }, 'json' ); 三.$.ajax的onready事件 $(function(){ //加载事件 }); $(document).ready(function(){ /

订阅 jquery事件