问题描述
目录
一、jQuery简介
jQuery实际上就是轻量级的JavaScript库，最主要的用途就是用来查询。
优点
极大地简化了JavaScript编程；较好地解决了浏览器的兼容性问题。
功能
·HTML元素选取与操作
·CSS操作
·HTML事件函数
·JavaScript特效和动画
·HTML DOM 遍历与修改
·AJAX操作
·Utilities
使用方式
1.引入jquery.js
方式1：从jQuery.com上下载，将jQuery.js存储到本地站点
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>方式2：引用微软、谷歌等的CDN（内容分发网络）上共享的jQuery.js
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
//以微软为例注：不必在<script>标签里写type="text/javascript"，JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言。
2.编写自定义脚本
为了保证对DOM的操作是在DOM加载完成之后，可以把jQuery函数写在下面的函数中。
$(document).ready(function(){
//jQuery函数
});另一种写法
$(function(){
// jQuery函数
});基本语法
$(selector).action()注：美元符号$定义 jQuery；选择符（selector）"查询"和"查找" HTML 元素；jQuery 的 action() 执行对元素的操作。
二、底层原理
jQuery是采用构造函数模式开发的，$符号就是jQuery，$()函数用于将任何对象包裹成jQuery对象，之后允许调用定义在jQuery对象上的任何方法。我们在使用jQuery进行操作的时候实际上就是调用jQuery()方法，并传入指定的参数，函数返回一个jQuery实例对象，该对象中包括一个或者是多个DOM元素。
三、jQuery 选择器
jQuery选择器允许我们对HTML的单个元素或元素组进行操作；
所有选择器都以$()开头
基本选择器
使用频率最高
| 示例 | 描述 |
| $("#myELement") | 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一元素 |
| $("div") | 选择所有的div标签元素，返回div元素数组 |
| $(".myClass") | 选择使用myClass类的css的所有元素 |
| $("*") | 选择文档中的所有的元素 |
| $("#test,div,.myclass") | 选取多个元素 |
层次选择器
通过DOM元素间的层次关系来获取元素
| 示例 | 描述 |
| $("div span") | 选取<div>里的所有<span>元素 |
| $("div >span") | 选取<div>元素下元素名是<span>的子元素 |
| $("#one +div") | 选取id为one的元素的下一个<div>同辈元素 |
| $("#one~div") | 选取id为one的元素的元素后面的所有<div>同辈元素 |
| $("#one").siblings("div") | 获取id为one的元素的所有<div>同辈元素（不管前后） |
| $("#one").prev("div") | 获取id为one的元素的前面紧邻的同辈<div>元素 |
过滤选择器
通过特定的过滤规则来筛选出所需的DOM元素
基本过滤选择器
| 示例 | 描述 |
| $("div:first") | 选取所有<div>元素中第1个<div>元素 |
| $("div:last") | 选取所有<div>元素中最后一个<div>元素 |
| $("input:not(.myClass)") | 选取class不是myClass的<input>元素 |
| $("input:even") | 选取索引是偶数的<input>元素(索引从0开始) |
| $("input:odd") | 选取索引是基数的<input>元素(索引从0开始) |
| $("input:eq(2)") | 选取索引等于2的<input>元素 |
| $("input:gt(4)") | 选取索引大于4的<input>元素 |
| $("input:lt(4)") | 选取索引小于4的<input>元素 |
| $(":header") | 过滤掉所有标题元素，例如：h1、h2、h3等 |
| $("div:animated") | 选取正在执行动画的<div>元素 |
| $(":focus") | 选取当前获取焦点的元素 |
内容过滤选择器
| 示例 | 描述 |
| $("div:contains('Name')") | 选取所有<div>中含有'Name'文本的元素 |
| $("div:empty") | 选取不包含子元素（包括文本元素）的<div>空元素 |
| $("div:has(p)") | 选取所有含有<p>元素的<div>元素 |
| $("div:parent") | 选取拥有子元素的（包括文本元素）<div>元素 |
可见性过滤选择器
| 示例 | 描述 |
| $("div:hidden") | 选取所有不可见的<div>元素 |
| $("div:visible") | 选取所有可见的<div>元素 |
属性过滤选择器
| 示例 | 描述 |
| $("div[id]") | 选取所有拥有属性id的元素 |
| $("input[name='test']") | 选取所有的name属性等于'test'的<input>元素 |
| $("input[name!='test']") | 选取所有的name属性不等于'test'的<input>元素 |
| $("input[name^='news']") | 选取所有的name属性以'news'开头的<input>元素 |
| $("input[name$='news']") | 选取所有的name属性以'news'结尾的<input>元素 |
| $("input[name*='news']") | 选取所有的name属性包含'news'的<input>元素 |
| $("div[title|='en']") | 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素 |
| $("div[title~='en']") | 选取属性title用空格分隔的值中包含字符en的<div>元素 |
| $("div[id][title$='test']") | 选取拥有属性id,并且属性title以'test'结束的<div>元素 |
子元素过滤选择器
| 示例 | 描述 |
| $("div .one:nth-child(2)") | 选取class为'one'的<div>父元素下的第2个子元素 |
| $("div span:first-child") | 选取每个<div>中的第1个<span>元素 |
| $("div span:last-child") | 选取每个<div>中的最后一个<span>元素 |
| $("div button:only-child") | 在<div>中选取是唯一子元素的<button>元素 |
表单对象属性过滤选择器
| 示例 | 描述 |
| $("#form1 :enabled") | 选取id为'form1'的表单内所有可用元素 |
| $("#form2 :disabled") | 选取id为'form2'的表单内所有不可用元素 |
| $("input :checked") | 选取所有被选中的<input>元素 |
| $("select option:selected") | 选取所有的select 的子元素中被选中的元素 |
表单选择器
方便地获取表单的某个或某类型的元素
| 示例 | 描述 |
| $(":input") | 选取所有<input>,<textarea>,<select> 和 <button>元素 |
| $(":text") | 选取所有的单行文本框 |
| $(":password") | 选取所有的密码框 |
| $(":radio") | 选取所有单的选框 |
| $(":checkbox") | 选取所有的多选框 |
| $(":submit") | 选取所有的提交按钮 |
| $(":image") | 选取所有的图像按钮 |
| $(":reset") | 选取所有的重置按钮 |
| $(":button") | 选取所有的按钮 |
| $(":file") | 选取所有的上传域 |
| $(":hidden") | 选取所有不可见元素 |
了解更多选择器，可以访问 jQuery 选择器参考手册
四、DOM操作
jQuery 提供一系列与 DOM 相关的方法，使访问和操作元素和属性更加容易；
获取内容和属性
| 方法 | 作用 |
| text() |
设置或返回所选元素的文本内容 |
| html() | 设置或返回所选元素的内容（包括 HTML 标签） |
| val() | 设置或返回表单字段的值 |
| attr() | 用于获取属性值 |
设置内容和属性
| 方法 | 作用 |
| text() |
设置或返回所选元素的文本内容 |
| html() | 设置或返回所选元素的内容（包括 HTML 标签） |
| val() | 设置或返回表单字段的值 |
| attr() | 用于设置/改变属性值（允许同时设置多个属性） |
注：text()、html() 、val()和attr()方法有回调函数，回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回字符串；
添加元素
| 方法 | 作用 |
| append() | 在被选元素的结尾插入内容（仍然在该元素的内部） |
| prepend() | 在被选元素的开头插入内容 |
| after() | 在被选元素之后插入内容 |
| before() | 在被选元素之前插入内容 |
注：以上方法可以添加若干个新元素；
删除元素
| 方法 | 作用 |
| remove() | 删除被选元素（及其子元素）；也可接受一个参数，允许您对被删元素进行过滤（该参数可以是任何 jQuery 选择器的语法）； |
| empty() | 从被选元素中删除子元素 |
CSS类
| 方法 | 作用 |
| addClass() | 向被选元素添加一个或多个类 |
| removeClass() | 从被选元素删除一个或多个类 |
| toggleClass() | 对被选元素进行添加/删除类的切换操作 |
css()方法
返回指定的 CSS 属性的值
css("propertyname");设置指定的 CSS 属性
css("propertyname","value");设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...});尺寸
| 方法 | 作用 |
| width() | 设置或返回元素的宽度（不包括内边距、边框或外边距） |
| height() | 设置或返回元素的高度（不包括内边距、边框或外边距） |
| innerWidth() | 返回元素的宽度（包括内边距） |
| innerHeight() | 返回元素的高度（包括内边距） |
| outerWidth() | 返回元素的宽度（包括内边距和边框） |
| outerHeight() | 返回元素的高度（包括内边距和边框） |
遍历
节点树
HTML 文档会被结构化为一棵节点树：
整个文档是文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
所有注释是注释节点
顶端节点被称为根（根节点）。
每个节点都有父节点（除了根）。
节点可以拥有一定数量的子节点。
拥有相同的父节点的是同胞(兄弟或姐妹)
jQuery遍历
jQuery 遍历用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素；以某项选择开始，并沿着这个选择移动，直到要选择的元素为止；
向上遍历
| 方法 | 作用 |
| parent() | 返回被选元素的直接父元素（只会向上一级对 DOM 树进行遍历） |
| parents() | 返回被选元素的所有祖先元素（一直向上直到文档的根元素 html） |
| parentsUntil() | 返回介于两个给定元素之间的所有祖先元素 |
向下遍历
| 方法 | 作用 |
| children() | 返回被选元素的所有直接子元素 |
| find() | 返回被选元素的后代元素（一直向下直到最后一个后代） |
横向遍历
| 方法 | 作用 |
| siblings() | 返回被选元素的所有同胞元素 |
| next() | 返回被选元素的下一个同胞元素 |
| nextAll() | 返回被选元素的所有跟随的同胞元素 |
| nextUntil() | 返回介于两个给定参数之间的所有跟随的同胞元素 |
| prev() | 返回被选元素的上一个同胞元素 |
| prevAll() | 返回被选元素的所有之前的同胞元素 |
| prevUntil() | 返回介于两个给定参数之间的所有之前的同胞元素 |
过滤
| 方法 | 作用 |
| first() | 返回被选元素的首个元素 |
| last() | 返回被选元素的最后一个元素 |
| eq() | 返回被选元素中带有指定索引号的元素（索引号从0开始） |
| filter() | 允许我们规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 |
| not() | 返回不匹配标准的所有元素，与上一个方法相反 |
五、jQuery 动画
隐藏/显示
可以使用hide()和 show() 方法来隐藏和显示 HTML 元素；toggle() 方法来切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素；
语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);注： speed 参数规定隐藏/显示的速度（可取值："slow"、"fast" 或毫秒）；callback 参数是隐藏或显示完成后所执行的函数名称；其中speed参数和callback参数为可选参数。
淡入淡出
| 方法 | 作用 | 语法 |
| fadeIn() | 用于淡入已隐藏的元素 | $(selector).fadeIn(speed,callback); |
| fadeOut() | 用于淡出可见元素 | $(selector).fadeOut(speed,callback); |
| fadeToggle() | 在 fadeIn() 与 fadeOut() 方法之间进行切换，淡出的元素淡入，淡入的元素淡出 | $(selector).fadeToggle(speed,callback); |
| fadeTo() | 允许渐变为给定的不透明度（值介于 0 与 1 之间） | $(selector).fadeTo(speed,opacity,callback); |
注：speed 参数规定效果的时长（可取值："slow"、"fast" 或毫秒）；.fadeIn()、fadeOut() 、fadeToggle()方法中的callback 参数是 fading 完成后所执行的函数名称；而fadeTo()方法中的callback 参数是该函数完成后所执行的函数名称；speed和callback参数属于可选参数；fadeTo() 方法中的 opacity 参数将淡入淡出效果设置为给定的不透明度，为必需参数。
滑动
| 方法 | 作用 | 语法 |
| slideDown() | 用于向下滑动元素 | $(selector).slideDown(speed,callback); |
| slideUp() | 用于向上滑动元素 | $(selector).slideUp(speed,callback); |
| slideToggle() | 在 slideDown() 与 slideUp() 方法之间进行切换； 向下滑动的元素可向上滑，反之也可； |
$(selector).slideToggle(speed,callback); |
注：speed 参数规定效果的时长（可取值："slow"、"fast" 或毫秒）；callback 参数是滑动完成后所执行的函数名称；这两个参数可选；
自定义动画
animate() 方法用于创建自定义动画
语法
$(selector).animate({params},speed,callback);注： params 参数定义形成动画的 CSS 属性，为必需参数；speed 参数规定效果的时长（可取值："slow"、"fast" 或毫秒），为可选参数；callback 参数是动画完成后所执行的函数名称，为可选参数；
示例
$("button").click(function(){
$("div").animate({left:'250px'});
});
//把 <div> 元素往右边移动了 250 像素功能特性
可同时操作多个属性；
可在值的前面加上 += 或 -=来定义相对值；
可使用预定义的值（例如"show"、"hide" 或 "toggle"等）；
有队列功能，有多个 animate() 调用时，会逐一运行；
停止动画
stop() 方法可用于在动画或效果（包括滑动、淡入淡出和自定义动画等）完成之前将它们停止；
语法
$(selector).stop(stopAll,goToEnd);注：stopAll 参数规定是否应该清除动画队列，默认是 false（仅停止活动的动画，允许任何排入队列的动画向后执行）；goToEnd 参数规定是否立即完成当前动画，默认是 false；这两个参数为可选参数；默认情况下，stop() 会清除在被选元素上指定的当前动画；
补充
参数
许多涉及到动画的函数，其参数可能为speed 或 duration（可选），这两个参数可以设置许多不同的值（比如 "slow", "fast", "normal" 或毫秒）；
方法链接
链接允许我们在相同的元素上一条接着一条地运行多条 jQuery 命令；
示例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);格式可以修改，比如
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);六、jQuery AJAX
简介
AJAX其实就是异步 JavaScript 和 XML，它可以在不重载全部页面的情况下，通过与服务器交换数据来实现对部分网页的更新；通过 jQuery AJAX 方法，我们可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON ， 同时把这些外部数据直接载入网页的被选元素中；
加载
可以通过load() 方法从服务器加载数据，并把返回的数据放入被选元素中；
语法
$(selector).load(URL,data,callback);注：data 参数规定与请求一同发送的查询字符串键/值对集合；callback 参数是 load() 方法完成后所执行的函数名称；这两个参数为可选参数；
URL 参数规定您希望加载的 URL，为必需参数，可以在该参数中添加选择器，更进一步的精确要加载的内容；
回调函数可以设置如下不同的参数：
responseTxt 包含调用成功时的结果内容；
statusTXT 包含调用的状态；
xhr 包含 XMLHttpRequest 对象
get()/post()方法
HTTP GET和POST是在客户端和服务器请求-响应数据的方法，其中GET方法基本上用于从服务器获得（取回）数据，可能返回缓存数据；POST方法可用于从服务器获取数据，不会缓存数据，并且常用于连同请求一起发送数据。
$.get()方法通过 HTTP GET 请求从服务器上请求数据；
语法
$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )$.post() 方法通过 HTTP POST 请求向服务器提交数据
语法
$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )注：URL参数是发送请求的 URL字符串；data参数是可选的，发送给服务器的字符串或 key/value 键值对；callback参数是可选的，请求成功后执行的回调函数；dataType参数是可选的，从服务器返回的数据类型（默认可以智能识别，xml, json, script, 或 html等）；
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）