个人笔记——jQuery
来源：互联网 发布：中国邮政数据传媒中心 编辑：程序博客网 时间：2024/05/29 11:01
前言：失踪人口回归，最近找了个公司实(hua)习(shui)无聊刚自学了jQuery，日常分享个笔记。教程来源：http://www.runoob.com/jquery/jquery-tutorial.html[菜鸟教程]
jQuery简介
什么是 jQuery？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的”写的少，做的多”的JavaScript库。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示： 除此之外，Jquery还提供了大量的插件。
jQuery 安装
网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。可以使用以下方法：
1. 从 jquery.com 下载 jQuery 库
2. 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
有两个版本的 jQuery 可供下载：
1. Production version - 用于实际的网站中，已被精简和压缩。
2. Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件，可以使用 HTML 的
通过 CDN（内容分发网络） 引用
百度 CDN:
<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>新浪 CDN:
<head><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script></head>Google CDN:
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head>Microsoft CDN:
<head><script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script></head>jQuery 语法
通过 jQuery，可以对 HTML 元素进行选取（查询，query），并对它们执行”操作”（actions）。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）”查询”和”查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
文档就绪事件
$(document).ready(function(){ // 开始写 jQuery 代码...});简洁写法（与以上写法效果相同）:
$(function(){ // 开始写 jQuery 代码...});jQuery 选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素: $("p")
## #id 选择器 ##
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下： $("#test")
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下： $(".test")
更多语法
独立文件中使用 jQuery 函数
如果网站包含许多页面，把 jQuery 函数放到独立的 .js 文件中，便于维护 jQuery 函数，通过 src 属性来引用文件：
实例
<head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script></head>jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件： 
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
常用的 jQuery 事件方法
$(document).ready() $(document).ready()方法允许我们在文档完全加载完后执行函数。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。
dblclick()
当双击元素时，会发生 dblclick 事件。
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
实例
$("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); });focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur()
当元素失去焦点时，发生 blur 事件。
jQuery 效果
隐藏和显示
jQuery hide() 和 show()
语法:
$(selector).hide(speed,callback);- speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
- callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
语法:
$(selector).toggle(speed,callback); - speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
- callback 参数是隐藏或显示完成后所执行的函数名称。
淡入淡出
jQuery Fading 方法
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);- 必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
- fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
- 可选的 callback 参数是该函数完成后所执行的函数名称。
滑动
jQuery 滑动方法可使元素上下滑动。
jQuery 滑动方法
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法:
$(selector).slideToggle(speed,callback);动画
animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
- 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，首先要把元素的 CSS position 属性设置为 relative、fixed 或 absolute！- 操作多个属性
生成动画的过程中可同时使用多个属性：
实例
- 操作多个属性
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });});可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。
2. 使用相对值：定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。
3. 使用预定义的值：可以把属性的动画值设置为 “show”、”hide” 或 “toggle”：
4. 使用队列功能
在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。
停止动画
stop() 方法
Query stop() 方法用于在动画或效果完成之前停止它们。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
* 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
* 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
Callback 方法
Callback 函数在当前动画 100% 完成之后执行。
链(Chaining)
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
jQuery 方法链接
$("#p1").css("color","red").slideUp(2000).slideDown(2000);jQuery HTML
获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
* text() - 返回所选元素的文本内容
* html() - 返回所选元素的内容（包括 HTML 标记）
* val() - 返回表单字段的值
获取属性 - attr()
jQuery attr() 方法用于获取属性值。 attr("属性名")
设置内容和属性
设置内容 - text()、html() 以及 val()
- text(“text文本”) - 设置所选元素的文本内容
- html(“html文本”) - 设置所选元素的内容（包括 HTML 标记）
- val(“val值”) - 设置表单字段的值
text()、html() 以及 val() 的回调函数
text()、html() 以及 val() 同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
设置属性 - attr()
attr() 方法也用于设置/改变属性值，也允许同时设置多个属性。
$().attr("属性","值");$().attr({ "属性1" : "值1", "属性2" : "值2" //...});attr() 的回调函数
attr() 提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回希望使用的字符串。
添加元素
添加新的 HTML 内容
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
通过 append() 和 prepend() 方法添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML，或者通过 JavaScript 代码和 DOM 元素。
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
删除元素
删除元素/内容
一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
删除 class=”italic” 的所有 <p> 元素：
$("p").remove(".italic");
获取并设置 CSS 类
jQuery 操作 CSS
addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性addClass() 方法
addClass("类名1[ 类名2 ...] ")removeClass() 方法
toggleClass() 方法
css() 方法
css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
使用如下语法返回指定的 CSS 属性的值：
css(“propertyname”);
设置 CSS 属性
使用如下语法设置指定的 CSS 属性：
css(“propertyname”,”value”);
设置多个 CSS 属性
使用如下语法设置多个 CSS 属性：
css({“propertyname”:”value”,”propertyname”:”value”,…});
尺寸
尺寸方法
width()height()innerWidth()innerHeight()outerWidth()outerHeight()尺寸
width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、外边距和边框）。
outerHeight(true) 方法返回元素的高度（包括内边距、外边距和边框）。
jQuery 遍历
什么是遍历？
通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历（tree-traversal）。
祖先
向上遍历 DOM 树
parent()parents()parentsUntil()parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
也可以使用可选参数来过滤对祖先元素的搜索parents("元素标签")。
parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
后代
向下遍历 DOM 树
children()find()children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
也可以使用可选参数来过滤对子元素的搜索。
例子：返回类名为 “1” 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){ $("div").children("p.1");});
find() 方法
find() 方法返回被选元素的指定后代元素，一路向下直到最后一个后代。
同胞(siblings)
同胞拥有相同的父元素。
在 DOM 树中水平遍历
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
也可以使用可选参数来过滤对同胞元素的搜索。
next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
过滤
缩小搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。
first() 方法
first() 方法返回被选元素的首个元素。
last() 方法
last() 方法返回被选元素的最后一个元素。
eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素，索引号从 0 开始。
filter() 方法
filter() 方法允许规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not() 方法
not() 方法返回不匹配标准的所有元素。
not() 方法与 filter() 相反。
jQuery AJAX
AJAX load() 方法
load() 方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
- 必需的 URL 参数规定希望加载的 URL。也可以把 jQuery 选择器添加到 URL 参数。
- 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
$.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);- 必需的 URL 参数规定您希望请求的 URL。
- 可选的 callback 参数是请求成功后所执行的函数名。回调函数function(data,status)第一个回调参数data存有被请求页面的内容，第二个回调参数status存有请求的状态。
$.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$.post(URL,data,callback);- 必需的 URL 参数规定您希望请求的 URL。
- 可选的 data 参数规定连同请求发送的数据。
- 可选的 callback 参数是请求成功后所执行的函数名。
其他
noConflict() 方法
也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。var jq = $.noConflict();
如果你的 jQuery 代码块使用
- 个人笔记——jQuery
- 个人笔记—01
- JQuery使用的个人笔记
- Jquery的个人学习笔记
- 个人笔记——日志
- 个人笔记——杂七杂八
- 个人笔记(Oracle)—02
- 个人笔记-JQuery清除事件方法
- pig个人笔记——1
- 个人学习笔记——数据库：范式
- ANT批量打包——个人笔记
- android个人学习笔记——RatingBar
- Git基础知识1——个人笔记
- 个人笔记 IOS——Android动画
- SSM整合——个人笔记
- R语言入门——个人笔记
- 个人笔记—TabLayout使用详解
- jQuery学习笔记——初识jQuery
- JavaScript基础学习
- MST 最小生成树
- androidstudio报错之Java.lang.NoClassDefFoundError: de.greenrobot.event.EventBus
- 【JavaScript】我的第6个例子；代码块
- Python数据分析与展示（1）——NumPy库入门
- 个人笔记——jQuery
- 剑指offer 04 替换空格
- 微信支付未安装微信情况下调起支付无响应
- SQL Server 中的 锁
- Unity3d 开始界面空白(黑屏)问题
- Nginx反向代理和负载均衡
- Web交互设计优化方案＋check list
- 项目笔记（一）
- 正则表达式
