20180706 jQuery 之温故而知新

---

功能涵盖

---

1. HTML 元素选取和操作
2. HTML 事件函数 ：包括a.鼠标事件，b.键盘事件，c.表单事件和 d.文档/窗口事件。
3. HTML DOM 遍历和修改，包括祖先，后代，同胞，过滤。
4. CSS 操作
5. JS 动画和特效包括：a.隐藏和显示，b.淡入淡出，c.滑动，d.动画和停止动画，e.方法链
6. AJAX 请求

---

注意

---

安装

使用 BootCDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势： 许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

//BootCDN:
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
//百度 CDN:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//又拍云 CDN:
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
//新浪 CDN:
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
//Microsoft CDN:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

// 版本兼容IE 处理，IE 9 之前不能使用2.0.0
<!--[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]-->

易忽略的细节

1.jQuery 入口函数与 JavaScript 入口函数的区别：

// jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});



// JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
window.onload = function () {
    // 执行代码
}

2.load() 方法在 jQuery 版本 1.8 中已废弃。
3.unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。
4. DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"

5.属性操作

attr 和 prop 的区别介绍：
<a href="http://runoob.com" num="2"></a>

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法或者attr 方法。
var href = $("a").prop("href");

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
var num = $("a").attr("num");

6.attr()的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
允许我们对原始值进行逻辑操作后，返回期望的值来更新属性值。

7.toggleClass() - 对被选元素进行添加/删除类的切换操作

.shadow{
  width:100vw;
  height:100vh;
  background:rgba(200,200,200,.8);
}
<a id="go" class="shadow"></a>
$("#go").toggleClass("shadow");

8.css() 可以传 json 对象，设置多个css属性。
9.获取元素尺寸，对盒子模型不同程度尺寸的提取。
10.通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
11.AJAX

//将请求结果放入选中的元素中
$(selector).load(URL,data,callback);
//将请求结果放入指定元素中
$(selector).load(URL+selector2,data,callback);
// data = {}传入请求参数
$(selector).load(URL+selector2,data,callback);
// callback = function(responseTxt,statusTxt,xhr)){}，responseTxt是请求结果，statusTxt是响应状态，xhr是请求对象。
$(selector).load(URL,data,callback);

//GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
$.get(URL,callback);
//POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.post(URL,data,callback);

12.noConflict() 释放对$标识符的控制，避免与其他框架的冲突，返回一个jquery对象，可以用一个变量接收，然后再使用。
13.jsonp 是json的一种使用模式，实现跨域请求。

// url 用占位符将回调函数传到服务器 url="http://www.baidu.com/jsoncallback=?"
$.getJson(url,function(data){})

14.从动态粒子效果 学习插件。

1.函数即对象 2.画布 canvas 3.几何算法

***** **实用插件列表** ***

1. jQuery Validate 用于表单验证
2. jQuery Accordion 用于创建折叠菜单
3. jQuery Autocomplete 用于根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择
4. jQuery Growl 消息提醒
5. jQuery Password Validation 密码验证,可以评价密码。
6. jQuery Prettydate
7. jQuery Tooltip 取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可
8. jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。
9. jQuery qrcode 提供生成二维码 的工具。

//  jQuery Validate 

//  jQuery Accordion
//  jQuery Autocomplete

//  jQuery Growl
//  jQuery Password Validation
//  jQuery Prettydate 
//  jQuery Tooltip
//  jQuery Treeview

//  jQuery 
<script src="jquery.js"></script>
// https://github.com/jeromeetienne/jquery-qrcode
<script src="jquery.qrcode.min.js"></script>
<script>
$("#qrcode").qrcode({width:50,height:50,text:"www.baidu.com"});//默认使用canvas渲染
$("#qrcode").qrcode({width:50,height:50,render:"table",text:"www.baidu.com"});//使用table渲染 不推荐
</script>
<div id="qrcode" style="width:50px;height:50px;"></div>