JQuery基础

0814 笔记

JQuery基础

JQuery是JavaScript开发的js（函数）库，他并不是一个传统意义上的框架
+ 库： 已封装定义好的函数库，只需要学习使用（函数）
+ 框架： 根据程序开发的设计模式设计的编码规范，需要在框架基础上进行开发。
+ jQuery也是个开源项目

jQuery简介

1. jQuery极大的简化了JavaScript编程
2. jQuery很容易学习
3. 提供了良好的扩展接口
   
   • 在学习jQuery之前需要先掌握HTML、css、JavaScript的基础知识
     

     jquery的核心理论 write less do more

jQuery库包含的内容

1. HTML 元素获取
2. HTML 元素操作
3. CSS 操作
4. HTML事件函数
5. JavaScript特效与动画
6. HTML DOM的遍历和修改
7. AJAX
8. Utilties

为什么要使用jQuery？

• 几乎所有的公司都在使用（Google、Microsoft、IBM…）

• jQuery团队知道JS在不同的浏览器中存在大量的兼容问题，jQuery兼容所有的主流浏览器，甚至包括IE6

  1. jQuery 1.x的版本支持所有浏览器，包括IE6
  2. jQuery 2.x版本不再支持IE8及以下的浏览器（ie9开始兼容）
  3. jQuery 3.x版本支持ECMA2015（ES6），从ie9开始兼容

jQuery 的安装

官网：jquery.com
jquery中文网 www.jquery123.com
+ jquery的版本
+ Production version - 用于生产环境，已被精简（压缩）
+ Development version - 用户测试和开发（代码具有可读性）

• 官网下载
• npm下载
• 使用bower
• 使用CDN

CDN(Content Delivery Network) 内容分发网络

Jquery的基本语法

jquery语法是通过选取HTML元素，并对选取的元素执行某些操作

基础语法：$(selector).action()

• 美元符号是定义jQuery（本质上是同一个函数）
• 选择器(selector)’查询’和’查找’HTML元素
• jQuery的action()执行对元素的操作

文档就绪事件

$(document).ready(function(){
//jQuery methods go here …
});

$(function(){
//jQuery methods go here …
});

jQuery 的文档就绪事件可以写多个，并不是window.onload。执行速比window.onload要快，在body内容加载完毕后执行

jQuery使用的文档就绪事件是DOMContentLoaded
javascript
//自定义文档就绪事件
function ready(){
if(document.addEventListener){
document.addEvent.Listener('DOMContentLoaded',function(){
document.removeEventListener('DOMContentLoaded',arguments.callee);
});
}else if(document.attachEvent){
document.attachEvent('onreadystatechange'),function(){
if(document.readyState == 'complete'){
document.detachEvent('onreadystatechange',arguments.callback);
callback();
}
});
}
}


• 选择所有元素
  element 标签选择器
  class 类选择器
  id id选择器
  ， 分组选择器
  selector selector 后代选择器
  selector>selector 子代选择器
  selector+selector 兄弟选择器
  selector~selector 同代选择器

通过jQuery选择到的所有元素，都会被封装在一个类数组对象中，我们把这个类数组对象叫做jQuery对象

jQuery对象无法使用DOM的属性和方法，加上下标之后就变成DOM对象，但是不推荐使用

基本筛选器

