jQuery

jQuery简介

jQuery概述

jQuery采用模块化开发
jQuery是一个JavaScript（JS）库
jQuery极大简化了JavaScript（JS）编程且易学习
jQuery的口号：写的少做的多（write less do more）
jQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言
jQuery字面意思是JavaScript和查询（Query），即用于辅助开发JavaScript的库

jQuery功能

CSS
AJAX
Utilities
HTML 元素选取
HTML 元素操作
HTML 事件函数
HTML DOM 遍历和修改
JavaScript 特效和动画操作

jQuery优点

jQuery当前非常流行且拥有很好的可扩展性
jQuery是免费、开源的，使用了MIT许可协议
jQuery可使用户的html页面保持代码和内容分离
jQuery目前兼容所有主流浏览器, 包括Internet Explorer 6
jQuery目前被Google、Microsoft、IBM、Netflix几大公司所使用
jQuery的文档说明很全且各种应用很详尽，同时还有很多成熟插件可供选择
jQuery使用户更方便地处理HTML、events、实现动画效果、为网站提供AJAX交互
jQuery的语法设计可使得开发更加便捷（操作文档对象、提供API让开发者编写插件）

jQuery缺点

jQuery插件兼容性不是太好
jQuery不能向后兼容即每个新版本不能兼容早期版本
jQuery核心代码库对动画和特效的支持相对较差，可用单独的jQuery UI项目和插件来弥补
jQuery在同一页面使用多个插件时很容易发生冲突，尤其是插件依赖了相同事件或selector

jQuery历史

jQuery的第一个版本在2006年1月发布

jQuery前置

HTML
C S S
JavaScript（须重点掌握）

jQuery下载

jQuery需要去官网下载
- jQuery官网
- jQuery下载步骤如下所示：
```
graph LR
官网 --> jQuery选择版本 --> 鼠标右键 --> 另存为
```
jQuery的源代码版本有开发版、精简版
- Production version 精简版，用于实际网站中（已精简压缩，不可读，.min.js文件）
- Development version开发版，用于测试和开发（未压缩，是可以读的代码，.js文件）

jQuery安装

jQuery可用离线方式和在线方式安装
- 百度、又拍云、新浪、谷歌、微软的服务器都存有 jQuery
- 国内建议用百度、新浪等国内地址，国外建议用谷歌、微软等国外地址
- 离线方式指下载好jQuery源代码文件，然后通过<script>标签引入到代码中
- 在线方式指从CDN（内容分发网络）载入官网源代码, 如：从 Google 中加载 jQuery

jQuery的离线方式复杂但稳定（可不联网），jQuery的在线方式简单但波动（必须联网）

离线方式安装格式：jQuery使用精简版的代码

<!--src指离线jQuery的源代码文件地址-->
<head>  
    <script src="jquery-1.10.2.min.js"></script>  
</head>

在线方式安装格式：jQuery使用谷歌的CDN地址

<!--src指在线jQuery的源代码文件地址及jQuery版本号-->
<head> 
    <script 
        type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"
        rel="external nofollow" >
    </script> 
</head>

在线方式安装格式：jQuery使用微软的CDN地址

<!--src指在线jQuery的源代码文件地址及jQuery版本号-->
<head>
    <script 
        type="text/javascript" 
        src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js" 
        rel="external nofollow" >
    </script> 
</head>

在线方式安装格式：jQuery使用百度的CDN地址

<!--src指在线jQuery的源代码文件地址及jQuery版本号-->
<head>  
    <script 
        src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" 
        rel="external nofollow" >  
    </script>  
</head>

在线方式安装格式：jQuery使用新浪的CDN地址

<!--src指在线jQuery的源代码文件地址及jQuery版本号-->
<head>  
    <script 
        src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"
        rel="external nofollow" >  
    </script>  
</head>

在线方式安装格式：jQuery使用又拍云的CDN地址

<!--src指在线jQuery的源代码文件地址及jQuery版本号-->
<head>  
    <script 
        src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"
        rel="external nofollow" >  
    </script>  
