JQuery扩展和事件

一、jQuery事件

常用事件
   blur([[data],fn])   失去焦点
   focus([[data],fn])  获取焦点( 搜索框例子)
   change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
   click([[data],fn])  点击
   dblclick([[data],fn]) 双击
   scroll([[data],fn])   滚动
   submit([[data],fn])   提交

不常用事件
   error([[data],fn])
   focusin([data],fn)
   focusout([data],fn)
   keydown([[data],fn])   按下
   keypress([[data],fn])  按键
   keyup([[data],fn])     键松开
   mousedown([[data],fn]) 鼠标按下
   mouseenter([[data],fn])  鼠标移进去
   mouseleave([[data],fn])  鼠标离开:只有鼠标离开被选元素的时候,才会触发mouseleave事件
   mousemove([[data],fn])   鼠标移动
   mouseout([[data],fn])    鼠标离开:无论鼠标离开被选元素还是任何子元素,都会触发mouseout事件
   mouseover([[data],fn]    鼠标悬停
   mouseup([[data],fn])     鼠标弹起
   resize([[data],fn])  元素窗口发生变化
   select([[data],fn])
   unload([[data],fn])
   补充:
      文档树加载完之后绑定事件(绝大多数情况下)
      第一种:吧script放在后面。
      第二种:
      $(document).ready(function(){
         // 绑定事件的代码
         ....
      })

      简写:
      $(function($){
         // 绑定事件的代码
         ....
      });

二、jQuery扩展(很重要!!)

1、jQuery扩展语法

把扩展的内容就可以写到xxxx.js文件了,在主文件中直接导入就行了。

用法1、$.xxx()
   $.extend({
      "GDP": function () {
         console.log("戴小红花");
      }
   });
   - 给jQuery添加扩展
   - $.GDP()

用法2、$("").xxx()
   $.fn.extend({
      "BJG": function () {
         console.log("英语八级就是好!");
      }
   })
   - 给jQuery对象添加扩展
   - $(":input").BJG()

三、表格的添加 | 删除 | 编辑示例

第一种:点击编辑没有模态框,是input框编辑修改
第二种:点击编辑有模态框

补充:

- .data()
- .data("key", value) 保存值,value可以是字符串,也可以是数组,也可以是jquery对象
- .data("key") 获取值(没有值就返回undefined)
- .removeData() 删除所有

- .removeData("key") 删除key对应的value

原文地址:https://www.cnblogs.com/xiao-xue-di/p/9607354.html

时间: 2024-10-01 20:50:24

JQuery扩展和事件的相关文章

jQuery之jQuery扩展和事件

jQuery之jQuery扩展和事件 一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn]) 双击 scroll([[data],fn]) 滚动 submit([[data],fn]) 提交 不常用事件

web前端【第十三篇】jQuery扩展和事件

一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn]) 双击 scroll([[data],fn]) 滚动 submit([[data],fn]) 提交 不常用事件 error([[data],fn])

全端之jQuery扩展和事件

一.jQuery事件 常用事件 blur([[data],fn])   失去焦点 focus([[data],fn])  获取焦点( 搜索框例子) change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn])  点击 dblclick([[data],fn]) 双击 scroll([[data],fn])   滚动 submit([[data],fn])   提交 不常用事件 error([[da

自定义jQuery扩展

项目中js往往会有些比较常用的函数,这时就可以把这些函数封装到一起.如果项目使用jQuery则可以封装成jQuery的扩展.jQuery扩展一般有两种方式,一种是对jQuery本身的扩展,一种是jQuery对象的扩展. jQuery本身的扩展即把函数封装在jQuery名称空间下,通过jQuery.funcName的形式调用.如:jQuery.ajax({param1:value1,param2,value2[,...]}); jQuery对象的扩展,即扩展到jQuery查找到DOM后的对象下,通

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

jQuery:详解jQuery中的事件(一)

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代码,但是自觉还差的好远,跟好多大神(比如阮一峰)的理解还是有很大差距.现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生

jQuery的常用事件

1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序

Jquery 扩展方法实现原理

JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据. 其实现细节是使用 Script标签携带一个Callback函数,动态的向服务端请求数据. 如:  <script type="text/javascript"&g

jQuery完整的事件委托(on())

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery完整的事件委托(on())</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> &l