jQuery笔记总结篇

时间 2019-11-07

标签 jquery 笔记总结栏目 JQuery 繁體版

原文原文链接

原文连接 http://blog.poetries.top/2016...javascript

首先，来了解一下jQuery学习的总体思路php

XMind源文件提供参考下载css

第一节 jQuery初步认知

jQuery概述

JQuery概念html
- javascript概念前端
  - 基于Js语言的API和语法组织逻辑，经过内置window和document对象，来操做内存中的DOM元素java
- JQuery概念jquery
  - 基于javascript的，同上，提升了代码的效率css3
jQuery是什么:git
- 是一个javascript代码仓库，咱们称之为javascript框架。github
- 是一个快速的简洁的javascript框架，能够简化查询DOM对象、处理事件、制做动画、处理Ajax交互过程。
- 它能够帮咱们作什么(有什么优点)
  - 轻量级、体积小，使用灵巧(只需引入一个js文件)
  - 强大的选择器
  - 出色的DOM操做的封装
  - 出色的浏览器兼容性
  - 可靠的事件处理机制
  - 完善的Ajax
  - 链式操做、隐式迭代
  - 方便的选择页面元素(模仿CSS选择器更精确、灵活)
  - 动态更改页面样式/页面内容(操做DOM，动态添加、移除样式)
  - 控制响应事件(动态添加响应事件)
  - 提供基本网页特效(提供已封装的网页特效方法)
  - 快速实现通讯(ajax)
  - 易扩展、插件丰富
如何引入JQuery包
- 引入本地的JQuery
- 引入Google在线提供的库文件（稳定可靠高速）
- 使用Google提供的API导入 <script type=“text/javascript” src=“jquery.js”></script>
- 写第一个JQUery案例
  - 解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery()

<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
   $(function(){
       alert(“jQuery 你好!”);
   });
</script>

讲解$(function(){});
- $是jQuery别名。如$()也可jQuery()这样写,至关于页面初始化函数，当页面加载完毕，会执行jQuery()。
- 但愿在作全部事情以前，JQuery操做DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件作处理HTML文档的开始
- $(document).ready(function(){});
  - 相似于js的window.onload事件函数，可是ready事件要先于onload事件执行
  - window.onload = function(){};
- 为方便开发，jQuery简化这样的方法，直接用$()表示
- JQuery的ready事件不等于Js的load：
  - 执行时机不一样：load须要等外部图片和视频等所有加载才执行。ready是DOM绘制完毕后执行，先与外部文件
  - 用法不一样：load只可写一次，ready能够屡次
window.onload与$(document).ready()对比

window.onload		$(document).ready()
执行时机	必须等网页中全部内容加载完后(图片)才执行	网页中的`DOM`结构绘制完后就执行,可能`DOM`元素相关的东西并无加载完
编写个数	不能同时执行多个	能同时执行多个
简化写法	无	`$(document).ready(function(){ //.. });` 推荐写法：`$(function(){ });`

jQuery有哪些功能(API)：
- 选择器
- 过滤器
- 事件
- 效果
- ajax
简单的JQuery选择器：
- JQuery基本选择器（ID选择器，标签选择器，类选择器，通配选择器和组选择器5种）
- ID选择器：document.getElementById(id)与$("#id")对比(改变文字大小)---id惟一，返回单个元素
- 标签选择器：document.getElementsByTagName(tagName)与$("tagname")对比---多个标签，返回数组
- 类选择器:$(".className")--多个classname（改变背景图片）
- 通配选择器：document.getElementsByTagName("*")与$("*")对比---指范围内的全部标签元素
- 组选择器：$("seletor1,seletor2,seletor3")----无数量限制，用逗号分割

初步了解`JQuery`

JQuery是什么
- javascript用来干什么的：
  - 操做DOM对象
  - 动态操做样式css
  - 数据访问
  - 控制响应事件等
- jQuery做用同样，只是更加快速简洁
如何引用JQuery

<script type="text/javascript"></script>
写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
    $(function(){
        alert(“jQuery 你好!”);
    });
</script>

$()讲解
- $在JQuery库中，$是JQuery的别名，$()等效于就jQuery().
- $()是JQuery方法,赞可看做是JQuery的选择器，与css选择器类似（可作对比）
- var jQuery==$ =function(){} $()本质就是一个函数也就是 jQuery的核心函数
- 只要是jQuery的对象都这样变量加上一个符号$ 方便识别：var $div = $("#")

function　$(id){
        return document.getElementById(id);
    }

$()和document是相等的吗

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回结果为false
alert(document.getElementById("id") == $("#aa").get(0));//返回true

代理对象$()
- jQuery中返回的是代理对象自己
- jQuery的核心原理是经过选择器找到对应的代理对象
- jQuery全都是经过方法操做
- 样式选择器$(".className")
  - $(".aa").css("color","green");
- id选择器("")
  - $("#a").css("background-color","#ff0066");
- 标签选择器
  - $("p").css("color","#cc3366");
- 组选择器
  - $("#b ul li").size();
对象转换($(element))
- 原生dom对象和jquery代理对象的相互转换

