1.基本选择器

2.jQuery 筛选方法(重点)

3.jQuer样式操作

4.jQuery 效果

5.jquery事件

手册文档下载

https://cloud.zfajax.com/index.php?share/file&user=102&sid=bsvkDhK7

文件是没有问题的,如果打不开百度一下”chm打不开空白”.或者点击我给你找的文章https://jingyan.baidu.com/article/8275fc86b5fb6646a03cf6b0.html

jQuery 在 2007年 7月发布了 1.1.3版本。从开始的 1.x 版本至现在的 3.x 版本,版本数量不少于 60 个。 那么该如何选择适合项目的版本呢?本篇文章,推荐一下 jQuery的版本

区别:

  • 1.x:兼容IE678,但相对其他版本文件较大,官方制作BUG维护,功能不再增新,最终版本1.12.4(2016年5月20日)
  • 2.x:不兼容IE678,相对1.x文件较小,官方只做BUG维护,功能不再更新,最新版本2.2.4(2016年5月20日)
  • 3.x:不兼容IE678,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,相对于1.x文件较小,提供不包含Ajax/动画API版本。

电脑端 推荐选择 jQuery 1.9 版本,理由如下:

  • 兼容IE8,在当下电脑端兼容IE8还是有需要的(管理系统除外)。
  • API与更高版本基本一致,又将低版本的不足之处进行了修复,比如:选择器的性能、方法名的不规范等等
  • 在1.9版本中有jQuery1.7中引进的事件处理函数界的一哥 “.on()” 函数。

 

移动端 推荐选择 jQuery 3.x 版本,理由如下:

  • 新的肯定更好啊,不好还需要更新吗?这里不需要理由。
  • 手机浏览器使用的内核都是最新的不存在浏览器兼容问题,上最新的干就完了

 

不推荐:低于 jQuery 1.7 的版本

  • 与现在的高版本API相差比较大;
  • 选择器等各方面性能不高。
  • 1.7使用.bin 不是 .on 和其他插件有兼容问题

 

不推荐:2.x 版本:

  • 存在的周期短(2.0.0版本开始 至 2.2.4结束);
  • 不如1.9版本能兼容IE8;
  • 现如今 3.x也早以发布再使用 2.x 版本意义 不大。

 

怎么选择类型:

  • Development version :原版,有统一的格式,格式标准,体积较大,方便阅读(是可读的代码),用于测试、学习和开发,,一般在网站建设时使用,便于调试。
  • Production version :优化压缩后的版本(删除空格等,文件较小,但不利于阅读),建议程序发布时使用,用于实际的网站中,已被精简和压缩。
  • jQuery map :map文件能够被用来在某些现在浏览器上调试压缩后的jQuery文件,map文件可以增强调试的体验,对于使用jQuery的用户来说,一般不需要下载改文件。

总结一句话 , 电脑端使用jQuery1.9 , 手机端使用最新jQuery,干就完了奥利给

javaScript库的概念

仓库:可以把很多东西放到这个仓库里面.找东西只需到仓库里面查找就可以了

javaScript库:即library,是一个封装好的特定的集合(方法和函数),就是在这个库中,封装了很多预定义好的函数在里面,比如动画animate , hide ,show 比如获取元素等,就是一个js文件,里面对我们原生js代码进行了封装,存放到里面.这样我们可以快速高效的使用这些封装好的功能了

常见javaScript库

jQuery 的概念

jquery 是一个快速,简洁的javaScript 库 ,设计宗旨’write less , do more’ , 写更少做更多

jquery 封装了 JavaScript 常用的功能代码,学习jquery本质就是学习调用这些函数.

 

jQuery顶级对象$

  • $是jQuery的别称,在代码中可以使用$代替jQuery,通常都直接使用$
  • $是jQuery的顶级对象,相当于原生JavaScript中的window.把元素利用$包装成jQuery对象,就可以调用jQuery的方法

 

jQuery对象和DOM对象

  • 用原生js获取的对象是DOM对象
  • 用jQuery方式获取过来的是jQuery对象
  • jQuery对象本质利用$对DOM对象包装后产生的对象(伪数组形式存储)
  • jQuery对象只能使用jQuery方法,DOM只能使用javaScript原生方法

