jQuery

jQuery 简介

jQuery的概念

jQuery是一个快速、简洁的JavaScript框架（JavaScript代码库）；

jQuery 库包含的功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

为什么使用 jQuery ？

目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix jQuery 兼容于所有主流浏览器, 包括 Internet Explorer 6!

jQuery 安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。使用以下方法：

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）以上两个版本都可以从 jquery.com 中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的<script>标签引用它：

<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

引用 jQuery，请使用以下代码之一：

Staticfile CDN:

<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

百度 CDN:

<head> 
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
</head>

又拍云 CDN:

<head> 
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script> 
</head>

新浪 CDN:

<head> 
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 
</head>

Google CDN:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
    //不大推荐使用Google CDN来获取版本，因为Google产品在中国很不稳定。 
</head>

Microsoft CDN:

<head> 
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>

使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
jQuery 使用版本在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本：

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法：

$(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作例:

    $(this).hide()//隐藏当前元素
    $("p").hide() //隐藏所有 <p> 元素
    $("p.test").hide() //隐藏所有 class="test" 的 <p> 元素
    $("#test").hide() //隐藏 id="test" 的元素

文档就绪事件

实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
    // 开始写 jQuery 代码... 
});

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

$(function(){
    // 开始写 jQuery 代码...
})

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

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小 jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。 JavaScript 入口函数:

```js
window.onload = function () {
    // 执行代码
}

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
</script>

#id 选择器

$(document).ready(function(){
        $("button").click(function(){
        $("#test").hide();
    });
});

.class 选择器

$(document).ready(function(){ 
        $("button").click(function(){
        $(".test").hide(); 
    });
});

语法	描述	实例
$("*")	选取所有元素
$(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 事件

什么是事件？

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。例：
在元素上移动鼠标。
选取单选按钮
点击元素 常见 DOM 事件： 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 | | ----------------------------------------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | | click | keypress | submit | load | | dblclick | keydown | change | resize | | mouseenter | keyup | focus | scroll | | mouseleave | | blur | unload | | hover

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

定义了点击后触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ 
    // 动作触发后执行的代码!! 
});

常用的 jQuery 事件方法

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

$(document).ready(){
    //入口函数
}

click() 方法是当按钮点击事件被触发时会调用一个函数。

$("p").click(function(){
    $(this).hide(); //点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素
});

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){
    $(this).hide(); //当双击元素时，隐藏当前的 <p> 元素
});

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');//当鼠标指针穿过元素时，会发生 mouseenter 事件。
});

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。"); //当鼠标指针离开元素时，会发生 mouseleave 事件。
});

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！"); //当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
});

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){ 
    alert("鼠标在段落上松开。"); //当在元素上松开鼠标按钮时，会发生 mouseup 事件。
});

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

//hover()方法用于模拟光标悬停事件。
$("#p1").hover( function(){
        alert("你进入了 p1!"); 
    }, 
        function(){ 
        alert("拜拜! 现在你离开了 p1!"); 
    } 
);

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){ 
    $(this).css("background-color","#cccccc"); //通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
});

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){ 
    $(this).css("background-color","#ffffff"); //当元素失去焦点时，发生 blur 事件。
});

jQuery 效果

jQuery隐藏和显示

jQuery hide() 和 show()

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

$("#hide").click(function(){
    $("p").hide(); 
});
$("#show").click(function(){
    $("p").show(); 
});

语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。下面的例子演示了带有 speed 参数的 hide() 方法：

$("button").click(function(){
    $("p").hide(1000); 
});

下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：

$(document).ready(function(){
    $(".hidebtn").click(function(){
        $("div").hide(1000,"linear",function(){ 
            alert("Hide() 方法已完成!"); 
        }); 
    }); 
});

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();//toggle() 方法来切换 hide() 和 show() 方法
  });
});
</script>

</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

语法:$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery 淡入淡出

jQuery 拥有下面四种 fade 方法：

1. jQuery fadeIn() 方法

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

语法:$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

$("button").click(function(){
    $("#div1").fadeIn(); 
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

2. jQuery fadeOut() 方法

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

语法:$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

3. jQuery fadeToggle() 方法

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

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 语法:$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

4. jQuery fadeTo() 方法

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

语法:$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

$("button").click(function(){ 
    $("#div1").fadeTo("slow",0.15); 
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7); 
});

注意：

注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
fadeTo() 没有默认参数，必须加上 slow/fast/Time

jQuery 滑动

jQuery slideDown() 方法

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

语法:$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
    $("#panel").slideDown(); 
});

jQuery slideUp() 方法

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

语法:$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
    $("#panel").slideUp(); 
});

jQuery slideToggle() 方法

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

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

语法:$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){ 
    $("#panel").slideToggle();
});

jQuery 动画

jQuery 动画 - animate() 方法

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

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

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用

$("button").click(function(){
//。它把 <div> 元素往右边移动了 250 像素
    $("div").animate({left:'250px'});
});

注意：

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

jQuery animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

$("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 下载颜色动画插件。

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){ 
    $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); 
});

jQuery animate() - 使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
    $("div").animate({ height:'toggle' });
});

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。
如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列
然后逐一运行这些 animate 调用。

$("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow"); 
    div.animate({width:'300px',opacity:'0.8'},"slow"); 
    div.animate({height:'100px',opacity:'0.4'},"slow"); 
    div.animate({width:'100px',opacity:'0.8'},"slow"); 
});

把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

$("button").click(function(){ 
    var div=$("div"); 
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
});

jQuery 停止动画

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。下面的例子演示 stop() 方法，不带参数：

$("#stop").click(function(){ 
    $("#panel").stop(); 
});

jQuery Callback 方法

jQuery 动画的问题

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例： $("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

以下实例在隐藏效果完全实现后回调函数:

使用 callback 实例

$("button").click(function(){
    $("p").hide("slow",function(){
        alert("段落现在被隐藏了"); 
    }); 
});

以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

$("button").click(function(){
    $("p").hide(1000); 
    alert("段落现在被隐藏了"); 
});

jQuery 方法链接

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

提示：

这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我们也可以添加多个方法调用。

提示： 当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

$("#p1").css("color","red") 
        .slideUp(2000) 
        .slideDown(2000);

jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行

jQuery HTML

获得内容和属性

获得内容 - text()、html() 以及 val()

3个用于 DOM 操作的 jQuery 方法：

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

$("#btn1").click(function(){ 
    alert("Text: " + $("#test").text());
});

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

$("#btn2").click(function(){ 
    alert("HTML: " + $("#test").html());
});

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

$("#btn1").click(function(){ 
    alert("值为: " + $("#test").val());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

获得链接中 href 属性的值：

$("button").click(function(){ 
    alert($("#runoob").attr("href"));
});

设置内容和属性

文档操作

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

属性操作

下面列出的这些方法获得或设置元素的 DOM 属性。

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。

CSS 操作

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width()	设置或返回匹配元素的宽度。

添加新内容的四个 jQuery 方法：

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

$("p").append("追加文本");

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

$("p").prepend("在开头追加文本");

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

$("img").after("在后面添加文本");

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

$("img").before("在前面添加文本");

通过 append() 和 prepend() 方法添加若干新元素

function appendText(){ 
    var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with 
    DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }

通过 after() 和 before() 方法添加若干新元素

function afterText() { 
    var txt1="<b>I </b>"; // 使用 HTML 创建元素 
    var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
    var txt3=document.createElement("big"); // 使用 DOM 创建元素 
    txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本 }

总结：

append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

删除元素/内容

删除元素和内容，使用以下两个 jQuery 方法：

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

$(document).ready(function(){
  $("button").click(function(){
    $("p").remove();
  });
});

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

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的例子删除 class="italic" 的所有<p>元素：

$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});

获取并设置 CSS 类

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>

</body>
</html>

addClass() 方法中规定多个类：

$(document).ready(function(){
  $("button").click(function(){
    $("body div:first").addClass("important blue");
  });
});

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

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});

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

$("button").click(function(){
    $("h1,h2,p").toggleClass("blue"); 
});

css() 方法

返回 CSS 属性

语法：css("propertyname");

$("p").css("background-color");

设置 CSS 属性

语法：css("propertyname","value");

$("p").css("background-color","yellow");

设置多个 CSS 属性

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

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 尺寸

jQuery Dimensions

width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()方法返回元素的宽度（包括内边距）。
innerHeight()方法返回元素的高度（包括内边距）。
outerWidth()方法返回元素的宽度（包括内边距和边框）。
outerHeight()方法返回元素的高度（包括内边距和边框）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>

</body>
</html>

jQuery 遍历

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

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

图示解析：

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。| | -----------------------------------------------------------------|

jQuery 祖先

祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。 用于向上遍历 DOM 树的jQuery 方法：

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。下面的例子返回每个<span>元素的直接父元素：

$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"4px solid red"});
});

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。下面的例子返回所有元素的所有祖先：

$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有<span>元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function(){
  $("span").parents("ul").css({"color":"red","border":"2px solid red"});
});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});

jQuery 后代

后代是子、孙、曾孙等等。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。 向下遍历 DOM 树的 jQuery 方法：
children()方法返回被选元素的所有直接子元素。

$(document).ready(function(){
	$("div").children().css({"color":"red","border":"2px solid red"});
});

find()方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});

jQuery 同胞(siblings)

同胞拥有相同的父元素。
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。 在 DOM 树进行水平遍历：
siblings()方法返回被选元素的所有同胞元素。

$(document).ready(function(){ $("h2").siblings(); });

next()方法返回被选元素的下一个同胞元素。

$(document).ready(function(){ $("h2").next(); });

nextAll()方法返回被选元素的所有跟随的同胞元素。

$(document).ready(function(){ $("h2").nextAll(); });

nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){ $("h2").nextUntil("h6"); });

prev() prevAll() prevUntil()方法 prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

jQuery 过滤

最基本的过滤方法是：

first()方法返回被选元素的首个元素。

$(document).ready(function(){ $("div p").first(); });

last() 方法返回被选元素的最后一个元素。

$(document).ready(function(){ $("div p").last(); });

eq()方法返回被选元素中带有指定索引号的元素。

$(document).ready(function(){ $("p").eq(1); });

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");
});

not() 方法返回不匹配标准的所有元素。

$(document).ready(function(){ $("p").not(".url"); });

jQuery AJAX

jQuery - AJAX 简介

定义和用法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法：$.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 对象的函数。

AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});

把 jQuery 选择器添加到 URL 参数。

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});

AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法： $.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){ 
    $.get("demo_test.php",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
    }); 
});

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php", { 
        name:"zp", url:"//地址" 
            },
        function(data,status){
            alert("数据: \n" + data + "\n状态: " + status); 
    });
});

jQuery 其他

如何在页面上同时使用 jQuery 和其他框架？

jQuery 和其他 JavaScript 框架

jQuery 使用 $ 符号作为 jQuery 的简写。

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

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

jQuery noConflict() 方法

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

可以通过全名替代简写的方式来使用 jQuery：

$.noConflict(); 
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍然在工作!");
    }); 
});

可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。

例：

var jq = $.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 仍然在工作!"); 
    });
});

jQuery(jQuery 简介,jQuery 安装,jQuery 语法,jQuery 事件,jQuery 效果,jQuery HTML, jQuery 遍历)