$(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true

检索范围的限制（$('字符串',element)）
- 总结：三种写法对比：
  - 方式一：不推荐搜索速度最慢
    - $("#nav").css();
    - $("#nav li").css();
  - 方式二：搜索速度最快链式操做
    - $("#nav").css().children().css();
  - 方式三：也经常使用速度第二快
    - var $nav = $("#nav").css();
    - $("li",$nav).css(); $nav 限制了搜索范围速度快
总结： $() jquery核心方法的做用和使用场景
- 若是是一个字符串参数而且没有标签对（选择器） $(ul.nav")
- 若是是一个字符串参数而且有标签对（建立html标签）$("<img>") --最终加到DOM树中 $xx.append("<img>");
- 若是是传入一个element dom对象，直接包装为proxy对象返回 $(DOM对象)
- 若是第一个参数是字符串，第二个是element dom对象的话，那么就是在element这个dom对象里面寻找选择器对应的元素而且代理 $("li",$DOM对象)
代理模式以及代理内存结构

第二节选择器

来回顾一下CSS经常使用的选择器

选择器	语法	描述
标签选择器	`E{css规则}`	以文档元素做为选择符
`ID`选择器	`#ID{css规则}`	`ID`做为选择符
类选择器	`E.className{css规则}`	`class`做为选择符
群组选择器	`E1,E2,E3{css规则}`	多个选择符应用一样的样式
后代选择器	`E F{css规则}`	元素`E`的任意后代元素`F`

选择器引擎规则($('字符串'))
- css选择器的规则
  - 标签选择器
  - id选择器
  - 类选择器
  - 混合选择器
- css3的选择器规则
- 状态和伪类（:even :odd :first :last :eq(index)）
- 属性（[attr=value]）
层级选择器:经过DOM的嵌套关系匹配元素
- jQuery层级选择器----包含选择器、子选择器、相邻选择器、兄弟选择器4种
- a.包含选择器：$("a b")在给定的祖先元素下匹配全部后代元素。(不受层级限制)
- b.子选择器：$("parent > child") 在给定的父元素下匹配全部子元素。
- c.相邻选择器：$("prev + next") 匹配全部紧接在prev元素后的next元素。
- d.兄弟选择器：$("prev ~ siblings") 匹配prev元素以后的全部sibling元素。

过滤选择器

基本过滤选择

选择器	说明	返回
`:first`	匹配找到的第1个元素	单个元素
`:last`	匹配找到的最后一个元素	单个元素
`:eq`	匹配一个给定索引值的元素	单个元素
`:even`	匹配全部索引值为偶数的元素	集合元素
`: odd`	匹配全部索引值为奇数的元素	集合元素
`:gt(index)`	匹配全部大于给定索引值的元素	集合元素
`:lt(index)`	匹配全部小于给定索引值的元素	集合元素
`:not`	去除全部与给定选择器匹配的元素	集合元素
`:animated`	选取当前正在执行动画的全部元素	集合元素
`focus`	选取当前正在获取焦点的元素	集合元素

内容过滤选择器

选择器	描述	返回
`:contains(text)`	选取含有文本内容为text的元素	集合元素
`:empty`	选取不包含子元素获取文本的空元素	集合元素
`:has(selector)`	选择含有选择器所匹配的元素的元素	集合元素
`:parent`	选取含有子元素或者文本的元素	集合元素

可见过滤选择器

选择器	描述	返回
`:hidden`	选择全部不可见的元素	集合元素
`:visible`	选取全部可见的元素	集合元素

属性过滤选择器

选择器	说明	返回
`[attribute]`	选取拥有此属性的元素	集合元素
`[attribute=value]`	选取属性值为`value`值的元素	集合元素
`[attribue^=value]`	选取属性的值以`value`开始的元素	集合元素
`[attribue$=value]`	选取属性的值以`value`结束的元素	集合元素

子元素过滤选择器

选择器	说明	返回
`:nth-child(index/even/odd)`	选取每一个父元素下的第index个子元素或者奇偶元素（`index`从`1`算起）	集合元素
`:first-child`	选取每一个元素的第一个子元素	集合元素
`:last-child`	选取每一个元素的最后一个子元素	集合元素

:nth-child()选择器是很经常使用的子元素过滤选择器，以下
- :nth-child(even)选择每一个父元素下的索引值是偶数的元素
- :nth-child(odd)选择每一个父元素下的索引值是奇数的元素
- :nth-child(2)选择每一个父元素下的索引值是2的元素
- :nth-child(3n)选择每一个父元素下的索引值是3的倍数的元素 (n从1开始)
表单对象属性过滤选择器

选择器	说明	返回
`:enabled`	选取全部可用元素	集合元素
`:disabled`	选取全部不可用元素	集合元素
`:checked`	选取全部被选中的元素（单选框、复选框）	集合元素
`:selected`	选取全部被选中的元素（下拉列表）	集合元素

表单选择器

选择器	说明
`:input`	选取全部`input` `textarea` `select` `button`元素
`:text`	选取全部单行文本框
`:password`	选取全部密码框
`:radio`	选取全部单选框
`:checkbox`	选取全部多选框
`:submit`	选取全部的提交按钮
`:image`	选取全部的图像按钮
`:reset`	选取全部的重置按钮
`:button`	选取全部的按钮
`:file`	选取全部的上传域
`:hidden`	选取全部的不可见元素

特定位置选择器
- :first
- :last
- :eq(index)
指定范围选择器
- :even
- :odd
- :gt(index)
- :lt(index)
排除选择器
- :not 非

第三节选择器优化

使用合适的选择器表达式能够提升性能、加强语义并简化逻辑。经常使用的选择器中，ID选择器速度最快，其次是类型选择器。
- 1. 多用ID选择器
- 1. 少直接使用class选择器
- 1. 多用父子关系，少用嵌套关系
- 1. 缓存jQuery对象
使用过滤器
- jQuery提供了2种选择文档元素的方式：选择器和过滤器
- 1. 类过虑器：根据元素的类属性来进行过滤操做。
  - hasClass(className)：判断当前jQuery对象中的某个元素是否包含指定类名，包含返回true，不包含返回false
- 1. 下标过滤器：精确选出指定下标元素
  - eq(index)：获取第N个元素。index是整数值，下标从0开始
- 1. 表达式过滤器
  - filter(expr)/(fn)：筛选出与指定表达式/函数匹配的元素集合。
  - 功能最强大的表达式过滤器，可接收函数参数，也能够是简单的选择器表达式
- 1. 映射 map(callback)：将一组元素转换成其余数组
- 1. 清洗 not(expr)：删除与指定表达式匹配的元素
- 1. 截取 slice(start,end)：选取一个匹配的子集
查找
- 向下查找后代元素
  - children():取得全部元素的全部子元素集合（子元素）
  - find():搜索全部与指定表达式匹配的元素(全部后代元素中查找)
- 查找兄弟元素 siblings()查找当前元素的兄弟

第四节代理对象属性和样式操做

代理对象属性和样式操做
- attr
- prop(通常属性值是boolean的值或者不用设置属性值，通常使用)
- css(最好不用，通常我用来作测试)
- addClass / removeClass
操做原生DOM的时候用的方式：一次只能操做一个
- 操做属性：setAttribute / getAttribute
- 操做样式：style.xx = value
- 操做类样式：className=''
- 获取DOM的子元素children属性
- DOM里面添加一个子元素appendChild()
操做jQuery代理对象的时候：批量操做DOM对象(全都是经过方法操做)
操做属性：attr()、prop()
- attr和prop区别：若是属性的值是布尔类型的值用prop操做反之attr
操做样式：css()
操做类样式：addClass() removeClass()
操做DOM子元素：children()
添加子元素：append()

第五节 jQuery中DOM操做

DOM是一种与浏览器、平台|语言无关的接口，使用该接口能够轻松的访问页面中的全部的标准组件
DOM操做的分类
- DOM Core
  - DOM core并不专属于JavaScript，任何支持DOM的程序均可以使用
  - JavaScript 中的getElementByID() getElementsByTagName() getAttribute() setAttribute()等方法都是DOM Core的组成部分
- HTML-DOM
- - HTML -DOM的出现比DOM-Core还要早，它提供一些更简明的标志来描述HTML元素的属性
CSS-DOM
- 针对CSS的操做。在JavaScript中，主要用于获取和设置style对象的各类属性，经过改变style对象的属性，使网页呈现不一样的效果

查找节点

查找属性节点 attr() 能够获取各属性的值

建立节点

$(html)：根据传递的标记字符串，建立DOM对象

插入节点

方法	说明
`append()`	向每一个匹配元素内部追加内容
`appendTo()`	颠倒`append()`的操做
`prepend()`	向每一个匹配元素的内容内部前置内容
`prependTo()`	颠倒`prepend()`的操做
`after()`	向每一个匹配元素以后插入内容
`insertAfter()`	颠倒`after()`的操做
`before()`	在每一个匹配元素以前插入内容
`insertBefore()`	颠倒`before()`的操做

删除节点
- jQuery提供了三种删除节点的方法 remove() detach() empty()
- remove()方法
  - 当某个节点用此方法删除后，该节点所包含的全部后代节点将同时被删除，用remove()方法删除后，仍是能够继续使用删除后的引用

detach()
- 和remove()方法同样，也是从DOM中去掉全部匹配的元素，与remove()不一样的是，全部绑定的事件、附加的数据等，都会被保留下来
empty()
- empty()方法并非删除节点，而是清空节点，它能清空元素中全部后代节点

复制节点
- 使用clone()方法来完成
- 在clone()方法中传递一个参数true，同时复制元素中所绑定的事件
替换节点
- jQuery提供相应的方法 replaceWidth()
样式操做
- 获取样式和设置样式 attr()
- 追加样式 addClass()
- 移除样式 removeClass()
- 切换样式
  - toggle()方法只要是控制行为上的重复切换（若是元素是显示的，则隐藏；若是元素原来是隐藏的，则显示）
  - toggleClass()方法控制样式上的重复切换（如何类名存在，则删除它，若是类名不存在，则添加它）
- 判断是否含有某个样式
  - hasClass()能够用来判断元素是否含有某个class,若有返回true 该方法等价于is()
设置和获取HTML、文本和值
- html()
  - 此方法相似JavaScript中innerHTML属性，能够用来读取和设置某个元素中的HTML内容
- text()方法
  - 此方法类型JavaScript中innerHTML，用来读取和设置某个元素中的文本内容

val()方法
- 此方法相似JavaScript中的value属性，用来设置获取元素的值。不管是文本框、下拉列表仍是单选框，均可以返回元素的值，若是元素多选，返回一个包含全部选择的值的数组

遍历节点
- children()方法
  - 该方法用来取得匹配元素的子元素集合
  - childre()方法只考虑子元素而不考虑其余后代元素

next()方法
- 该方法用于取得匹配元素后面紧邻的同辈元素
prev()方法
- 用于匹配元素前面紧邻的同辈元素
siblings()方法
- 用于匹配元素先后全部的同辈元素
parent()方法
- 得到集合中每一个元素的父级元素
parents()方法
- 得到集合中每一个元素的祖先元素

CSS DOM操做

CSS DOM技术简单的来讲就是读取和设置style对象的各类属性
用css()方法获取元素的样式属性，能够同时设置多个样式属性
CSS DOM中关于元素定位有几个经常使用的方法
- offset()方法
  - 它的做用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性，即top和left，他只对可见元素有效

position()方法
- 获取相对于最近的一个position()样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()同样，他返回的对象也包括两个属性，即top和left
scrollTop()方法和scrollLeft方法
- 这两个方法的做用分别是获取元素的滚动条距顶端的距离和距左侧的距离

一张图总结以上的位置关系(项目中很经常使用-必需要弄清楚)

第六节 jQuery动画

回顾上节

操做DOM
- a.什么是DOM：Document Object Model缩写，文档对象模型
- b.理解页面的树形结构
- c.什么是节点：是DOM结构中最小单元，包括元素、属性、文本、文档等。

1、建立节点

1.建立元素
- 语法：document.createElement(name);

var div = document.createElement("div");
document.body.appendChild(div);

$(html)：根据传递的标记字符串，建立DOM对象
2.建立文本

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);

var $div = = $("<div>DOM</div>");
$(body).append($div);

3.设置属性
- 语法：e.setAttrbute(name,value)

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");

var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);

