现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。 JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...一、jQuery中的事件 1、加载DOM: 执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...bind()方法的调用格式为: bind(type, [data], fn); 其中type是事件类型,包括:click,keypress,load,submit,dblclick,keydown,...第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。 ...接上篇jQuery:详解jQuery中的事件(一) 3、合成事件 jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法...*这里要注意的一点是,jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"... 上面代码中,当单击element元素时,事件对象就被创建了。...因此可以看出unbind()方法的语法结构: unbind([type], [data]); 其中,第一个参数是事件类型,第二个参数是将要移除的函数。
; console.log( $div.data() ); console.log( $.data( $div.get(0) ) ); data 方法的定义是: 这里只从 jQuery 的源码分析入手,...版本是3.2.1 1. $.data() 方法 data: function( elem, name, data ) { return dataUser.access( elem, name, data...value : key; }, 可以看到,$.data(ele) 只会去读取dataUser 结构中存在的数据,而不会去读dom 节点上的 Data 属性相关值。...属性中获得的。...除此之外,它还会 在 dataUser 的 Cache 中存入此次读出来的 data 数据。所以,第三句打印出来的也应该是{x:'x-value'}。
最近遇到一个诡异的问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续的流程中,无故丢失了。但是,我不知道它是什么时候丢失的。 所以我需要要一步步逼近定位到问题。...还好,我们都是用的jQuery,用的$.on()。 而jQuery自身事件绑定,额外添加了一层事件数组。...: 获取HTMElement元素上面的事件绑定 JavaScript $(HTMLElement).data('events') 1 $(HTMLElement).data('events') 然后...,就会返回这个元素上面绑定的所有事件。...jQuery.data(‘events’)
$.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别: $.attr()每次都从DOM元素中取属性的值。...$.attr(‘data-xxx’, ‘xxxxx’)会将字符串’xxxx’塞到标签的’data-xxx’属性中。...$.data(‘xxx’)是从 Jquery对象中取值,由于对象属性值保存在内存中,因此可能和视图里的属性值不一致的情况。...$.data(‘xxx’, ‘xxxx’)会将字符串’xxxx’塞到 Jquery对象 的’xxx’属性中,而不是塞到视图标签的data-xxx属性中。...所以$.attr()和$.data()应避免混合用 通过$.attr()来进行set属性,然后通过$.data()进行get属性值; 通过$.data()来进行set属性,然后通过$.attr()进行get
jquery_shijian_function.html... jquery.js">
e.target == $("#id/.class")[0]) { //函数体 } }); }); target 属性规定哪个 DOM 元素触发了该事件
触发焦点: $(“Element”).focus() 触发每一个匹配元素获得焦点事件。...$(“Element”).focus(function) 事件会在获得焦点的时候触发,既可以是鼠标行为,也可以是按tab键导航触发的行为,并且绑定一个处理方法。...失去焦点: $(“Element”).blur() 触发每一个匹配元素失去焦点事件。...$(“Element”).blur(function) 事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的行为,并且绑定一个处理方法。
加载Dom两种方式 1.1.1. window.onload方式 1.1.2. jQuery方式 1.1.3...事件传播(事件冒泡) 1.4.1. 传播:小---->中---->大 1.4.2...."); // }) // $(function() { // console.info("jQuery2"); // }) // $(function() { //...console.info("jQuery3"); // }) $(document).ready(function(){ // console.info("全拼写法"); /...小-中-大 $("body").click(function(){ console.info("body被点击了"); return false; })
(1)如果在HTML文档中设置的data-自定义属性的单个字符串的名称的属性中若有大写值,在js文件中获取时只能用小写的形式获取。...如: HTML中data-Role,获取当时为$(node).data(“role”); (2)如果在HTML中设置data-role和data-Role是一样的,html属性不区分大小写。... jquery-1.11.3.js”> $...最后讲一下data()和attr()的区别: (1) 是否需要传参: data() 可以不传入参数,这使获得的是一个js对象,就算你在html中没有设置任何data自定义属性时,获得的也是一个对象。...(4)data-attribute属性会在页面初始化的时候放到jQuery对象中,被缓存起来,而attr方法却不会。
//以下内容是jQuery中的一部分(仅供参考) 事件 加载Dom两种方式 加载事件我们有两种方式,一种就是javascript直接写:window.onload来加载。...还有一种就是我们的jQuery中的加载方式$(function(){}) window.onload方式 window.onload:在整个月面中所有内容加载完成后,才会执行事件。...在jQuery类库的不同版本中效果可能不太一样(1.0、2.0、3.0),和浏览器也有关系 案例1:测试两种方式的区别【个数+顺序】 区别1:顺序,上面我们已经测试了,理论上先执行jQuery方式...事件传播(事件冒泡) 传播:小---->中---->大 事件传播,什么是事件传播呢?...因为p是在div中,属于div的一部分。
问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突。...问题解决办法: 方法1、两者实现都能够实现页面的无刷新效果,所以可以保留其中的一种即可; 方法2、如果必须要两者混合应用,那么在用jQuery绑定事件是就要注意一些了 我们平时在jQuery中绑定事件最常用的方式有以下三种...所以针对上面问题,只需要在绑定事件的时候使用target.live("click",function(){})方式即可(jQuery版本必须是在1.4及其以上) 下面简单说明一下jQuery通过bind...事件 (4)执行由live绑定的click事件 (5)检测绑定事件的对象是否存在,判断是否需要继续执行绑定的事件。...下面是一个简单的例子: jquery-1.7.1.js" type="text
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. ...每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮...,点击事件会失效。 ...其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。...解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 方法一:使用live live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。
在jQuery中有一个hover()方法,它可以实现模拟css中:hover这个伪类的效果。...搜索官方jQuery文档中hover()方法的说明我们就会发现,其实这是jQuery中hover()内置方法的问题。...但是,当触及到跟时间有关的一些动画效果(例如:jQuery中的animate()函数)的时候, 就会出现问题。...很简单,我们在hover事件中写入两个function函数就好了,其中第一个是我们要让它在移入的时候执行的效果, 第二个是让它在移出的时候执行的效果。...}) 当然,像这些效果的话,其实也有很多别的方法可以完成的, 比如我们也可以使用jQuery中的一些其他鼠标事件(例如:onmouseover、onmouseout、onmouseenter
not() 从匹配元素集合中删除元素。...从包含所有段落的集合中删除 id 为 "selected" 的段落: $("p").not("#selected") is() 方法用于查看选择的元素是否匹配选择器。...jq中的很多操作都是异步的,代码的顺序不代表操作的执行顺序。要求严格的话,需要通过指定操作的时间来控制执行顺序。...jq使用群组选择器进行事件监听时,可在事件的回调函数内使用this代表群组选择器选中的元素中触发事件的元素。 淡出、淡入的效果相当于延时版的显示和隐藏。 ...data = JSON.parse(data); if (data.code !
jquery中的ajax方法参数总是记不住,这里记录一下。 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。...注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 json:返回JSON数据。 jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?...提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 ...提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 ...表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
前言 使用append新增的div元素,绑定click事件无效的几种解决办法 遇到问题 绑定select下拉框click事件 // 绑定select下拉框click事件...}) 新增的div上点击事件没监听到 主要原因是事件是在 dom 加载的时候就已经完成了,新增的 div 元素 click 事件就无效了。...最简单的方法就是直接在标签中写onclick=””, 这种是简单粗暴的解决办法,但一般不这样写。...}) 看到网上很多都是用的live方法,但是会报错:TypeError: $(…).live is not a function 主要原因是jquery中的live()方法在jquery1.9...及以上的版本中已被废弃了,受版本限制,大于1.9版本就用不了。
另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。...当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。...jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?"...这个方法有两个参数:服务器返回数据,返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc...我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
主要是参考整理JQuery的文档和一些好博客内容!记录一下平常工作最常用的!...它的工作原理是在GET请求参数中附加”_={timestamp}”(详见ajax防止缓存)。该参数不是其他请求所必须的,除了在IE8中,当一个POST请求一个已经用GET请求过的URL。...注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 json:返回JSON数据。 jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?...这是一个Ajax事件 。...这个回调函数得到2个参数: jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串(“success”, “notmodified”, “nocontent