jQuery事件处理（五）

jQuery事件处理了解一下

>>> JQuery 事件处理一.事件绑定方式 1.事件绑定的快捷方式: 缺点:绑定的事件,无法取消 $("button:eq(0)").dblclick(function(){ alert(123); }); 2.使用on进行事件绑定 ① 使用on进行单事件绑定 $("button:eq(0)").on("click",function(){ alert(123); }); $("button:eq(0)"…

[DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用 jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件处理器(event handlers). 当一个事件发生,提供的function就被执行,在方法里面,this代表当前的元素. 这些事件通常是由于用户和页面的交互而被激发,比如文字输入到表单元素,鼠标指针移动等.也有一些情况,比如页面load和unload的事件,是由浏览器本身来激发. 关于Even…

jQuery事件处理（四）

看了几天,决定整理一下jQuery事件处理的整体设计思路 1.通过add方法给选中的元素注册事件处理程序(通过缓存系统将事件储存到cache,而不是绑定到元素上) a.在存储之前,会为事件处理程序增加guid属性(jQuery里的唯一标识), b.先从cache中取出已经储存的以当前元素为桥梁的对象的events属性,如果没有就新建一个. c.再从cache中取出已经储存的以当前元素为桥梁的对象的handler属性(是一个方法),如果没有就新建一个. 备注:cache中存储的对象有两个属性:ev…

Unit02： jQuery事件处理、 jQuery动画

Unit02: jQuery事件处理 . jQuery动画 jQuery实现购物车案例 <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; wi…

jQuery事件处理（五）

对原生js不熟悉看jQuery会困难很多.后续需要更多的关注下原生js jQuery封装之后的事件触发,其中一个分支(处理普通事件)是通过:elem.addEventListener( type, eventHandle, false );来完成的. 通过这一句,为元素绑定一个事件监听器,并绑定eventHandler事件处理程序. 该事件监听程序内部调用dispatch方法处理并执行用户真正绑定到该元素上的所有事件处理程序. 相当于在所有的事件处理程序外围又包括了一个方法. 接下来看下disp…

从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.操作元素的宽和…

JQuery事件处理的注意事项

1.jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式. 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号. jQuery 使用名为 noConflict() 的方法来解决该问题. var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号. 2.由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery…

02-老马jQuery教程-jQuery事件处理

1. 绑定简单事件在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉. jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟DOM2级绑定事件的方式一样. 如果需要了解DOM的教程参考地址:https://chuanke.baidu.com/v5508922-239160-1771112.html 1.1 简单绑定click事件语法格式:click([[data],fn]) 参数: data 可以省略,给可传入到函数f…

jQuery事件处理（七）

1.自定义事件(用户手动trigger的一般都是自定义事件) trigger: function( event, data, elem, onlyHandlers ) { var i, cur, tmp, bubbleType, ontype, handle, special, // 如果没有传入elem(绑定到那个DOM元素上的事件),则默认为document eventPath = [ elem || document ], // core_hasOwn是hasOwnProperty的替代,…

jQuery事件处理（六）

1.通过一步步调试的的方法观察了一下存放到cache中的事件及其处理程序的数据格式: { events : { // 根据事件类型存放添加到该元素上的所有事件,下面以click为例 click : [ // click 事件类型.已数组的形式,按绑定的先后循序存放不同的事件处理函数相关内容(已对象的形式) { data : "", // 事件绑定时传入的data guid : 1, // jQuery分配的事件的id,用来查找对应的事件,以便…

jQuery事件处理（一）

1.jQuery事件绑定的用法: $( "elem" ).on( events, [selector], [data], handler ); events:事件名称,可以是自定义事件名称 selector:选择器 data:事件触发时传递给事件处理函数 handler:事件处理函数 2.on方法源码分析 on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var origFn, type; // 如果types是…

jQuery事件处理

浏览器的事件模型 DOM第0级事件模型 Event实例他的属性提供了关于当前正被处理的已触发事件的大量信息.这包括一些细节,比如在哪个元素上触发的事件.鼠标事件的坐标以及键盘事件中单击了哪个键. 事件冒泡当触发 dom 树中一个元素上的事件时,事件模型会检查这个元素是否已经创建了特定的事件处理器.如果是,就会调用已创建的事件处理器.然后,事件模型会检查目标元素的父元素,看其是否已经为此事件类型创建了处理器.如果是,就调用已创建的处理器,之后检查它的父元素,以及父元素的父元素,以此类推,直到…

Web前端基础(18):jQuery基础(五)

1. 事件前面我们介绍完js的事件流的概念之后,相信大家对事件流也有所了解了.那么接下来我们看一下jquery的事件操作. 在说jquery的每个事件之前,我们先来看一下事件对象 . 1.1 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 1.什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 2.事件通常与函数…

jQuery 第五章实例方法事件

.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ------------------------------------------------------------------------------------------ .on() 绑定事件的方法on, 相当于原生js 里的 addEventListener() 方法. 第一种参数, .on( events [, selecto…

锋利的JQuery（五）

jQuery与Ajax: load: load(url) $("#resText").load("test.html") 加载所有元素 load(url selector) $("#resText").load("test.html .para") 加载class为para的元素 load(url,callback) $("#resText").load("test.php&quo…

jQuery第五章

jQuery对表单.表格的操作以及更多应用一.表单应用 1.单行文本框应用 (1)获取和失去焦点改变样式 HTML代码如下: <form action="#" method="POST" id="regForm"> <fieldset> <legend>个人信息</legend> <div> <label for="username">名称:</l…

jQuery使用(五)：DOM操作之插入和删除元素

插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remove() detach() //css <style type="text/css"> .wrapper{ border: 1px solid black; width: 200px; padding: 10px; } .wrapper div{ width: 200px; he…

jQuery（五）

wrap <script> //wrap:包装 //wrapAll:整体包装 //wrapInner:内部包装 //unwrap:删除包装(删除父级,不包括body) $(function(){ //$('span').wrap('<div>');//给每一个span包装div //$('span').wrapAll('<div>');//全部span包在一个div里面 $('span').wrapInner('<div>');//每一个span内包装了一个…

jQuery事件处理（三）

继续了解jQuery对浏览器兼容的处理 1.keyHooks对键盘按键的封装 keyHooks: { // 一些键盘相关的属性 props: "char charCode key keyCode".split(" "), // 新的event对象和原生的event对象作为参数传入filter filter: function( event, original ) { // 如果event中没有which属性,新声明一个which属性并赋值 if ( event.wh…

JQuery --- 第五期 (JQuery节点操作)

学习笔记 1.JQuery添加节点相关方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery添加节点相关方法</title> <script src="../jquery-1.12.4.js"></script> <script> $(f…

JQuery学习五

获取样式attr("myclass")移除样式removeClass("myclass")增加样式addClass("myclass")toggleclass()如果有样式就移除,没有就添加radioButton取值$(":radio[name=v]:checked").val();radioButton设值$(":radio[name=v]").val(["value"]);check…

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选步骤分析: 第一步:引入jquery文件第二步:书写页面加载函数第三步:为上面的复选框绑定单击事件第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成复选框的全选和全不选</titl…

jQuery常用方法(五)

一.jQuery中常用方法相关方法参数说明:a.无参,获取值b.参数param,设置值c.参数function(index,oldVal){}回调函数[返回我们所要使用的新值] 回调函数的两个参数: 1.被选元素列表中当前元素的下标 2.原始(旧的)值 val([param]) [读取或修改元素value属性的值] html([param]) [读取和修改元素的HTML标签里面的内容] text([param]) [读取或修改元素的HTML中的纯文本内容…

jQuery 第五章实例方法详解内置队列queue() dequeue() 方法

.queue() .dequeue() .clearQueue() -------------------------------------------------------------------------- .queue() 往队列里面放东西参数: .queue([queueName], fuc(next)) queueName: 队列名,字符串形式, 默认是 fx fuc(next) : 可传函数, 等一系列值. 他会把你的值, 放到数组里面. (next) 如果你函数…

jQuery 第五章实例方法详解动画之animate()方法

.animate() .stop() .finish() ------------------------------------------------------------------------------ .animate() 参数:(target, duration, easing, callback) target: 到达的目标点, 例如{ width : '+=100', height: '+=100'} 选择器选中的元素的宽和高,加上100.值可以写数字 10…

jquery 第五章 jQuery操作表单与表格

1.回顾对象.bind("事件名称",function(){ // }) 阻止冒泡事件 return false, event stopProapagation() 模拟事件:自动执行,对象.trigger("事件名") 合成事件:对象.hover(function(){ // },function(){ // }) hide()/show() slideUp()/slideDown() fadeIn()/fadeOut() 对象.animate({属性1:值…

jquery 学习(五) - CSS 操作

HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background-color: aquamarine; margin: 0; } .a1{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 30px; background-color: darkgoldenrod; color: white;…

jQuery（五）：文本操作

text()可以获取或设置元素的文本内容.例如: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&q…

GIS-005-Dojo & jQuery 事件处理

1.添加事件 dojo.connect(dojo.byId("SelectRect"), "onclick", function () { //todo }); 2.input radio选择 var SelctedMethodType = $("input[name='MapTools']:checked").val(); $("input[type=radio][name=CurrentLayer][value=" + A…

从零开始学习jQuery (五) 事件与事件对象

本系列文章导航从零开始学习jQuery (五) 事件与事件对象一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性. 大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方,…

【jQuery事件处理（五）】的更多相关文章