2、插入内容

内部插入
- 向元素最后面插入节点：
  - append():向每一个匹配的元素内部追加内容
  - appendTo():把全部匹配的元素追加到指定元素集合中，$("A").append("B") 等效 $("B").appendTo("A")
- 向元素最前面插入节点：
  - prepend（）：把每一个匹配的元素内部前置内容
  - prependTo（）：把全部匹配的元素前置到另外一个指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")
外部插入
- after():在每一个匹配的元素以后插入内容
- before()：在每一个匹配想元素以前插入内容
- insertAfter()：将全部匹配的元素插入到另外一个指定的元素集合后面，$A.insert($B) 等效 $B.insertAfter($A);
- insertBefore()：将全部匹配的元素插入到另外一个指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A);

3、删除内容

移除
- remove():从DOM中删除全部匹配元素
清空
- empty():删除匹配的元素集合中全部子节点内容

4、克隆内容：建立指定节点副本

clone()
- 注意：若clone（true）则是包括克隆元素的属性，事件等

5、替换内容

replaceWith():将全部匹配的元素替换成指定的元素
replaceAll():用匹配的元素替换掉指定元素

注意：二者效果一致，只是语法不一样 $A.replaceAll($B) 等效于 $B.replaceWhith($A);

本节新知识

JavaScript语言自己不支持动画设计，必须经过改变CSS来实现动画效果