</head>

jQuery支持

jQuery2 以上的版本不支持 IE6、IE7、IE8

jQuery1.9 版本支持 IE6、IE7、IE8 或者通过条件注释支持 IE6、IE7、IE8

注释代码如下所示：

<!--[if lt IE 9]> 
  <script src="jquery-1.9.0.js"></script> 
<![endif]--> 
<!--[if gte IE 9]><!--> 
  <script src="jquery-2.0.0.js"></script> 
<!--<![endif]-->

jQuery注意

jQuery的离线方式将下载的文件放在网页的同一目录下可便于调用它
jQuery的离线方式中的<scirpt>元素中的 type="text/javascript" 可不写
- JavaScript 是 HTML5（H5）及所有现代浏览器的默认脚本语言，所以可不写 type 属性
jQuery的在线方式中的国内站点不大推荐用Google的CDN来获取
- Google 产品在中国很不稳定，所以国内用户不建议使用
jQuery的在线方式中的优势是减少网页记载时间、提高网页加载速度
- 用户访问其他站点时已加载过jQuery，当访问您的站点时会从缓存中加载jQuery以便减少加载时间
- 大多数 CDN 都可确保当用户向其请求文件时会从离用户最近的服务器上返回响应，从而提高加载速度
jQuery当前的使用版本查看命令为$.fn.jquery
- 打开浏览器 Console 窗口，输入 $.fn.jquery 命令查看当前 jQuery 使用版本

jQuery扩展

jQuery语法

jQuery语法逻辑

jQuery语法来源于 XPath 与 CSS 选择器语法的组合
jQuery语法通过选取 HTML 元素，并对选取的元素执行某些操作

jQuery基础语法

$(selector).action()
- 通过美元符号（$）定义 jQuery
- 通过选择符（selector）"查询"和"查找" HTML 元素
- 通过操作方法（action()）执行对选中的元素的操作
- 选择器主要分为标签选择器（标签名）、ID选择器（id名）、类选择器（类名）

jQuery语法实例

$("p").hide() 隐藏所有段落
$(this).hide() 隐藏当前元素
$("#test").hide() 隐藏所有 id="test" 的元素
$("p .test").hide() 隐藏所有 class="test" 的段落

jQuery文档就绪事件

