Tag: jQuery

jQuery 的 Event 模块非常强大。其功能远远比原生事件监听器强大许多，对同一个元素的监听只用一个 eventListener, 内部则是一个强大的观察者，根据匹配事件类型触发相应回调。jQuery 不仅封装了兼容性差异，还提供了命名空间式注册注销事件，灵活的事件委托（事件代理），手动触发事件 trigger 以及自定义事件。因为 jQuery 提供的 bind,delegate,live（1.9 版本废除了）的功能都是通过 on 来适配的，所以这里只讲 on，off，trigger。 1. 注册事件 $.fn.on 方法 可以从源码看出前面都是针对其他高层 api 做的参数调整，最后都会调用 jQuery.event.add 这个方法来注册事件。 jQuery.event.add 方法： 该方法会先从 jQuery 的缓存中查找该元素是否有事件缓存了，确保一个元素只需要一个原生的 addEventListener/attachEvent。其实 jQuery.event.add 这个方法就是拼装元素事件所需数据，然后还存在缓存系统中，添加原生监听事件处理。在使用 jQuery 的方法注册事件的时候，我们来看一下 $.cache 中保存的对应的数据结构： 这是注册事件代码，注册了 click，命名空间式的 click.ns，dblclick 以及自定义的事件 custom： jQuery 缓存系统中对应的事件处理器数据结构： jQuery.event.add 就是组装上面的数据结构 2 是当前元素对应的缓存 id，该对象下一级有两个对象 events 和 handle，events 保存着事件处理器，handle 就是该元素对应的唯一一个原生事件监听处理程序的回调。 events…

实例 1 使用 HTTP POST 请求从服务器加载数据： 实例 2 使用 AJAX 的 POST 请求来改变 <div> 元素的文本： 定义和用法 $.post () 方法使用 HTTP POST 请求从服务器加载数据。 语法 URL 必需。规定将请求发送到哪个 URL。 data 可选。规定连同请求发送到服务器的数据。 function(data,status,xhr) 可选。规定当请求成功时运行的函数。额外的参数：data – 包含来自请求的结果数据status – 包含请求的状态（”success”、”notmodified”、”error”、”timeout”、”parsererror”）xhr – 包含 XMLHttpRequest 对象 dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型：”xml” – 一个 XML 文档”html” – HTML 作为纯文本”text” – 纯文本字符串”script” – 以 JavaScript 运行响应，并以纯文本返回”json” – 以 JSON 运行响应，并以…

在 jQuery 的 1.7 + 的版本之中，原来的 live 方法被去除了，那么怎么做到 live 方法的一样的绑定时间的效果呢？答案就是 on 方法，on 方法有怎么去使用呢？  on 给已经在 dom 中的元素绑定事件 jQuery 的文档里面已经给出示例了，先看看 on 方法的完整的形态： on(events,[selector],[data],fn) 参数：events,[selector],[data],fn)* events: 一个或多个用空格分隔的事件类型和可选的命名空间，如”click” 或”keydown.myPlugin” 。 selector: 一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的 <null 或省略，当它> 到达选定的元素，事件总是触发。 data: 当一个事件被触发时要传递 event.data 给事件处理函数。 fn: 该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回 false。 在 jQuery 的文档中的示例： 这个示例基本可以说明 on 方法的使用，但是示例并没有涉及到第二个参数 selector, 而第二个有一个非常好用的特点就是这里第二点 给动态添加的元素绑定事件。 on 给动态添加的元素绑定事件 其实，on 方法里面，第二个参数 selector 才是真实作为触发事件的对象，在参数的解释中就有说明。 而 jQuery 在绑定事件的时候，$(selector1).on () 的时候，如果 selector1 的元素还没有加载到 dom 中的时候，这段代码就会被忽略不执行，事件就不会绑定。这也就是说，如果我们省略 on…

调用 load 方法的完整格式是：load( url, [data], [callback] ), 其中  如何使用 data 加载一个 php 文件，该 php 文件不含传递参数  $(“#myID”).load(“test.php”); // 在 id 为 #myID 的元素里导入 test.php 运行后的结果 加载一个 php 文件，该 php 文件含有一个传递参数  $(“#myID”).load(“test.php”,{“name” : “Adam”}); // 导入的 php 文件含有一个传递参数，类似于：test.php?name=Adam 加载一个 php 文件，该 php 文件含有多个传递参数。注：参数间用逗号分隔  $(“#myID”).load(“test.php”,{“name” : “Adam” ，”site”:”61dh.com”}); // 导入的 php 文件含有一个传递参数，类似于：test.php?name=Adam&site=61dh.com 加载一个 php 文件，该 php 文件以数组作为传递参数  $(“#myID”).load(“test.php”,{‘myinfo[]’, [“Adam”, “61dh.com”]}); // 导入的…