显隐动画

show():显示 hide():隐藏
- 原理：hide()经过改变元素的高度宽度和不透明度，直到这三个属性值到0
- show()从上到下增长元素的高度，从左到右增长元素宽度，从0到1增长透明度，直至内容彻底可见
- 参数：
  - show(speed,callback)
    - speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
    - callback: 动画完成时执行的方法
显示和隐藏式一对密不可分的动画形式
显隐切换
- toggle():切换元素的可见状态
  - 原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
  - 参数：
    - toggle(speed)
    - toggle(speed,callback)
    - toggle(boolean)
      - speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
      - easing：使用哪一个缓冲函数来过渡的字符串(linear/swing)
      - callback：动画完成时执行的方法
      - boolean:true为显示 false为隐藏

滑动

显隐滑动效果
- slideDown():滑动隐藏
- slidUp():滑动显示
- 参数:
  - slideDown(speed,callback)
  - slidUp(speed,callback)
显隐切换滑动
- slideToggle():显隐滑动切换
- 参数:
  - slidUp(speed,callback)

渐变：经过改变不透明度

淡入淡出
- fadeIn()
- fadeOut()
- 参数：
  - fadeIn(speed,callback)
  - fadeOut(speed,callback)
设置淡出透明效果
- fadeTo()⁭：以渐进的方式调整到指定透明度
- 参数：
  - fadeTo(speed,opacity,callback)
渐变切换:结合fadeIn和fadeOut
- fadeToggle()
- 参数:
  - fadeOut(speed,callback)