jQuery文档就绪事件有完整和简洁写法，两者等效，可选择喜欢的方式
jQuery简洁写法：$(function(){ // 开始写 jQuery 代码... });
jQuery完整写法：$(document).ready(function(){ // 开始写 jQuery 代码... });
- 文档就绪事件可防止文档在完全加载（就绪）之前运行 jQuery 代码
- 若在文档未完全加载前就运行函数操作可能失败，如：试图隐藏一个不存在元素、获得未完全加载图像大小

jQuery事件

jQuery事件概述

jQuery是专门为事件处理特别设计的
jQuery事件指页面对不同访问者的响应叫做事件（如：选取单选按钮）
jQuery事件处理程序指当 HTML 页面中发生某些事件时所调用的具体方法
jQuery事件中经常使用术语触发或激发或发生，如："当按下按键时触发keypress事件"

jQuery常见事件

jQuery常见DOM事件有鼠标事件、键盘事件、表单事件、文档/窗口事件
- 键盘事件：keypress、keydown、keyup
  - keydown表示在键盘上按下某键时发生
  - Keydown一直按着则会不断触发（opera浏览器除外），返回的是键盘代码
  - keypress表示在键盘上按下一个按键
  - Keypress按下shift、alt、ctrl并不会产生字符，所以监听无效
  - Keypress只有按下能在屏幕上输出字符的按键时keypress事件才会触发
  - Keypress一直按着则会不断触发。并产生一个字符时发生, 返回的是ASCII码
  - keyup表示松开某一个按键时触发，与keydown相对，返回键盘代码
- 表单事件：submit、change、focus、blur
- 文档/窗口事件：load、resize、scroll、unload
- 鼠标事件：click、dblclick、mouseenter、mouseleave、hover

jQuery事件方法

jQuery中大多数DOM事件都有一个等效的jQuery方法
jQuery事件的编码规则是先在页面中指定一个点击事件，然后用事件函数具体实现

jQuery常用事件方法

$(document).ready()方法允许我们在文档完全加载完后执行函数，相当于程序入口
click()方法，当按钮点击事件被触发时调用一个函数，该函数在用户点击HTML元素时执行
- click()实例代码
```
$("p").click(function(){$(this).hide();}); // 单击p元素后隐藏当前p标签
```
dblclick()方法，当双击元素时会发生dblclick事件或发生dblclick事件时规定运行的函数
- dbclick()实例代码
```
$("p").dblclick(function(){$(this).hide();}); // 双击p元素后隐藏当前p标签
```
mouseenter()方法，当鼠标指针穿过元素时发生mouseenter事件或发生事件规定运行的函数
- mouseenter()实例代码
```
$("#p1").mouseenter(function(){alert("You entered p1!");});
```
mouseleave()方法，当鼠标指针离开元素时发生mouseleave事件或发生事件规定运行的函数
- mouseleave()实例代码
```
$("#p1").mouseleave(function(){alert("Bye! You now leave p1!");});
```
mousedown()方法，当鼠标移到元素上并按下鼠标按键时发生mousedown事件或发生规定运行的函数
- mousedown()实例代码
```
$("#p1").mousedown(function(){alert("Mouse down over p1!");});
```
mouseup()方法，当在元素上松开鼠标按钮时发生mouseup事件或发生事件规定运行的函数
- mouseup()实例代码
```
$("#p1").mouseup(function(){alert("Mouse up over p1!");});
```
hover()方法，用于模拟光标悬停事件，当鼠标移到元素上触发指定的第一个函数(mouseenter),当鼠标移出元素时触发指定的第二个函数(mouseleave)
- hover()实例代码
```
$("#p1").hover(function(){
   alert("You entered p1!");},
   function(){
   alert("Bye! You now leave p1!");  
});
```
focus()方法，当元素获得焦点时发生focus事件或发生规定运行的函数，当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
- focus()实例代码
```
$("input").focus(function(){$(this).css("background-color","#cccccc");});
```
blur()方法，当元素失去焦点时发生 blur 事件或规定当发生 blur 事件时运行的函数
- blur()实例代码
```
$("input").blur(function(){$(this).css("background-color","#ffffff");});
```

jQuery选择器

jQuery选择器概述

jQuery选择器用于对HTML元素组或单个元素进行操作，都以美元符号开头：$()
jQuery选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素
jQuery选择器既可基于已存在的CSS选择器（标签、id、class），也可有自定义的选择器

jQuery元素选择器

jQuery元素选择器通过元素名选取元素，如：$("p")【选取标签名为p的元素】

jQuery的id选择器

jQuery的id选择器通过元素id属性选取元素，如：$("#p")【选取id属性值为p的元素】
jQuery的id选择器页面中元素的id要求必须唯一，因为是通过唯一id进行唯一元素的选择

jQuery的类选择器

jQuery类选择器通过元素class属性选取元素，如：$(".p")【选取class属性值为p的元素】

jQuery的CSS选择器

jQuery的CSS选择器用于改变 HTML 元素的 CSS 属性

jQuery的CSS选择器实例代码

$("p").css("background-color","red"); // 把所有p元素的背景颜色更改为红色

独立文件中使用jQuery函数

jQuery单独文件（.js）适用于网站包含许多页面
jQuery单独文件（.js）使得jQuery 函数易于维护
jQuery可内嵌在HTML中，但建议将其以单独JS文件保存（通过 src 属性来引用文件）

独立文件中使用jQuery函数代码示例：

<head> 
    <script 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
        rel="external nofollow" >  
    </script>  
    <script src="MyJquery.js"></script>  
</head>

jQuery选择器的表格

前端框架：jQuery

jQuery

jQuery简介

jQuery语法

jQuery事件

jQuery选择器