jQuery事件操作
- 公共结构
<input type="text" value="按钮">
<ul>
<li>火</li>
<li>草</li>
<li>雷</li>
<li>冰</li>
<li>水</li>
</ul>
on方法注册事件
回顾简单方式注册事件
- 语法:jQuery对象.事件名(事件处理程序)
// 简单注册事件方式
$("input").click(function (){
alert(1);
});
on方法注册事件
- 注册简单事件语法: jQuery 对象.on('事件名',事件处理程序);
// 使用on方法注册简单事件
// on方法的封装的底层实际是addEventListener()
// addEventListener():
// 1.实现事件冒泡 2.对同一个元素绑定多个同类型事件
$("input").on("click",function (){
alert(2);
});
-
注意:on方法的封装的底层实际是addEventListener()
-
事件委托的实现：jQuery 对象.on('事件名','选择器',事件处理程序);选择器：子孙元素
-
注意：在事件处理程序中，this 代表的是子孙元素（所点最先触发的）
-
演示代码
// 原生DOM实现事件委托
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e){
e.target.style.background = "pink";
}
// jQuery中的事件委托
// on()方法传递三个参数
// 参数1: 事件类型
// 参数2: 进行委托的子元素的选择器
// 参数3: 事件处理程序
$("ul").on("click","li",function (){
// 这里的this指向的是当前的委托子元素
$(this).context.style.backgroundColor = "pink";
});
off方法移除事件
- 解绑简单的事件：jQuery 对象.off('click',事件处理程序名称)
- 解绑事件委托注册的事件：jQuery 对象.off('click',‘选择器’,事件处理程序名称.
var $inp = $("input");
var $ul = $("ul");
// 定义事件处理函数
function fn1 (){
alert(123);
}
function fn2 (){
alert(777);
}
function fn3 (){
$(this).css("backgroundColor","pink");
}
$inp.on("click",fn1);
$inp.on("click",fn2);
// 事件委托方式注册得事件
$ul.on("click","li",fn3);
// 1. off方法移除事件
$inp.off("click",fn1);
// 2. off解绑事件委托注册得事件
$ul.off("click","li",fn3);
触发事件
- 语法：jQuery 对象.trigger('事件名');
jQuery事件对象
事件对象
- 事件处理程序的第一个形参e
- jQuery中对e进行了封装,解决了原生js中e的兼容问题,不用再去写e \ window.event
鼠标事件对象相关的属性
- 事件对象.clientX/Y 参照浏览器
- 参考浏览器找到自己，当前鼠标移动到得位置，距离自己的左边和顶部得位置
- 事件对象.pageX/Y 参照文档
- 参考文档得距离左侧和顶部得间距
- 事件对象.offsetX/Y 参照元素
- 偏移参考父级边框以内 到 自己的边框外 -> 不包含偏移参考父级的边框，不包含自己的边框
键盘事件对象相关的属性
- 事件对象.keycode
- 返回: 键码数字
- 事件对象.altKey / shiftKey / ctrlKey
- 返回值: 布尔值
- 功能: 检测是否按下(true)
- 演示代码
// 键盘事件对象相关属性
$(document).keydown(function (e){
// 返回键码数字
console.log(e.keyCode);
// 检测是否按下
console.log(e.altKey);
});
公共的属性或方法
- 属性
- 事件对象.target 最初触发事件的DOM元素
- 事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
- 方法
- 事件对象.preventDefault() 阻止默认行为(例如:阻止a标签的跳转)
- 事件对象.stopPropagation() 阻止事件冒泡
多库共存问题
关于$冲突的问题
解决方案1
- jQuery中不使用$,使用jQuery
解决方案2
- jQuery库释放$符合的使用权,用其他简单的符号代替
- jQuery.noConflict(); 释放 代表的函数返回给用户，用户可以用其他变量接收
- 演示代码
// 解决方法1： 使用 jQuery 标识符进行调用
jQuery("button").click(function () {
alert(1);
})
// 解决方法2：释放 $ 符号
// 将返回值赋给一个新的变量,就可以使用新的变量来进行操作
var $1 = jQuery.noConflict();
// console.log($1)
$1("button").click(function () {
alert(1);
});
jQuery插件使用
如何获取插件
- 百度搜索 \ github搜索(jQuery zoom)
- 看技术文章
- jQuery 插件库之家： www.htmleaf.com
插件使用方法
- 找到并且下载插件
- 在项目外写一个 demo（先学会使用，让后再加入项目中）
- 看源码，看文档
注意
- 1.复制结构,保证结构关系是一致的。标签名不一致无所谓
- 2.样式，可以选择复制，也可以定义自己需要的样式
- 3.先引入 jQuery 文件，再引入插件库文件，再去使用
- 4.复制源代码或看文档使用
放大镜插件
- 放大镜插件: www.jacklmoore.com/zoom/