自定义动画：animate()
- 注意：在使用animate方法以前，为了影响该元素的top left bottom right样式属性，必须先把元素的position样式设置为relative或者absolute
- 中止元素的动画
  - 不少时候须要中止匹配正在进行的动画，须要使用stop()
  - stop()语法结构：stop([clearQueue],[gotoEnd]);
    - 都是可选参数，为布尔值
    - 若是直接使用stop()方法，会当即中止当前正在进行的动画
- 判断元素是否处于动画状态
  - 若是不处于动画状态，则为元素添加新的动画，不然不添加
    if(!$(element).is(":animated")){ //判断元素是否处于动画状态}
  - 这个方法在animate动画中常常被用到，须要注意
- 延迟动画
  - 在动画执行过程当中，若是你想对动画进行延迟操做，那么使用delay()
用animate模拟show():
- show: 表示由透明到不透明
- toggle: 切换
- hide:表示由显示到隐藏
动画方法总结

方法名	说明
`hide()`和`show()`	同时修改多个样式属性即高度和宽度和不透明度
`fadeIn()`和`fadeOut()`	只改变不透明度
`slideUp()`和`slideDown()`	只改变高度
`fadeTo()`	只改变不透明度
`toggle()`	用来代替`show()`和`hide()`方法，因此会同时修改多个属性即高度、宽度和不透明度
`slideToggle()`	用来代替`slideUp`和`slideDown()`方法，因此只能改变高度
`fadeToggle()`	用来代替`fadeIn()`和`fadeOut`方法，只能改变不透明度
`animate()`	属于自定义动画，以上各类动画方法都是调用了`animate`方法。此外，用`animate`方法还能自定义其余的样式属性，例如：`left` `marginLeft` `scrollTop`等

第七节 jQuery中的事件

事件对象的属性
- event.type：获取事件的类型
- event.target:获取到触发事件的元素
- event.preventDefault方法阻止默认事件行为
- event.stopPropagation()阻止事件的冒泡
- keyCode：只针对于keypress事件，获取键盘键数字按下回车，13
- event.pageX / event.pageY 获取到光标相对于页面的x坐标和y坐标
  - 若是没有jQuery，在IE浏览器中用event.x / event.y;在Firefox浏览器中用event.pageX / event.pageY。若是页面上有滚动条还要加上滚动条的宽度和高度
- event.clientX：光标对于浏览器窗口的水平坐标浏览器
- event.clientY：光标对于浏览器窗口的垂直坐标
- event.screenX：光标对于电脑屏幕的水平坐标电脑屏幕
- event.screenY：光标对于电脑屏幕的水平坐标
- event.which 该方法的做用是在鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中的按键 1表明左键 2表明中键 3表明右键
事件冒泡
- 什么是冒泡
  - 在页面上能够有多个事件，也能够多个元素影响同一个元素
  - 从里到外
  - 嵌套关系
  - 相同事件
  - 其中的某一父类没有相同事件时,继续向上查找
- 中止事件冒泡
  - 中止事件冒泡能够阻止事件中其余对象的事件处理函数被执行
  - 在jQuery中提供了stopPropagation()方法
- 阻止默认行为
  - 网页中元素有本身的默认行为，例如：单击超连接后会跳转、单击提交后表单会提交，有时须要阻止元素的默认行为
  - 在jQuery中提供了 preventDefault()方法来阻止元素的默认行为

事件捕获
- 事件捕获和冒泡是相反的过程，事件捕获是从最顶端往下开始触发
- 并不是全部的浏览器都支持事件捕获，而且这个缺陷没法经过JavaScript来修复。jQuery不支持事件捕获，如须要用事件捕获，要用原生的JavaScript

bind();绑定
- 为匹配元素绑定处理方法
- 须要给一个元素添加多个事件，事件执行同样时候
- one()：只执行一次
绑定特定事件类型方法：

|分类|方法名称|说明|

页面载入	`ready(fn)`	当`DOM`载入就绪能够绑定一个要执行的函数
事件绑定	`blind(type,[data],fn)`	为每一个匹配元素的特定事件绑定一个事件处理函数
事件绑定	`unblind()`	解除绑定
事件绑定	`on(events,[,selector[,]data],handler)`	在选择元素上绑定一个或者多个事件处理函数
事件绑定	`off()`	移除`on`绑定的事件
事件绑定	`delegate(selector,eventType,handler)`	为全部选择匹配元素附加一个或多个事件处理函数
事件绑定	`undelegate()`	移除绑定
事件动态	`live(type,fn)`	对动态生成的元素进行事件绑定
事件动态	`die(type,fn)`	移除`live()`绑定的事件
交互事件	`hover()`	鼠标移入移出
交互事件	`toggle(fn1,fn2,[fn3],[fn4])`	每单击后依次调用函数
交互事件	`blur(fn)`	触发每个匹配元素的`blur`事件
交互事件	`change()`	触发每个匹配元素的`change`事件
交互事件	`click()`	触发每个匹配元素的`click`事件
交互事件	`focus()`	触发每个匹配元素的`focus`事件
交互事件	`submit()`	触发每个匹配元素的`submit`事件
键盘事件	`keydown()`	触发每个匹配元素的`keydown`事件
键盘事件	`keypress()`	触发每个匹配元素的`keypress`事件
键盘事件	`keyup()`	触发每个匹配元素的keyup事件
鼠标事件	`mousedown(fn)`	绑定一个处理函数
鼠标事件	`mouseenter(fn)`	绑定一个处理函数
键盘事件	`mouseleave(fn)`	绑定一个处理函数
键盘事件	`mouseout(fn)`	绑定一个处理函数
键盘事件	`mouseover(fn)`	绑定一个处理函数
窗口操做	`resize(fn)`	绑定一个处理函数
窗口操做	`scroll(fn)`	绑定一个处理函数

第八节 jQuery与Ajax

Ajax简介 :
- Asynchronous Javascript And XML （异步的
  JavaScript和XML）
- 它并非一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所造成的结合体
Ajax优点与不足
- Ajax优点
  - 优秀的用户体验
    - 这是Ajax下最大的有点，能在不刷新整个页面前提下更新数据
  - 提升web程序的性能
    - 与传统模式相比，Ajax模式在性能上最大的区别在于传输数据的方式，在传统模式中，数据的提交时经过表单来实现的。Ajax模式只是经过XMLHttpRequest对象向服务器提交但愿提交的数据，即按需发送
  - 减轻服务器和带宽的负担
    - Ajax的工做原理至关于在用户和服务器之间加了一个中间层，似用户操做与服务器响应异步化。它在客户端建立Ajax引擎，把传统方式下的一些服务器负担的工做转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担
- Ajax的不足
  - 浏览器对XMLHttpRequest对象的支持度不足
  - 破坏浏览器前进、后退按钮的正常功能
  - 对搜索引擎的支持的不足
  - 开发和调试工具的缺少

建立一个Ajax请求

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是经过它来完成
建立ajax对象 var xhr = new XMLHttpRequest();
准备发送请求
- get / post
- - get
    - 传递的数据放在URL后面
    - 中文编码 encodeURI( '' );
    - 缓存在数据后面加上随机数或者日期对象或者……
  - post
    - 传递的数据放在send()里面，而且必定要规定数据格式
    - 没有缓存问题

enctype: "application/x-www-form-urlencoded"

url

是否异步

同步(false)：阻塞
异步(true)：非阻塞

正式发送请求

ajax请求处理过程

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    {
        alert( xhr.responseText );
    }
};

