jQuery基础教程详解的目录

Posted 2023-05-09

参考技术A

第1章　jquery入门
1 1　jquery能做什么
1 2　jquery为什么如此出色
1 3　第一个jquery文档
1 3 1　下载jquery
1 3 2　设置html文档
1 3 3　编写jquery代码
1 4　小结
第2章　选择符——取得你想要的一切
2 1　dom
2 2　工厂函数$（）
2 3　css选择符
2 4　xpath选择符
2 5　自定义选择符
2 6　dom遍历方法
2 7　访问dom元素
2 8　小结
第3章　事件——扣动扳机
3 1　在页面加载后执行任务
3 1 1　代码执行的时机选择
3 1 2　基于一个页面执行多个脚本
3 1 3　缩短代码的简写方式
3 2　简单的事件
3 2 1　简单的样式转换器
3 2 2　简写的事件
3 3　复合事件
3 3 1　显示和隐藏高级特性
3 3 2　突出显示可单击的项
3 3 3　事件的旅程
3 3 4　事件冒泡的副作用
3 4　限制和终止事件
3 4 1　阻止事件冒泡
3 4 2　移除事件处理程序
3 5　模仿用户操作
3 6　小结
第4章　效果——为操作添加艺术性
4 1　修改内联css
4 2　基本的隐藏和显示
4 3　效果和速度
4 4　多重效果
4 4 1　构建具有动画效果的show（）
4 4 2　创建一种自定义的动画效果
4 4 3　理解数字的含义
4 4 4　改进自定义动画效果
4 5　并发与排队效果
4 5 1　处理一组元素
4 5 2　处理多组元素
4 6　简单概括
4 7　小结
第5章　dom操作——基于命令改变页面
5 1　操作属性
5 2　插入新元素
5 3　移动元素
5 3 1　标注、编号和链接到上下文
5 3 2　插入脚注
5 4　包装元素
5 5　复制元素
5 5 1　复制的深度
5 5 2　通过复制创建突出引用
5 6　dom操作方法的简单归纳
5 7　小结
第6章　ajax——让网站与时俱进
6 1　基于请求加载数据
6 1 1　追加html
6 1 2　操作javascript对象
6 1 3　加载xml　文档
6 2　选择数据格式
6 3　向服务器传递数据
6 3 1　执行get请求
6 3 2　执行post请求
6 3 3　序列化表单
6 4　关注请求
6 5　ajax和事件
6 5 1　限定事件绑定函数的作用域
6 5 2　利用事件冒泡
6 6　安全限制
6 7　小结
第7章　表格操作
7 1　排序
7 1 1　服务器端排序
7 1 2　javascript排序
7 2　分页
7 2 1　服务器端分页
7 2 2　javascript　分页
7 3　完成的代码
7 4　高级行条纹效果
7 4 1　三色交替模式
7 4 2　三行一组交替
7 5　突出显示行
7 6　工具提示条
7 7　折叠和扩展
7 8　筛选
7 8 1　筛选选项
7 8 2　同其他代码整合
7 9　完成的代码
7 10　小结
第8章　构建功能型表单
8 1　渐进增强的表单设计
8 1 1　图标符号
8 1 2　必填字段的提示信息
8 1 3　根据条件显示的字段
8 2　表单验证
8 2 1　即时反馈
8 2 2　最终检查
8 3　复选框操作
8 4　完成的代码
8 5　字段的占位符文本
8 6　ajax自动完成
8 6 1　服务器端代码
8 6 2　浏览器端脚本
8 6 3　填充搜索字段
8 6 4　键盘导航
8 6 5　自动完成与实时搜索
8 7　完成的代码
8 8　输入掩码
8 8 1　购物车表格结构
8 8 2　拒绝非数字输入
8 9　数字计算
8 9 1　解析和格式化货币值
8 9 2　处理小数位
8 9 3　其他计算
8 10　删除商品
8 11　修改送货信息
8 12　完成的代码
8 13　小结
第9章　滑移和翻转
9 1　标题翻转效果
9 1 1　设置页面
9 1 2　取得新闻源
9 1 3　设置翻转效果
9 1 4　标题翻转函数
9 1 5　悬停时暂停
9 1 6　从不同的域中取得新闻源
9 1 7　附加的内部渐变效果
9 2　图像传送带
9 2 1　设置页面
9 2 2　通过javascript修改样式
9 2 3　通过单击滑移图像
9 2 4　添加滑移效果
9 2 5　显示操作图标
9 3　放大图像
9 3 1　隐藏大幅封面
9 3 2　更有价值的标记
9 3 3　为封面放大添加动画效果
9 4　完成的代码
9 5　小结
第10章　插件
10 1　使用插件
10 2　流行的插件
10 2 1　dimensions
10 2 2　form
10 2 3　interface
10 3　查找插件文档
10 4　开发新插件
10 4 1　添加新的全局函数
10 4 2　添加jquery对象方法
10 4 3　dom遍历方法
10 4 4　添加新的简写方法
10 4 5　维护多事件日志
10 4 6　添加选择符表达式
10 4 7　创建缓动样式
10 4 8　做个好公民
10 5　小结
附录a　在线资源
附录b　开发工具
附录c　javascript闭包