筛选器 概述 :first 选择第一个元素 :last 选择最后一个元素 :not(:selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :eq(index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于于给定索引值的元素 :lang(languagae) 选择指定语言的所有元素 :header 匹配如 h1, h2, h3之类的标题元素 :animated 匹配所有正在执行动画效果的元素 :focus 匹配当前获取焦点的元素 :root 选择该文档的根元素 :target 选择由文档URI的格式化识别码表示的目标元素 :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :has(selector) 匹配含有选择器所匹配的元素的元素 :parent 匹配含有子元素或者文本的元素 :hidden 匹配所有不可见元素，或者type为hidden的元素 :visible 匹配所有的可见元素 [attribute] 匹配包含给定属性的元素 [attribute=value] 匹配给定的属性是某个特定值的元素 [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 [attribute^=value] 匹配给定的属性是以某些值开始的元素 [attribute$=value] 匹配给定的属性是以某些值结尾的元素 [attribute*=value] 匹配给定的属性是以包含某些值的元素 [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用 :first-child 匹配所给选择器( :之前的选择器)的第一个子元素 :last-child 匹配最后一个子元素 :first-of-type 结构化伪类，匹配E的父元素的第一个E类型的孩子 :last-of-type 结构化伪类，匹配E的父元素的最后一个E类型的孩子 :nth-child(num) 匹配其父元素下的第N个子或奇偶元素 :nth-last-child(n even :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素 :input 匹配所有 input, textarea, select 和 button 元素 :text 匹配所有的单行文本框 即type=”text” :password 匹配所有密码框 即type=”password” :radio 匹配所有单选按钮 :checkbox 匹配所有复选框 :submit 匹配所有提交按钮 :image 匹配所有图像域 :reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文件域

jQuery事件

• jQuery是为事件处理特别设计的
• 页面对不同的访问者的响应叫事件
• 事件处理程序指的是当HTML中发生某些事件时调用的方法

鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload

事件绑定

bind()

bind()方法为被选取玄素添加一个或多个事件处理程序，并规定事件发生时运行的函数

该函数在jQuery3.0被移除，替代它的是on()函数,on()函数的语法与bind一致

语法：(‘selector′).bind(type,[data],fn);//[]表示可以有，可以没有；|表示或者；多个事件绑定语法：(‘selector’).bind({
event:fn,
event:fn,
event:fn
});

事件处理函数中this的指向

this 在jQuery事件处理函数中指向目标源对象（DOM对象）

将DOM对象封装成jQuery对象

语法 $(DOMElement)

未来元素的事件绑定

delegate()方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

使用delegate()方法的事件处理程序适用于当前或未来的元素(比如脚本创建的元素)

语法：delegate(selector,[type],[data],fn);

该方法在就去3.0被移除，jquery建议使用on()代替

• 使用on()函数给未来时间绑定事件
  语法： (‘selector′).on(‘type′,′selector′,fn);给未来元素绑定多个事件(‘selector’).on({
  event:fn,
  event:fn,
  event:fn
  },’selector’);

一次性事件绑定

$(‘selector’).one()函数
语法：one(‘type’,fn);

hover

hover()函数给元素绑定两个事件
语法：
$(‘selector’).hover(function(){

},function(){

});

error事件

当元素遇到错误(没有正确的载入)时，发生error事件

error()方法触发error事件，或规定当发生error事件时运行的函数

该方法已经在jQuery3.0被删除

语法：
$(‘selector’).error([data],fn);

其他事件

事件 概述 blur([[data],fn]) 当元素失去焦点时触发 blur 事件 change([[data],fn]) 当元素的值发生改变时，会发生 change 事件 click([[data],fn]) 触发每一个匹配元素的click事件 dblclick([[data],fn]) 当双击元素时，会发生 dblclick 事件 focusin([data],fn) 当元素获得焦点时，触发 focusin 事件 focusout([data],fn) 当元素失去焦点时触发 focusout 事件 keydown([[data],fn]) 当键盘或按钮被按下时，发生 keydown 事件 keypress([[data],fn]) 当键盘或按钮被按下时，发生 keypress 事件 keyup([[data],fn]) 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上 mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件 mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用 mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用 mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件 mouseout([[data],fn]) 当鼠标指针从元素上移开时，发生 mouseout 事件 mouseover([[data],fn]) 当鼠标指针位于元素上方时，会发生 mouseover 事件 mouseup([[data],fn]) 当在元素上放松鼠标按钮时，会发生 mouseup 事件 resize([[data],fn]) 当调整浏览器窗口的大小时，发生 resize 事件 scroll([[data],fn]) 当用户滚动指定的元素时，会发生 scroll 事件 select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件 submit([[data],fn]) 当提交表单时，会发生 submit 事件 unload([[data],fn]) 在当用户离开页面时，会发生 unload 事件 show([speed,[easing],[fn]]) 显示隐藏的匹配元素 hide([speed,[easing],[fn]]) 隐藏显示的元素 toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件 slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数 slideUp([speed,[easing],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数 slideToggle([speed],[easing],[fn]) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数 fadeIn([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数 fadeOut([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数 fadeTo([[speed],opacity,[easing],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数 fadeToggle([speed,[easing],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数 stop([clearQueue],[jumpToEnd]) 停止所有在指定元素上正在运行的动画 delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目

• Tips1：focusin事件跟focus事件、focusout与blur事件区别在于，前者可以在父元素上检测子元素获取焦点的情况。
• Tips2：keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
• Tips3：mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
  +Tips4：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
• Tips5：具体来说，当发生以下情况时，会发出 unload 事件：
  
  • 点击某个离开页面的链接
  • 在地址栏中键入了新的 URL
  • 使用前进或后退按钮
  • 关闭浏览器
  • 重新加载页面

• Tips6：

  • speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

  • fn:在动画完成时执行的函数，每个元素执行一次。