onreadystatechange ：当处理过程发生变化的时候执行下面的函数
readyState ：ajax处理过程
- 0：请求未初始化（尚未调用 open()）。
- 1：请求已经创建，可是尚未发送（尚未调用 send()）。
- 2：请求已发送，正在处理中（一般如今能够从响应中获取内容头）。
- 3：请求在处理中；一般响应中已有部分数据可用了，可是服务器尚未完成响应的生成。
- 4：响应已完成；您能够获取并使用服务器的响应了。
responseText ：请求服务器返回的数据存在该属性里面
status : http状态码

案例：ajax封装案例

//ajax请求后台数据
var btn =  document.getElementsByTagName("input")[0];
btn.onclick = function(){
    
    ajax({//json格式
        type:"post",
        url:"post.php",
        data:"username=poetries&pwd=123456",
        asyn:true,
        success:function(data){
            document.write(data);
        }
    });
}
//封装ajax
function ajax(aJson){
    var ajx = null;
    var type = aJson.type || "get";
    var asyn = aJson.asyn || true;
    var url = aJson.url;        // url 接收 传输位置
    var success = aJson.success;// success 接收 传输完成后的回调函数
    var data = aJson.data || '';// data 接收须要附带传输的数据
    
    if(window.XMLHttpRequest){//兼容处理
        ajx = new XMLHttpRequest();//通常浏览器
    }else
    {
        ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
    }
    if (type == "get" && data)
    {
        url +="/?"+data+"&"+Math.random();
    }
    
    //初始化ajax请求
    ajx.open( type , url , asyn );
    //规定传输数据的格式
    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //发送ajax请求（包括post数据的传输）
    type == "get" ?ajx.send():ajx.send(aJson.data);
    
    //处理请求
    ajx.onreadystatechange = function(aJson){
        
    if(ajx.readState == 4){
            
        if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
        {
            //请求成功处理数据
            success && success(ajx.responseText);
        }else{
            alert("请求出错"+ajx.status);
            
        }
    }
        
    };

jQuery中的Ajax [补充部分--来自锋利的jQuery]

jquery对Ajax操做进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON()，第2层使用频率很高

`load()`方法

load()方法是jquery中最简单和经常使用的ajax方法，能载入远程HTML代码并插入DOM中结构为：load(url,[data],[callback])
- 使用url参数指定选择符能够加载页面内的某些元素 load方法中url语法：url selector 注意：url和选择器之间有一个空格
传递方式
- load()方法的传递方式根据参数data来自动指定，若是没有参数传递，则采用GET方式传递，反之，采用POST
回调参数
- 必须在加载完成后才执行的操做，该函数有三个参数分别表明请求返回的内容、请求状态、XMLHttpRequest对象
- 只要请求完成，回调函数就会被触发

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //respnoseText 请求返回的内容
    //textStatus 请求状态 ：sucess、error、notmodified、timeout
    //XMLHttpRequest 
})