jQuery 事件用法详解

jQuery 事件用法详解

 

 

目录

简介

实现原理

事件操作

绑定事件

解除事件

触发事件

事件委托

事件操作进阶

阻止默认事件

阻止事件传播

阻止事件向后执行

命名空间

自定义事件

事件队列

jquery中文文档

简介

jquery 之所以成为最受欢迎的前端库，很大一部分是得益于它的事件具有良好的语义，优秀的兼容性，并且便于管理和扩展。

在这里我会介绍 jquery 事件的一些比较基础的用法。

实现原理

jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attachEvent (IE) 方法 , 提供了跨浏览器的一致性API。具体的实现原理可以参考Aaron的系列文章
jquery源码分析-事件。

事件操作

绑定事件

jquery 中实现事件绑定有多种方式,其中 $(selector).event(func) 方式中 event 支持一系列的浏览器事件，文档加载事件，表单事件，键盘事件和鼠标事件，但并非全部。

// 常用的写法

$(\'body\').click(function(){ })

$(\'body\').on(\'click\',function(){ })

$(\'body\').one(\'click\',function(){ }) // 只会执行一次，然后销毁事件

// 其他写法(不推荐)

$(\'body\').bind(\'click\',function(){ })

$(\'body\').delegate(\'p\',\'click\',function(){ })

on.(\'click\') 和 .click() 的区别

on 属于 绑定事件处理器(event-handler-attachment) , 而 .click() 属于 jquery包装好的鼠标事件。

on 可以绑定dom和bom的既有事件，也可以绑定自定义的事件。所以推荐始终只使用$(selector).on(event,func) 的方式，弹性的绑定更多的事件：

$(document).hashchange(function(){ }) => 报错，jquery没有提供此事件处理器

$(document).on(\'hashchange\',function(){ })  => 绑定事件成功

也可以同时绑定多个事件处理同一事务：

$(\'input\').on(\'focus input\',function(){ })  => 在文本框聚焦和输入的时候，都做同样的事情

解除事件

在不需要再继续监听事件执行的时候，就需要解除事件了，根据绑定事件方式的不同，解除事件也有好几种方式，推荐始终使用$(selector).off(event) 的方式解除事件绑定，因为 on/off 正好构成了一个开关。

$(\'body\').off(\'click\') 

  => 可以解除 $.click(func),$.on(\'click\',func) 
     和 $.bind(\'click\',func) 绑定的事件，
     不能解除delegate方式绑定的事件

$(\'body\').unbind(\'click\') => 同上

$(\'body\').undelegate(\'p\',\'click\') => 只能解除 delegate方式绑定的事件

触发事件

在 jquery 中，有许多方法根据其参数个数的不同，既可以是赋值，也可以做为取值操作。
事件也不例外，许多时候可以利用这个特性，代替手动去触发一些事件，以下示例中的两种方式，都可以实现自动触发事件。

// (当表单字段未通过验证时) 自动选中文本值
$(\'input\').select()
$(\'input\').trigger(\'select\')

// 触发已有的点击事件
$(selector).click()
$(selector).trigger(\'click\')


// 通过触发事件，通知select2插件重新渲染
$(\'select\').change()
$(\'select\').trigger(\'change\')

事件委托

事件委托通过事件从目标元素冒泡到根元素的原理实现，它有2个好处，一是大幅降低事件绑定的内存占用，二是可以对后来加入的元素生效。

// 写法
$(selector).on(event, selector2, func)

// 不推荐的方法
$(selector).delagate(selector2, event, func)

事件委托原理及性能分析详见 解密jQuery事件核心 - 委托设计（二）

事件操作进阶

上面列举了一些简单的事件绑定，解绑和委托的使用，下面会说到一些更加个性化的用法。

阻止默认事件

event.preventDefault() 这个方法用于阻止浏览器的默认行为，通常用于表单提交或是页面滚动。

$(\'form\').on(\'submit\',function(event){
      
  // 阻止了默认的表单提交事件，下面可以做一些爱做的事情了
  event.preventDefault();
})

$(document).on(\'touchmove\',function(event){
      
  // 阻止了浏览器的默认滚动，也可以做些爱做的事情了
  event.preventDefault();
})

阻止事件传播

阻止事件传播即阻止事件继续向上冒泡。

// 点击div时，会依次alert 2 ,1
$(\'body\').on(\'click\',function(){alert(1)})

$(\'div\').on(\'click\',function(){alert(2)})

// 下面的代码只会alert一个 2，因为事件停止冒泡了,不会被body监听到
$(\'body\').on(\'click\',function(){alert(1)})

$(\'div\').on(\'click\',function(event){
   event.stopPropagation();
   alert(2)
})

阻止事件向后执行

除了阻止默认的事件，停止向上冒泡之外，有时还需要禁止后续的事件执行，可以使用 event.stopImmediatePropagation() 方法。该方法会自动调用 event.stopPropagation() 方法。

// 不使用 event.stopImmediatePropagation() 将会alert 2,3,4,1
// 加上之后只会alert 2
$(\'body\').on(\'click\',function(){alert(1)})

$(\'div\').on(\'click\',function(event){
   event.stopImmediatePropagation();
   alert(2)
})
$(\'div\').on(\'click\',function(){
   alert(3)
})
$(\'div\').on(\'click\',function(){
   alert(4)
})

命名空间

想要更精准的控制事件，很多时候还需要利用 jquery 的命名空间机制。

$(\'div\').on(\'click.click1\',function(){console.log(1)})
$(\'input\').on(\'click.click1\',function(){console.log(11)})

$(\'div\').on(\'click.click2\',function(){console.log(2)})
$(\'input\').on(\'click.click2\',function(){console.log(21)})

// 只触发click2事件
$(\'div,input\').trigger(\'.click2\')

// 解除click1事件,click2任然会执行
$(\'div,input\').off(\'.click1\')

自定义事件

把多个事件组合起来，或者在特定条件下触发事件，普通的事件绑定是无法满足需要的，可以通过自定义事件来形成 pub-sub 组合。
比如监听 短信验证码发送倒计时：

// 伪代码

setInterVal(function(){
  time--;
  if(time < 1){
    $(\'.js-timeless-button\').trigger(\'time-end\', params0, params1);
  }
},1000)

// 自定义事件回调函数默认第一个参数为event对象，以后的参数依次是传入的参数

 $(\'.js-timeless-button\').on(\'time-end\',function(event, params0, params1){
   
 });

或者是 页面滚动到了底部

// 伪代码

$(window).on(\'scroll\',function(){
  if((($(window).scrollTop() + $(window).height())) >= $(document).height()){
    $(document).trigger(\'infinite\', params0, params1);  
  }
})

 $(document).on(\'infinite\',function(event, params0, params1){
   
 });

解除自定义事件和解除其他事件的方式相同。可以通过 off 或者 unbind 进行。

事件队列

在 jquery 中，事件是按照其绑定顺序依次执行的。如果想要调整执行顺序，或是禁止之前绑定的方法发生，可以通过重写事件队列的方式。

查看某个dom上已绑定事件的方法是
$._data(elem,\'events\') (jquery版本>1.7)。

elem 是 dom对象 而非 jquery对象 。

function alertBottle(){
  $("body").on(\'click\',function() { alert("1") });
  $("body").on(\'click\',function() { alert("2") });
  $("body").on(\'click\',function() { alert("3") });
}

// 点击body会依次alert 1, 2, 3
alertBottle();

// 倒序执行
alertBottle();

var Events = $._data($("body").get(0),\'events\');
Events.click.sort(function(a,b){return b.guid-a.guid })   

// 禁止执行之前的一切， 只执行我
alertBottle();

var Events = $._data($("body").get(0),\'events\');
Events.click = null;
$("body").on(\'click\',function() { alert("4") });

// 最先执行我 alert 4, 1, 2, 3
alertBottle();

$("body").on(\'click\',function() { alert("4") });
var Events = $._data($("body").get(0),\'events\');
var last = Events.click.pop();
Events.click.unshift(last);

兼容jquery低版本的写法是:

$.fn.getEvents = function() {
    if (typeof(jQuery._data) == \'function\') {
        return jQuery._data(this.get(0), \'events\') || {};
    } else if (typeof(this.data) == \'function\') { // jQuery version < 1.7.?
        return this.data(\'events\') || {};
    }
    return {};
};

// 使用
$("body").getEvents();
转自http://www.cnblogs.com/lewo/p/jquery-event.html

 

 

标签: jQuery