jQuery学习笔记,主要总结jQuery开发中常用的用法,需要一定的HTML、CSS、JS基础。我所在部门(数据组)并没有单独的前端程序猿,于是需要自己学习一些前端知识,主要是jQuery、BootStrap和JS知识,就可以做一些简洁美观的页面。这些前端知识上手很快、做的页面又不失简洁美观,非常适合非专业前端人员学习。当然,那些前端猿猿呼之欲出的React、Vue、Angular我就没去了解了。
简介
什么是 jQuery ?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的”写的少,做的多”的JavaScript库。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示: 除此之外,Jquery还提供了大量的插件。
为什么使用 jQuery ?
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。
很多大公司都在使用 jQuery, 例如:
- Microsoft
- IBM
- Netflix
浏览器兼容性
jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!
jQuery 版本 2 以上不支持 IE6,7,8 浏览器。
如果需要支持 IE6/7/8,那么请选择1.9,
你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。
1 | <!--[if lt IE 9]> |
jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法
1 | $(selector).action() |
- 美元符号定义 jQuery
- 选择符(selector)”查询”和”查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有
<p>
元素 - $(“p.test”).hide() - 隐藏所有 class=”test” 的
<p>
元素 - $(“#test”).hide() - 隐藏所有 id=”test” 的元素
方法链
有一种名为链(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
提示: 这样的话,浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p1” 元素首先会变为红色,然后向上滑动,再然后向下滑动:
1 | $("#p1").css("color","red").slideUp(2000).slideDown(2000); |
如果需要,我们也可以添加多个方法调用。
提示:当进行链接时,代码行会变得很差。不过,jQuery 语法不是很严格;您可以按照希望的格式来写,包含换行和缩进。
如下书写也可以很好地运行:
1 | $("#p1").css("color","red") |
文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
1 | $(document).ready(function(){ |
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
提示:简洁写法(与以上写法效果相同):
1 | $(function(){ |
以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。
选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p>
元素:
$("p")
用户点击按钮后,所有 <p>
元素都隐藏:
1 | $(document).ready(function(){ |
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
$("#test")
当用户点击按钮后,有 id=”test” 属性的元素将被隐藏:
1 | $(document).ready(function(){ |
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$(".test")
用户点击按钮后所有带有 class=”test” 属性的元素都隐藏:
1 | $(document).ready(function(){ |
更多实例
语法 | 描述 | 实例 |
---|---|---|
$(“*”) | 选取所有元素 | 在线实例 |
$(this) | 选取当前 HTML 元素 | 在线实例 |
$(“p.intro”) | 选取 class 为 intro 的 <p> 元素 |
在线实例 |
$(“p:first”) | 选取第一个<p> 元素 |
在线实例 |
$(“ul li:first”) | 选取第一个 <ul> 元素的第一个 <li> 元素 |
在线实例 |
$(“ul li:first-child”) | 选取每个 <ul> 元素的第一个 <li> 元素 |
在线实例 |
$(“[href]”) | 选取带有 href 属性的元素 | 在线实例 |
$(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的<a> 元素 |
在线实例 |
$(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的<a> 元素 |
在线实例 |
$(“:button”) | 选取所有 type=”button” 的 <input> 元素 和 <button> 元素 |
在线实例 |
$(“tr:even”) | 选取偶数位置的 <tr> 元素 |
在线实例 |
$(“tr:odd”) | 选取奇数位置的 <tr> 元素 |
在线实例 |
独立文件中使用 jQuery 函数
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时,会将函数直接添加到 <head>
部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):
1 | <head> |
事件
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语”触发”(或”激发”)例如: “当您按下按键时触发 keypress 事件”。
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").click();
下一步是定义事件触发时所做的事。您可以通过一个事件函数实现:
1 | $("p").click(function(){ |
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个 <p>
元素上触发时,隐藏当前的 <p>
元素:
1 | $("p").click(function(){ |
dblclick()
当双击元素时,会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:
mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:
1 | $("#p1").mouseenter(function(){ |
mouseleave()
当鼠标指针离开元素时,会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:
mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
1 | $("#p1").hover( |
focus()
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:
1 | $("input").focus(function(){ |
blur()
当元素失去焦点时,发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:
效果
隐藏/显示
语法:
1 | $(selector).hide(speed,callback); |
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
1 | $("button").click(function(){ |
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
显示被隐藏的元素,并隐藏已显示的元素:
1 | $("button").click(function(){ |
淡入淡出
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn() 方法
fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
1 | $("button").click(function(){ |
fadeOut() 方法
fadeOut() 方法用于淡出可见元素。
语法:
1 | $(selector).fadeOut(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeToggle() 方法
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
1 | $(selector).fadeToggle(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法:
1 | $("button").click(function(){ |
fadeTo() 方法
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
1 | $(selector).fadeTo(speed,opacity,callback); |
必需的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法:
1 | $("button").click(function(){ |
滑动
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
- slideDown()
- slideUp()
- slideToggle()
slideDown() 方法
slideDown() 方法用于向下滑动元素。
语法:
1 | $(selector).slideDown(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法:
1 | $("#flip").click(function(){ |
slideUp() 方法
slideUp() 方法用于向上滑动元素。
语法:
1 | $(selector).slideUp(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
slideToggle() 方法
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:
1 | $(selector).slideToggle(speed,callback); |
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画
jQuery animate() 方法用于创建自定义动画。
语法:
1 | $(selector).animate({params},speed,callback); |
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div>
元素往右边移动了 250 像素:
1 | $("button").click(function(){ |
注:默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
1 | $("button").click(function(){ |
注:可以用 animate() 方法来操作所有 CSS 属性吗?是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。
使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
1 | $("button").click(function(){ |
使用预定义的值
您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”:
1 | $("button").click(function(){ |
使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。
1 | $("button").click(function(){ |
停止动画
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
1 | $(selector).stop(stopAll,goToEnd); |
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法,不带参数:
1 | $("#stop").click(function(){ |
HTML元素
捕获
jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
注:DOM = Document Object Model(文档对象模型)DOM 定义访问 HTML 和 XML 文档的标准:”W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
- attr() - 设置或返回元素的属性值。
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
1 | $("#btn1").click(function(){ |
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:
1 | $("#btn1").click(function(){ |
下面的例子演示如何通过 attr() 获得链接中 href 属性的值:
1 | $("button").click(function(){ |
设置
使用跟捕获元素同样的方法来设置元素。
1 | $("#btn1").click(function(){ |
回调函数:
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
1 | $("#btn1").click(function(){ |
添加
用于添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
append() 方法
append() 方法在被选元素的结尾插入内容。
1 | $("p").append("追加文本"); |
prepend() 方法
prepend() 方法在被选元素的开头插入内容。
1 | $("p").prepend("在开头追加文本"); |
在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。
不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):
1 | function appendText() |
after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
1 | $("img").after("在后面添加文本"); |
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):
1 | function afterText() |
删除
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
remove() 方法
remove() 方法删除被选元素及其子元素。
1 | $("#div1").remove(); |
empty() 方法
empty() 方法删除被选元素的子元素。
1 | $("#div1").empty(); |
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class=”italic” 的所有 <p>
元素:
1 | $("p").remove(".italic"); |
CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
下面的样式表将用于本页的所有例子:
1 | .important |
addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:
1 | $("button").click(function(){ |
您也可以在 addClass() 方法中规定多个类:
1 | $("button").click(function(){ |
removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性:
1 | $("button").click(function(){ |
toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
css() 方法设置或返回被选元素的一个或多个样式属性。
css()方法
下面的例子将返回首个匹配元素的 background-color 值:
1 | $("p").css("background-color"); |
下面的例子将为所有匹配元素设置 background-color 值:
1 | $("p").css("background-color","yellow"); |
下面的例子将为所有匹配元素设置 background-color 和 font-size:
1 | $("p").css({"background-color":"yellow","font-size":"200%"}); |
尺寸
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
遍历
简介
jQuery 遍历,意为”移动”,用于根据其相对于其他元素的关系来”查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
图示解析:
<div>
元素是<ul>
的父元素,同时是其中所有内容的祖先。<ul>
元素是<li>
元素的父元素,同时是<div>
的子元素- 左边的
<li>
元素是<span>
的父元素,<ul>
的子元素,同时是<div>
的后代。 <span>
元素是<li>
的子元素,同时是<ul>
和<div>
的后代。- 两个
<li>
元素是同胞(拥有相同的父元素)。 - 右边的
<li>
元素是<b>
的父元素,<ul>
的子元素,同时是<div>
的后代。 <b>
元素是右边的<li>
的子元素,同时是<ul>
和<div>
的后代。
祖先
这些 jQuery 方法用于向上遍历 DOM 树:
- parent()
- parents()
- parentsUntil()
parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span>
元素的的直接父元素:
1 | $(document).ready(function(){ |
parents() 方法
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>
)。
下面的例子返回所有 <span>
元素的所有祖先:
1 | $(document).ready(function(){ |
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span>
元素的所有祖先,并且它是 <ul>
元素:
1 | $(document).ready(function(){ |
parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span>
与 <div>
元素之间的所有祖先元素:
1 | $(document).ready(function(){ |
后代
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children()
- find()
children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div>
元素的所有直接子元素:
1 | $(document).ready(function(){ |
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有 <p>
元素,并且它们是 <div>
的直接子元素:
1 | $(document).ready(function(){ |
find() 方法
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
下面的例子返回属于 <div>
后代的所有 <span>
元素:
1 | $(document).ready(function(){ |
下面的例子返回 <div>
的所有后代:
1 | $(document).ready(function(){ |
同胞
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 <h2>
的所有同胞元素:
1 | $(document).ready(function(){ |
您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于 <h2>
的同胞元素的所有 <p>
元素:
1 | $(document).ready(function(){ |
next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 <h2>
的下一个同胞元素:
1 | $(document).ready(function(){ |
nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 <h2>
的所有跟随的同胞元素:
1 | $(document).ready(function(){ |
nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2>
与 <h6>
元素之间的所有同胞元素:
1 | $(document).ready(function(){ |
prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。
过滤
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法
first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div>
元素内部的第一个 <p>
元素:
1 | $(document).ready(function(){ |
last() 方法
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 <div>
元素中的最后一个 <p>
元素:
1 | $(document).ready(function(){ |
eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p>
元素(索引号 1):
1 | $(document).ready(function(){ |
filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
下面的例子返回带有类名 “url” 的所有 <p>
元素:
1 | $(document).ready(function(){ |
not() 方法
not() 方法返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。
AJAX
简介
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
jQuery 提供多个与 AJAX 有关的方法,通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
ps:编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
1 | $(selector).load(URL,data,callback); |
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件(”demo_test.txt”)的内容:
1 | <h2>jQuery AJAX 是个非常棒的功能!</h2> |
下面的例子会把文件 “demo_test.txt” 的内容加载到指定的 <div>
元素中:
1 | $("#div1").load("demo_test.txt"); |
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 “demo_test.txt” 文件中 id=”p1” 的元素的内容,加载到指定的 <div>
元素中:
1 | $("#div1").load("demo_test.txt #p1"); |
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示”外部内容加载成功!”,而如果失败,则显示错误消息:
1 | $("button").click(function(){ |
$.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
1 | $.get(URL,callback); |
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:
1 | $("button").click(function(){ |
$.get() 的第一个参数是我们希望请求的 URL(”demo_test.php”)。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。
$.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
1 | $.post(URL,data,callback); |
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据:
1 | $("button").click(function(){ |
$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.php”)。
然后我们连同请求(name 和 url)一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
提示: 这个 PHP 文件 (“demo_test_post.php”) 类似这样:
1 |
|
$.ajax() 方法
使用 AJAX 请求改变 <div>
元素的文本:
1 | $("button").click(function(){ |
ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法:
1 | $.ajax({name:value, name:value, ... }) |
该参数规定 AJAX 请求的一个或多个名称/值对。
下面的表格中列出了可能的名称/值:
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”。 |
context | 为所有 AJAX 相关的回调函数规定 “this” 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
JSON
JSON.parse()
使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法
1 | JSON.parse(text[, reviver]) |
参数说明:
- text:必需, 一个有效的 JSON 字符串。
- reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
例如我们从服务器接收了以下数据:
1 | { "name":"runoob", "alexa":10000, "site":"www.runoob.com" } |
我们使用 JSON.parse() 方法处理以上数据,将其转换为 JavaScript 对象:
1 | var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); |
解析日期
JSON 不能存储 Date 对象。
如果你需要存储 Date 对象,需要将其转换为字符串,之后再将字符串转换为 Date 对象。
1 | var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; |
我们可以启用 JSON.parse 的第二个参数 reviver,一个转换结果的函数,对象的每个成员调用此函数。
1 | var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; |
解析函数
JSON 不允许包含函数,但你可以将函数作为字符串存储,之后再将字符串转换为函数。
1 | var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}'; |
不建议在 JSON 中使用函数。
关于JSON.parse(jsonstr)
和eval("(" + jsonstr + ")")
:
eval是JS的编译器,将文本编译为js对象,不安全,速度不如JSON.parse()。
JSON.stringify()
JSON.stringify() 方法将 JavaScript 对象转换为字符串。
语法
1 | JSON.stringify(value[, replacer[, space]]) |
参数说明:
value:
必需, 一个有效的 JSON 字符串。
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:””。
如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。
space:
可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如:\t。
例如我们向服务器发送以下数据:
1 | var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"}; |
我们使用 JSON.stringify() 方法处理以上数据,将其转换为字符串:
1 | var myJSON = JSON.stringify(obj); |
日期和函数
JSON.stringify() 会将所有日期转换为字符串。
JSON 不允许包含函数,JSON.stringify() 会删除 JavaScript 对象的函数,包括 key 和 value。我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生:
1 | var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"}; |
不建议在 JSON 中使用函数。
实用方法
方法 | 描述 |
---|---|
$.contains() | 判断另一个DOM元素是否是指定DOM元素的后代 |
$.each() | 遍历指定的对象和数组 |
$.extend() | 将一个或多个对象的内容合并到目标对象 |
$.fn.extend() | 为jQuery扩展一个或多个实例属性和方法 |
$.globalEval() | 全局性地执行一段JavaScript代码 |
$.grep() | 过滤并返回满足指定函数的数组元素 |
$.inArray() | 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) |
$.isArray() | 判断指定参数是否是一个数组 |
$.isEmptyObject() | 检查对象是否为空(不包含任何属性) |
$.isFunction() | 判断指定参数是否是一个函数 |
$.isNumeric() | 判断指定参数是否是一个数字值 |
$.isPlainObject() | 判断指定参数是否是一个纯粹的对象 |
$.isWindow() | 判断指定参数是否是一个窗口 |
$.isXMLDoc() | 判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档 |
$.makeArray() | 将一个类似数组的对象转换为真正的数组对象 |
$.map() | 指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回 |
$.merge() | 合并两个数组内容到第一个数组 |
$.noop() | 一个空函数 |
$.now() | 返回当前时间 |
$.parseHTML() | 将HTML字符串解析为对应的DOM节点数组 |
$.parseJSON() | 将符合标准格式的JSON字符串转为与之对应的JavaScript对象 |
$.parseXML() | 将字符串解析为对应的XML文档 |
$.trim() | 去除字符串两端的空白字符 |
$.type() | 确定JavaScript内置对象的类型 |
$.unique() | 在jQuery 3.0中被弃用。对DOM元素数组进行排序,并移除重复的元素 |
$.uniqueSort() | 对DOM元素数组进行排序,并移除重复的元素 |
$.data() | 在指定的元素上存取数据,并返回设置值 |
$.hasData() | 确定一个元素是否有相关的jQuery数据 |
$.sub() | 创建一个新的jQuery副本,其属性和方法可以修改,而不会影响原来的jQuery对象 |
$.speed | 创建一个包含一组属性的对象用来定义自定义动画 |
$.htmlPrefilter() | 通过jQuery操作方法修改和过滤HTML字符串 |
$.readyException() | 处理包裹在jQuery()中函数同步抛出的错误 |
更多方法请参考jquery参考手册
参考文献
[2]、 《锋利的jQuery》