load方法参数

参数名称	类型	说明
`url`	`String`	请求`HTML`页面的`URL`地址
`data(可选)`	`Object`	发送至服务器的`key` / `value`数据
`callback(可选)`	`Function`	请求完成时的回调函数，不管是请求成功仍是失败

$.get()和$.post()方法

load()方法一般用来从web服务器上获取静态的数据文件。在项目中须要传递一些参数给服务器中的页面，那么可使用$.get()和$.post()或$.ajax()方法

注意：$.get()和$.post()方法是jquery中的全局函数
$.get()方法
- $.get()方法使用GET方式来进行异步请求
- 结构为：$.get(url,[data],callback,type)
  - 若是服务器返回的内容格式是xml文档，须要在服务器端设置Content-Type类型代码以下：header("Content-Type:text/xml:charset=utf-8") //php
$.get()方法参数解析

参数	类型	说明
`url`	`String`	请求`HTML`页的地址
`data(可选)`	`Object`	发送至服务器的`key`/ `value` 数据会做为`QueryString`附加到请求URL中
`callback(可选)`	`Function`	载入成功的回调函数（只有当`Response`的返回状态是success才调用该方法）
`type(可选)`	`String`	服务器返回内容的格式，包括`xml`、`html`、`script`、`json`、`text`和`_default`

$.post()方法
- 它与$.get()方法的结构和使用方式相同，有以下区别
- - GET请求会将参数跟张乃URL后进行传递，而POST请求则是做为Http消息的实体内容发送给web服务器，在ajax请求中，这种区别对用户不可见

总结

使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，若是还须要复杂的Ajax程序，就须要用到$.ajax()方式

$.ajax()方法

$.ajax()方法是jquery最底层的Ajax实现，它的结构为$.ajax(options)
该方法只有一个参数，但在这个对象里包含了$.ajax()方式所须要的请求设置以及回调函等信息，参数以key / value存在，全部参数都是可选的
$.ajax()方式经常使用参数解析

