Jquery 学习二

1、事件编程

一、基本事件（以方法形式存在的）

基本语法：

原生Javascript代码中的事件绑定方式：

DOM对象.事件 = 事件的处理程序

 

jQuery代码中的事件绑定方式：

jQuery对象.事件(事件处理程序)

二、经常使用的事件列表

• blur(fn) ：当失去焦点时触发
• change(fn) ：当下拉选框状态改变时触发
• click(fn) ：当单击时触发
• dblclick(fn) ：当双击时触发
• focus(fn) ：当得到焦点时触发
• keydown(fn) ：当键盘按下时触发
• keyup(fn) ：当键盘弹起时触发
• keypress(fn) ：当键盘按下时触发
• load(fn) ：当页面载入时触发，与ready方法功能一致
• unload(fn) ：当页面关闭时触发，其处理程序中不能放置alert语句
• mousedown(fn) ：当鼠标按下时触发
• mouseup(fn) ：当鼠标弹起时触发
• mousemove(fn) ：当鼠标移动时触发
• mouseover(fn) ：当鼠标悬浮时触发
• mouseout(fn) ：当鼠标离开时触发
• resize(fn) ：当窗口大小改变时触发
• scroll(fn) ：当滚动条滚动时触发
• select(fn) ：（了解），当文本框文本选中时触发
• submit(fn) ：当表单提交时触发

示例代码：

问题：在原生Javascript代码中，事件绑定一共有三种形式：

① 行内绑定

② 动态绑定

③ 事件监听

那在jQuery中，其事件绑定是以哪一种形式呢？

运行结果：弹出hello，在弹出world。

因此由以上案例能够得出结论：在jQuery中，其事件绑定都是以事件监听的形式存在的且其调整了事件监听的兼容性问题并更改了事件的触发顺序，统一为正序触发（先绑定先触发）。

三、事件切换

• hover(over,out) ：鼠标悬浮与鼠标离开事件

参数说明：

over：鼠标悬浮事件，一般是一个匿名函数

out：鼠标离开事件，一般是一个匿名函数

 

• toggle(fn,fn,…) ：鼠标点击切换事件

参数说明：

fn：鼠标点击时触发的事件处理程序，能够有多个

当第一次单击时，触发第一个fn事件处理程序

当第二次单击时，触发第二个fn事件处理程序

…

例1：hover方法的使用

例2：toggle方法的使用

四、事件处理（封装的函数，专门用于事件绑定）

• bind(type,[data],fn) ：为某个元素绑定相关的事件处理程序

参数说明：

type：不带'on'前缀的事件类型

[data]：（了解），事件发生时所传递的参数，若是没有则直接写第三个参数便可

fn：事件的处理程序

• bind({type:fn,type:fn}) ：为某个元素绑定多个事件处理程序，参数是一个json数据

参数说明：

type：不带'on'前缀的事件类型

fn：事件的处理程序

• one(type,[data],fn) ：为某个元素进行一次绑定，只触发一次

参数说明：

type：不带'on'前缀的事件类型

[data]：（了解），事件发生时所传递的参数，若是没有则直接写第三个参数便可

fn：事件的处理程序

• unbind([type]) ：移除事件

参数说明：

[type] ：可选参数，要移除的事件类型，若是不写表明移除全部事件

 

例1：使用bind方法为元素绑定事件

例2：使用one方法进行事件处理

例3：使用unbind方法移除事件

在原生Javascript代码中，事件移除必须有一个前提：在事件绑定时，其事件的处理程序必须是一个有名函数，可是在jQuery代码中只须要提供要移除的事件类型便可。

五、事件绑定中的this指向

在Javascript中有一个特殊的对象，叫作this，其在不一样环境下其指向也是不一样的：

行内绑定中this指向window对象

动态绑定中this指向当前正在操做的dom对象

事件监听中其this具备兼容性问题，在IE内核浏览器下其指向全局window对象，W3C内核浏览器下其指向当前正在操做的dom对象

 

问题：jQuery中，其事件绑定都是采用事件监听的形式实现的，那么其内部的this又指向何方呢？

调试结果以下图所示：

由此能够得出结论：在jQuery事件绑定中，其内部的this指向当前正在操做的DOM对象。

六、事件冒泡

之因此称之为事件冒泡是指事件的响应会像水泡同样上升至最顶级对象。

由上图可知，在jQuery中依然存在事件冒泡行为，有些状况下冒泡是人为设计的，可是大多数状况下，冒泡是须要禁止的！

IE内核浏览器：

window.event.cancelBubble = true;

W3C内核浏览器：

dom对象.事件 = function(event) {

event.stopPropagation();

}

在jQuery中，其解决了兼容性问题，统一更改成：

event.stopPropagation();

经过以上代码测试可知，其解决了IE内核与W3C内核浏览器的兼容性问题，并解决了事件冒泡，因此jQuery其实是对event进行了二次封装。

七、默认行为

在html代码中，不少标签具备本身的默认行为。

如a超级连接标签，单击后能够跳转到指定页面

如submit按钮，单击后能够自动提交表单数据到服务器端页面

可是有些状况下，默认行为是须要禁止的：

IE内核浏览器：

window.event.returnValue = false;

W3C内核浏览器：

