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:在动画完成时执行的函数，每个元素执行一次。