参数	类型	说明
`url`	`String`	(默认为当前页地址)发送请求的地址
`type`	`String`	请求方式（`POST`或`GET`）默认为`GET`
`timeout`	`Number`	设置请求超时时间（毫秒）
`dataType`	`String`	预期服务器返回的类型。可用的类型以下 xml:返回`XML`文档，可用`jquery`处理 html:返回纯文本的`HTML`信息，包含的`script`标签也会在插入`DOM`时执行 script：返回纯文本的`javascript`代码。不会自动缓存结果，除非设置`cache`参数。注意：在远程请求时，全部的`POST`请求都将转为`GET`请求 json:返回`JSON`数据 jsonp:`JSONP`格式，使用`jsonp`形式调用函数时，例如：`myurl?call back=?,jquery`将自动替换后一个`？`为正确的函数名，以执行回调函数 text:返回纯文本字符串
`beforeSend`	`Function`	发送请求前能够修改`XMLHttpRequest`对象的函数，例如添加自定义`HTTP`头。在`beforeSend`中若是返回`false`能够取消本次`Ajax`请求。`XMLHttpRequest`对象是惟一的参数 function(XMLHttpRequest){ `this`;//调用本次`Ajax`请求时传递的`options`参数 }
`complete`	`Function`	请求完成后的回调函数（请求成功或失败时都调用）参数：`XMLHttpRequest`对象和一个描述成功请求类型的字符串 function(XMLHttpRequest,textStatus){ `this`;//调用本次Ajax请求时传递的`options`参数 }
`success`	`Function`	请求成功后调用的回调函数，有两个参数 (1)由服务器返回，并根据`dataTyppe`参数进行处理后的数据 (2)描述状态的字符串 `function`(data,textStatus){ //`data`多是`xmlDoc、``jsonObj`、`html`、`text`等<br>         `this`;//调用本次`Ajax`请求时传递的`options`参数 }
`error`	`Function`	请求失败时被调用的函数
`global`	`Boolean`	默认为`true`。表示是否触发全局`Ajax`事件，设置为`false`将不会触发。`AjaxStart`或`AjaxStop`可用于控制各类`Ajax`事件

第九节插件

什么是插件
- 插件(Plugin)也称为jQuery的扩展。以jQuery核心代码为基础编写的符合必定规范的应用程序。经过js文件的方式引用。
插件分为哪几类
- UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等
引入插件的步骤
- 引入jquery.js文件，并且在因此插件以前引入
- 引入插件
- 引入插件相关文件，好比皮肤、中文包
如何自定义插件：
- 插件形式分为3类：
  - 封装对象方法插件
  - 封装全局函数插件
  - 选择器插件(相似于.find())
自定义插件的规范（解决各类插件的冲突和错误，增长成功率）
- 命名：jquery.插件名.js
- 全部的新方法附加在jquery.fn对象上面，全部新功能附加在jquery上
- 全部的方法或插件必须用分号结尾，避免出问题
- 插件必须返回jQuery对象，便于链式连缀
- 避免插件内部使用$，若是要使用，请传递jQuery($并非总等于jQuery，另外其余js框架也可能使用$)
- 插件中的this应该指向jQuery对象
- 使用this.each()迭代元素
自定义插件案例
- 为了方便用户建立插件，jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()
- jQuery.extend()：建立工具函数或者是选择器
- jQuery.fn.extend()：建立jQuery对象命令（fn至关于prototype的别名）
jQuery官方提供的插件开发模板

;(function($){
    $.fn.plugin=function(options){
        var defaults = {
            //各类参数 各类属性
        }
        var options = $.extend(defaults,options);

        this.each(function(){
            //实现功能的代码
        });

        return this;
    }
})(jQuery);

自定义jQuery函数：

(function($){
    $.extend({
        test: function(){
            alert("hello plugin");
        }
    })
    })(jQuery);

自定义jQuery命令：

形式1：

(function($){
    $.fn.extend({
        say : function(){
         alert("hello plugin");
    }
    })
})(jQuery);

形式2：

(function($){
    $.fn.say = function(){
        alert("hello plugin");
    };
    
})(jQuery);

附录一 jQuery各个版本新增的一些经常使用的方法

jQuery1.3新增经常使用的方法

方法	说明
`.closest()`	从元素自己开始，逐级向上级元素匹配，并返回最早匹配的祖先元素
`die()`	从元素中删除先前用`live()`方法绑定的全部的事件
`live()`	附加一个事件处理器到符合目前选择器的全部元素匹配

jQuery1.4新增经常使用的方法

方法	说明
`.first()`	获取集合中第一个元素
`last()`	获取集合中最后一个元素
`has(selector)`	保留包含特定后代的元素，去掉那些不含有指定后代的元素
`detach()`	从`DOM`中去掉全部匹配的元素。`detach()`和`remov()`同样，除了`detach()`保存了全部`jquery`数据和被移走的元素相关联。当须要移走一个元素，不久又将该元素插入`DOM`时，这种方法颇有用
`delegate()`	为全部选择器匹配的元素附加一个处理一个或多个事件
`undelegate()`	为全部选择器匹配的元素删除一个处理一个或多个事件

jQuery1.6新增经常使用的方法

方法	说明
`prop(proptyName)`	获取在匹配元素集合中的第一个元素的属性值
`removeProp(proptyName,value)`	为匹配的元素删除设置的属性
`:focus`	选择当前获取焦点的元素

附录二 jQuery性能优化

性能优化
- 使用最新版的jQuery类库
- 使用合适的选择器
  - $(#id)
    - 使用id来定位DOM元素是最佳的方式，为了提升性能，建议从最近的ID元素开始往下搜索
  - $("p") , $("div") , $("input")
    - 标签选择器性能也不错，它是性能优化的第二选择。由于jQuery将直接调用本地方法document.getElementsByTagName()来定位DOM元素
  - $(".class")
    - 建议有选择性的使用
  - $("[attribute=value]")
    - 对这个利用属性定位DOM元素，本地JavaScript并无直接实现。这种方式性能并非很理想。建议避免使用。
  - $(":hidden")
    - 和上面利用属性定位DOM方式相似，建议尽可能不要使用
  - 注意的地方
    - 尽可能使用ID选择器
    - 尽可能给选择器指定上下文

缓存对象
- 若是你须要在其余函数中使用jQuery对象，你能够把他们缓存在全局环境中
数组方式使用jQuery对象
- 使用jQuery选择器获取的结果是一个jQuery对象。在性能方面，建议使用for或while循环来处理，而不是$.each()

事件代理
- 每个JavaScript事件（如：click、mouseover）都会冒泡到父级节点。当咱们须要给多个元素调用同个函数时这点颇有用。好比，咱们要为一个表单绑定这样的行为：点击td后，把背景颜色设置为红色
- - $("#myTable td").click(function(){$(this).css("background","red");});
  - 假设有100个td元素，在使用以上的方式时，绑定了100个事件，将带来性能影响
  - 代替这种多元素的事件监听方法是，你只需向他们的父节点绑定一次事件，而后经过event.target获取到点击的当前元素
    - $("#myTable td").click(function({$(e.target).css("background","red")});
    - e.target捕捉到触发的目标

将你的代码转化成jQuery插件
- 它可以使你的代码有更好的重用性，而且可以有效的帮助你组织代码

使用join()方法来拼接字符串
- 也许你以前使用+来拼接字符串，如今能够改了。它确实有助于性能优化，尤为是长字符串处理的时候
合理使用HTML5和Data属性
- HTML5的data属性能够帮助咱们插入数据，特别是后端的数据交换。jQuery的Data()方法有效利用HTML5的属性
  - 例如：<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>
  - 为了读取数据，你须要使用以下代码
    - $("#dl').data("role';//page)
    - $("#dl').data("lastValue';//43)
    - $("#dl').data("options';//john)

尽可能使用原生的JavaScript方法
压缩JavaScript代码
- 一方面使用Gzip；另外一方面去除JavaScript文件里面的注释、空白

附录三经常使用的jQuery代码片断

附录四常见CND加速服务

附录五 jQuery的一些资源

速查手册
jQuery插件
- 基础经常使用
- 更多插件-动效库整理
- - 插件动效库

扩展阅读

jQuery源码分析系列

参考

锋利的jQuery

本文md源文件