dom对象.事件 = function(event){

event.preventDefault();

}

在jQuery中，其禁止行为的方法，统一更改成event.preventDefault()实现：

2、jQuery中的效果

• 基本
• 滑动
• 淡入淡出
• 自定义动画

一、基本效果（显示或隐藏）

• show() ：显示
• show(speed,[callback]) ：以动画效果显示
• hide() ：隐藏
• hide(speed,[callback]) ：以动画效果隐藏
• toggle() ：切换显示或隐藏
• toggle(switch) ：显示或隐藏。switch，布尔类型的值，true：显示，false：隐藏
• toggle(speed,[callback]) ：以动画效果显示或隐藏

参数说明：

speed：动画的速度或动画的持续时间

若是采用动画的速度，其值能够是如下三种状况：

"slow" ：缓慢的

"normal" ：正常的

"fast" ：快速的

若是采用动画的持续事件，其能够是固定值，默认单位为毫秒

[callback]：可选参数，动画完成时所触发的回调函数

 

示例代码：

二、滑动效果（上下滑动）

• slideDown(speed,[callback]) ：以动画效果向下滑动
• slideUp(speed,[callback]) ：以动画效果向上滑动
• slideToggle(speed,[callback]) ：以动画效果向上或向下滑动

参数说明：

speed：动画的持续时间

[callback]：可选参数，动画完成时所触发的事件处理程序

 

示例代码：

三、淡入淡出效果（针对元素的透明度）

• fadeIn(speed,[callback]) ：以动画效果淡入
• fadeOut(speed,[callback]) ：以动画效果淡出

参数说明：

speed：动画的持续事件

[callback]：可选参数，动画完成时所触发的回调函数

• fadeTo(speed,opacity,[callback]) ：以动画效果设置元素的透明度

参数说明：

speed：动画的持续时间

opacity：元素的透明度，0全透明1不透明 0-1之间半透明

[callback]：可选参数，动画的持续时间

特别注意fadeOut与fadeTo之间对透明度为0的处理有区别，fadeOut若是消失后，其再也不占用原有位置，可是fadeTo设置为全透明时，其默认仍是占有原来的位置。

 

示例代码：

四、自定义动画

animate(params,[speed], [callback]) ：自定义动画效果

参数说明：

params ：要求是一个json格式的数据

[speed] ：动画的持续时间

[callback] ：动画完成时所触发的回调函数

示例代码：

五、几个小案例

例1：一组图片的淡入淡出

例2：仿hao123左侧导航功能

3、jQuery文档操做

• 插入
• 删除
• 复制
• 替换
• 包裹
• 查找

一、内部插入

• append(content) ：在元素的尾部插入content内容
• appendTo(content) ：把匹配到的元素插入到content元素的尾部
• prepend(content) ：在元素的头部插入content内容
• prependTo(content) ：把匹配到的元素插入到content元素的头部

例如：<div>worldhelloworld</div>

示例代码：

二、外部插入

• after(content) ：在元素的尾部插入content内容
• before(content) ：在元素的头部插入content内容
• insertAfter(content) ：把匹配到的内容插入到content元素的尾部
• insertBefore(content) ：把匹配到的内容插入到content元素的头部

例如：world<div>hello</div>world

示例代码：

三、删除操做（节点）

• empty() ：清空元素的内容，但不删除元素自己
• remove() ：删除整个元素

示例代码：

四、复制操做

• clone() ：复制元素自己，但不复制元素自己的事件
• clone(true) ：除了复制元素自己，还要复制元素自己的事件

扩展：天猫购物车

五、替换操做

• html() ：替换元素的内容
• replaceWith() ：替换元素自己

六、包裹操做

• wrap() ：对每个元素进行单独包裹
• wrapAll() ：对全部元素进行一次包裹
  • wrapInner() ：对每个元素的内容进行单独包裹

例如：<div><strong>hello</strong></div>

七、查找操做

• eq(index) ：查找索引等于index的元素
• filter(expr) ：查找某个指定条件的元素，不是过滤，而是缩小查询范围
• not(expr) ：查找除指定元素外的其余元素
• children([expr]) ：查找当前元素的全部子元素（一级）
• find(expr) ：查找当前元素的全部后代元素（任何级别）
• next([expr]) ：查找紧邻的下一个元素
• prev([expr]) ：查找紧邻的上一个元素
• parent([expr]) ：查找当前元素的父元素
• siblings([expr]) ：查找当前元素的全部同级兄弟元素（不管上下）

 

示例代码：

4、jQuery插件扩展机制

一、为何须要插件扩展机制

在实际项目开发中，可能咱们须要的某个功能在jQuery中并无进行封装，那这个时候咱们就能够经过jQuery中的插件扩展机制对其进行扩充。

二、基本语法

jQuery.fn.extend(object)

特别说明：在jQuery源代码中，jQuery与$是彻底等价的，以下图所示：

参数说明：

object ：要求是一个json格式的对象，语法以下：

jQuery.fn.extend({

    //扩展函数名称:具体程序实现

    fn1:function(){},

    fn2:function(){},

    ......

});

特别说明：在jQuery插件扩展机制中，也存在一个特殊对象，叫作this，其指向了当前正在操做的jQuery对象。

三、示例代码

四、综合案例——实现全选、全不选、反选功能