jQuery基础

一、jQuery 简介

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

·        HTML 元素选取

·        HTML 元素操作

·        CSS 操作

·        HTML 事件函数

·        JavaScript 特效和动画

·        HTML DOM 遍历和修改

·        AJAX

·        Utilities

提示： 除此之外，Jquery还提供了大量的插件。

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

基础语法： $(selector).action()

·        美元符号定义 jQuery

·        选择符（selector）"查询"和"查找" HTML 元素

·        jQuery 的action() 执行对元素的操作

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个document ready 函数中：

$(document).ready(function(){

 // 开始写 jQuery 代码...

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

提示：简洁写法（与以上写法效果相同）:

$(function(){

// 开始写 jQuery 代码...

});

jQuery 选择器

http://www.runoob.com/jquery/jquery-ref-selectors.html

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

二、jQuery 事件

http://www.runoob.com/jquery/jquery-ref-events.html

jQuery是为事件处理特别设计的。

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

三、jQuery 效果

http://www.runoob.com/jquery/jquery-ref-effects.html

隐藏、显示、切换，滑动，淡入淡出，以及动画

1.jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是隐藏或显示完成后所执行的函数名称。

2.jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是隐藏或显示完成后所执行的函数名称。

3.jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

·        fadeIn()

·        fadeOut()

·        fadeToggle()

·        fadeTo()’

 

4.jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

5.jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法:

$(selector).fadeOut(speed,callback);

可选的speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

6.jQuery fadeToggle() 方法

jQueryfadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

可选的speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

7.jQuery fadeTo() 方法

jQueryfadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的callback 参数是该函数完成后所执行的函数名称。

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

·        slideDown()

·        slideUp()

·        slideToggle()

 

8.jQuery slideDown() 方法

jQueryslideDown() 方法用于向下滑动元素。

语法:

$(selector).slideDown(speed,callback);

可选的speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是滑动完成后所执行的函数名称。

9.jQuery slideUp() 方法

jQueryslideUp() 方法用于向上滑动元素。

语法:

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是滑动完成后所执行的函数名称。

10.jQuery slideToggle() 方法

jQueryslideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

11.jQuery 动画 - animate() 方法

jQueryanimate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的callback 参数是动画完成后所执行的函数名称。

12.jQuery stop() 方法

jQuerystop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop()会清除在被选元素上指定的当前动画。

---

13.jQuery 方法链接

通过 jQuery，可以把动作/方法链接在一起。

Chaining允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

四、jQuery – HTML

http://www.runoob.com/jquery/jquery-ref-html.html

1.jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

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

2.获得/设置内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

·        text() - 设置或返回所选元素的文本内容

·        html()- 设置或返回所选元素的内容（包括 HTML 标记）

·        val() - 设置或返回表单字段的值

3.text()、html()以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的text() 和 html()：

实例

$("#btn1").click(function(){

        $("#test1").text(function(i,origText){

        return"旧文本: " + origText + "新文本: Hello world! (index: " + i + ")";

        });

});

$("#btn2").click(function(){

        $("#test2").html(function(i,origText){

        return"旧 html: " + origText + "新 html: Hello world!(index: " + i + ")";

        });

});

 

4.获取/设置属性 -attr()

jQuery attr() 方法用于获取设置/改变属性值。

5.attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

实例

$("button").click(function(){

        $("#runoob").attr("href", function(i,origValue){

        returnorigValue + "/jquery";

        });

});

6.添加新的HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

·        append() - 在被选元素的结尾插入内容

·        prepend() - 在被选元素的开头插入内容

·        after() - 在被选元素之后插入内容

·        before() - 在被选元素之前插入内容

实例

functionappendText(){

      vartxt1="

文本。

"; // 使用 HTML 标签创建文本

      vartxt2=$("

").text("文本。"); // 使用 jQuery 创建文本

      vartxt3=document.createElement("p");

      txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM

      $("body").append(txt1,txt2,txt3); // 追加新元素

}

7.删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

·        remove() - 删除被选元素（及其子元素）

·        empty()- 从被选元素中删除子元素

8.jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

·        addClass() - 向被选元素添加一个或多个类

·        removeClass() - 从被选元素删除一个或多个类

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

·        css()- 设置或返回样式属性

9.jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

10.返回CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

11.设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

12.设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

 

13.jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

·        width()

·        height()

·        innerWidth()

·        innerHeight()

·        outerWidth()

·        outerHeight()

---

14.jQuery 尺寸

 

五、jQuery 遍历

http://www.runoob.com/jquery/jquery-ref-traversing.html

1.什么是遍历？

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

2.向上遍历DOM 树

这些jQuery 方法很有用，它们用于向上遍历 DOM 树：

·        parent()

·        parents()

·        parentsUntil()

3.向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

·        children()

·        find()

4.在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

·        siblings()

·        next()

·        nextAll()

·        nextUntil()

·        prev()

·        prevAll()

·        prevUntil()

5.缩小搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和not() 允许您选取匹配或不匹配某项指定标准的元素。

六、jQuery- AJAX 简介

http://www.runoob.com/jquery/jquery-ref-ajax.html

https://www.jquery123.com/jQuery.ajax/

1.什么是 AJAX？

AJAX = 异步JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

2.关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTPPost 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

七、jQuery 杂项方法

http://www.runoob.com/jquery/jquery-ref-misc.html

八、jQuery- noConflict() 方法

1.jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

2.jQuery noConflict() 方法

noConflict()方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

实例

$.noConflict();

jQuery(document).ready(function(){

        jQuery("button").click(function(){

                jQuery("p").text("jQuery 仍然在工作!");

        });

});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

实例

varjq = $.noConflict();

jq(document).ready(function(){

        jq("button").click(function(){

                jq("p").text("jQuery 仍然在工作!");

        });

});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

实例

$.noConflict();

jQuery(document).ready(function($){

        $("button").click(function(){

                $("p").text("jQuery 仍然在工作!");

        });

});