jQuery对象和DOM对象相互转换

迭代(重要)

遍历内容部DOM元素(伪数组形式存储)的过程就是

 

本地存储特性

  • 数据存储在用户浏览器中
  • 设置读取方便,甚至刷新页面也不会丢失
  • 容量较大,sessionStorage约5M, localStorage约2M
  • 只能存储字符串,可以将对象JSON.stringify()编码后存储

window.sessionStorage

  • 生命周期为关闭浏览器窗口 (简单理解生命周期 ,就是什么时候死 ,什么时候消失)
  • 在同一个窗口(页面)下数据是可以共享
  • 以键值对的形式存储使用

window.localStorage

  • 生命周期永久有效,除非手动删除否则关闭页面也会存在
  • 可以多窗口(页面)共享(统一浏览器可以共享)
  • 以键值对的形式存储

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

 

SuperSlide 致力于解决网站大部分特效展示问题

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
从此无需网上苦苦寻觅特效,无需加载n个插件,无需害怕代码冲突,你需要的只是一个SuperSlide!
还可以多个SuperSlide组合创造更多效果哦~

(兼容包括ie6的绝大部分浏览器)[当年的你是否这样?]

 

iScroll,网络平滑滚动

iScroll是一种高性能,占用空间少,无依赖的多平台javascript滚动器。

它适用于台式机,移动电视和智能电视。它已针对性能和尺寸进行了优化,以在现代和旧设备上提供最平滑的结果。

iScroll不仅可以滚动。它可以处理需要通过用户交互移动的任何元素。它为您的项目添加了滚动,缩放,平移,无限滚动,视差滚动,轮播,并且仅以4kb的速度做到了这一点。给它扫帚,它也会打扫你的办公室。

即使在本机滚动就足够好的平台上,iScroll也会添加其他方式无法实现的功能。特别:

  • 即使在动量期间,也可以对滚动位置进行粒度控制。您始终可以获取并设置滚动条的x,y坐标。
  • 可以使用用户定义的缓动功能(反弹,弹性,后退…)自定义动画。
  • 您可以轻松地挂钩到大量自定义事件(onBeforeScrollStart,onScrollStart,onScroll,onScrollEnd,flick等)。
  • 开箱即用的多平台支持。从较旧的Android设备到最新的iPhone,从Chrome到Internet Explorer。

 

移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面

解决方案

1.禁用缩放.浏览器禁用默认的双击缩放行为并且渠道300ms的点击延迟

2.利用touch事件自己封装这个事件解决300ms延迟(了解即可)

原理解释

  • 当我们手指触摸屏幕,会记录当前触摸时间
  • 当我们手指离开屏幕,用离开的事件减去触摸的事件
  • .如果事件小于150ms,并且没有滑动屏幕,那么我们就定义为点击

3.使用fastclick.js https://github.com/ftlabs/fastclick

原生js应用

jQuery这样使用

元素偏移量offset系列(就是查看元素位置)

  • offset翻译过来就是偏移量,我们是用offset系列相关属性可以动态地得到该元素的位置(偏移),大小等
  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小
  • 返回的数值没有单位

 offset与style区别

  • offset可以得到任意样式表的样式值
  • 获取的数值没有单位
  • offsetWidth 包含 padding+border+offsetWidth
  • offsetWidth 等属性是只读属性,只能获取不能赋值

  • style只能得到行内样式表的样式
  • style.widht获得的数值带有单位
  • style.widht 获得不包括 padding 和 border
  • style.widht 是可读可写的属性

小案例 (获取鼠标在元素上的位置)

小案例(鼠标拖动元素效果)

小案例(手机端触摸拖动)

小案例(放大镜)

元素可视区域client系列

  • client翻译过来就是客户端,我们是用client系类的相关属性来获取元素可视区的相关信息,通过相关属性可以动态得到该元素的边框大小,元素大小
  • client和offset的区别 offset带边框 client不带边框

 

元素滚动scroll系列

scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等.

如何快速获取页面滚动值 document就是页面

