jQuery入门 jQuery入门第三天
jQuery入门
jQuery入门第三天
老师:黑马程序员
文章目录
- jQuery入门
- jQuery入门第三天
- 老师:黑马程序员
- 3. jQuery事件
- 3.1 jQuery事件注册
- 3.1.1 单个事件注册
- 3.2 jQuery事件处理
- 3.2.1 事件处理on()绑定事件
- 3.2.2 事件处理off()解绑事件
- 3.2.3 自动触发事件trigger()
- 3.3 jQuery事件对象
- 4. jQuery其他方法
- 4.1 jQuery拷贝对象
- 4.2 多库共存
- 4.3 jQuery插件
- 4.3.1 jQuery插件演示
- 4.3.2 bootstrap JS插件
3. jQuery事件
3.1 jQuery事件注册
3.1.1 单个事件注册
element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
3.2 jQuery事件处理
3.2.1 事件处理on()绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn)
events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。
selector: 元素的子元素选择器 。
fn:回调函数 即绑定在元素身上的侦听函数。
【on()方法优势】
- 可以绑定多个事件,多个处理事件处理程序。
- 可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
- 动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件
3.2.2 事件处理off()解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
3.2.3 自动触发事件trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
element.click() // 第一种简写形式element.trigger("type") // 第二种自动触发模式$("p").on("click", function () {alert("hi~");
}); $("p").trigger("click"); // 此时自动触发点击事件,不需要鼠标点击element.triggerHandler(type) // 第三种自动触发模式
3.3 jQuery事件对象
事件被触发,就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()
4. jQuery其他方法
4.1 jQuery拷贝对象
如果想要把某个对象拷贝(合并) 给另外一个对象使用,此时可以使用$.extend()方法
$.extend([deep], target, object1, [objectN])
deep: 如果设为true 为深拷贝, 默认为false 浅拷贝
target: 要拷贝的目标对象
object1:待拷贝到第一个对象的对象。
objectN:待拷贝到第N个对象的对象。
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
深拷贝,前面加true, 完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。
4.2 多库共存
需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。
jQuery 解决方案:
把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(‘‘div’’)
jQuery 变量规定新的名称:$.noConflict() var xx = $.noConflict();
4.3 jQuery插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。
jQuery 插件常用的网站:
jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤:
引入相关文件。(jQuery 文件 和 插件文件)
复制相关html、css、js (调用插件)。
4.3.1 jQuery插件演示
瀑布流
图片懒加载(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
当我们页面滑动到可视区域,再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意,此时的js引入文件和js调用必须写到 DOM元素(图片)最后面
- 全屏滚动(fullpage.js)
gitHub: https://github.com/alvarotrigo/fullPage.js
中文翻译网站: http://www.dowebok.com/demo/2014/77/
4.3.2 bootstrap JS插件
bootstrap框架也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入jQuery文件
jQuery入门 jQuery入门第三天相关推荐
- jQuery复习-(jQuery入门,jQuery语法(DOM),jQuery动画)
jQuery入门 jQuery的概述 jQuery是概念: jQuery是一个第三方框架(库) 框架:别人写好的js代码文件 框架好处:复制粘贴提高代码效率 jQuery的作用: DOM操作(主要) ...
- LaTeX入门第三集!LaTeX的几个应用!
LaTeX入门第三集!LaTeX的几个应用! 一.制作PPT Ctex+Texstudio beamer 制作slide(ppt)安装 二.画图 一般人们并不直接使用PGF底层命令,而是通过它前端Ti ...
- python编程入门第3版pdf-Python编程入门第三版
Python编程入门第三版PDF下载.Python编程入门第三版PDF是一款为Python编程人员制作的一款专业的Python编程从业基础教程,大量的实战例子让你轻松驾驭各种场景! Python编程入 ...
- R语言入门第三集 实验二:基本数据处理
R语言入门第三集 实验二:基本数据处理 一.资源 [R语言]R语言数据处理--东北大学大数据班R实训第二次作业 二.答案更新纠正 2.11.从df中选取date . item_id . cate_id ...
- Linux入门第三集!JDK8的Linux版本资源分享!jdk-8u301-linux-x64.rpm官方资源分享!Linux安装JDK8教程!
Linux入门第三集!JDK8的Linux版本资源分享!jdk-8u301-linux-x64.rpm官方资源分享!Linux安装JDK8教程! 提取码均为0916 jdk-8u301-linux-x ...
- LabVIEW入门第三天(软件及驱动包下载)
LabVIEW入门第三天 欢迎大家阅读本篇文章,今天我给大家介绍LabVIEW的相关版本和驱动,欢迎有兴趣的一起学习探讨. 一,LabVIEW软件及驱动包下载 前面讲过LabVIEW是美国国家仪器(N ...
- C# 编程入门第三课 类型转换,++,关系运算符,bool类型(布尔类型),逻辑运算符,判断闰年,结构
C# 编程入门第三课 文章目录 C# 编程入门第三课 1. 类型转换 2. ++,-- 3. 关系运算符 4. bool 类型(布尔类型) 5. 逻辑运算符 6.判断闰年 7. 结构 1. 类型转换 ...
- java包名和类名可以一样吗_Java入门第三课:Java基本语法
Java基础 编写Java程序时,应注意以下几点: 1.大小写敏感: Java是大小写敏感的,这就意味着标识符Hello与hello是不同的.有些操作系统不区分大小写,不区分的话,文件名是不完全正确的 ...
- jQuery入门jQuery API-1
1.jQuery 概述 1.1 JavaScript 库 仓库:可以把很多东西放 这个仓库里面.找东西只需要到仓库里面查找到就可以了. JavaScript库:即library ,是一个封装好的特定的 ...
最新文章
- 100多篇论文被知网擅自收录!89岁教授维权获赔70余万!
- php sql server配置文件路径,云服务器初始化 第六章:更改MySQL数据文件存放路径...
- 嵌套 移动端_360PC端小程序全面开放使用
- 请求getServiceTime出错
- 简述HTML语言概念,HTML语言的基本概念和基本格式.doc
- php 调用cron jobs,在CentOS 6.4中使用CronJobs执行PHP不起作用?
- 聊一下C#开发者如何过渡到JAVA 开发者
- REST架构中的HTTP动词
- japid-conf目录文件配置
- 论文赏析[ICLR18]联合句法和词汇学习的神经语言模型
- 分解例题_2020年中考数学考点之利用平方差公式进行因式分解习题练习
- Java序谈之通讯录制作
- C/C++——字符串拼接
- 金融分析与风险管理——投资组合收益率、波动率计算
- Python课第3周:平方根格式化
- vm安装win xp镜像遇到的安装问题之一
- 简析内容付费趋势,问题和路径
- Foo,getName题解分析
- 联想笔记本G400使用VS2013时,笔记本快捷键与软件快捷键冲突解决方案
- Smoke Loader、AZORult***通过虚假海啸警报传播到了日本