页面被卷去的头部兼容性解决方案

  • 声明DTD  <!DOCTYPE html> 使用 document.documentElement.scrollTop
  • 未明DTD  <!DOCTYPE html> 使用 document.body.scrollTop
  • 新方法 window.pageYoffset 和 window.pageXoffset IE9 开始支持

javaScript简单动画效果函数封装

简单动画效果函数(应用1 鼠标浮动移出菜单)

简单动画效果函数(应用2 无缝轮播图)

小案例(手机端Touch事件无缝轮播图 手机端轮播图)

  1. 整个浏览器就是一个BOM,把浏览器当做对象看待
  2. BOM的顶级对象是window
  3. BOM学习的是浏览器窗口交互的一些对象
  4. BOM包含DOM
  5. BOM(browser Object Model)浏览器对象模型,他提供了独立内容而与浏览器窗口进行交互的对象,其核心对象是window
  6. BOM是由一系列相关对象构成,并且每个对象都提供了很多方法和属性

window对象是浏览器的顶级对象,它具有双重角色

  • 它是js访问浏览器窗口的一个接口
  • 它是一个全局对象,定义在全局作用域的变量,函数都会成为window对象的属性和方法
  • 调用的时候可以省略window

常用事件

计时器

计时器案例(短信发送倒计时)

this 指向问题

  • 一般情况下this的最终指向的是哪个调用它的对象
  • 全局作用域或普通函数中,this指向全局对象window
  • 对象方法调用中,那个对象调用this指向那个对象
  • 构造函数中this指向构造函数的实例

js执行机制

  • 限执行栈中的同步任务
  • 异步任务(回调函数)放入任务队列中
  • 一旦执行栈中的所有同步任务执行完毕,系统就会按照次序读取任务队列中的异步任务,被读取的异步任务结束等待,进入执行栈,开始执行

location对象

window对象给我们提供了一个location属性用户获取或这只窗体的URL,并且可以用于解析URL.因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象

location对象常用属性和方法

Navigator对象

navigator对象包含有关浏览器的信息,他有很多属性,我们最常用的就是userAgent,该属性可以返回由客户端发送服务器的user-agent头部值

判断设备跳转链接代码

history对象

window对象提供给我们一个history对象,与浏览器历史记录进行交互.该对象包含用户(在窗口浏览中)访问过的URL

history对象常用属性和方法

 

事件

完整的事件分为

  1. 事件被触发的元素对象 (事件源)
  2. 事件类型
  3. 事件处理程

常见鼠标事件

常见键盘事件

常见触屏事件

注册事件(绑定事件)

解绑事件

事件流

事件流描述的是从页面中接受事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流

DOM事件流分为3个阶段

  1. 捕获阶段 :网景最早提出,,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收到的过程.从最高层开始调用方法
  2. 当前目标阶段
  3. 冒泡阶段:IE最早提出,事件开始由最具体的元素接受,然后逐级向上传播到DOM最顶层节点的过程,从最底层开始调用方法

注意

  1. js代码中只能执行<捕获> 或者 <冒泡>其中的一个阶段
  2. onclick he attacheEvent 只能得到冒泡阶段
  3. addEventListener(type , listener [,useCapture]) 第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序,如果是false(默认false) , 表示在事件冒泡阶段调用程序
  4. 实际开发中只关注冒泡
  5. 有些事件没有冒泡,比如 onblur onfocus onmouseenter onmouseleave
  6. 冒泡事件会带给我们麻烦,有时帮助我们做一些巧妙的事情

 

 

 

 

 

 

事件委托(利用事件流完成)

  • 事件委托也称事件代理也称事件委派
  • 不是给每一个节点单独设置,事件监听,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每一个子节点,
  • 只操作一次dom提高了程序性能

事件对象

常用事件对象方法和属性

常用鼠标事件对象方法和属性

常用键盘事件对象方法和属性

常用触摸事件对象方法和属性

web Api是 浏览器提供的一套操作浏览器功能和页面元素的Api(BOMDOM)

 

DOM

  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中所有标签都是元素,DOM中使用element表示
  • 节点:网页中的所有内容都是节点(标签,属性,文本注释等),DOM中使用node表示

 

获取dom元素

操作元素

操作节点

  • 元素节点 nodeType 为1
  • 属性节点 nodeType 为2
  • 文本节点 nodeType 为3