JQuery库的基础用法

最新推荐文章于 2024-09-07 10:09:56 发布

苏绪

最新推荐文章于 2024-09-07 10:09:56 发布

阅读量384

点赞数

分类专栏： jQuery的学习 JavaScript的学习

本文链接：https://blog.csdn.net/weixin_41719737/article/details/84194773

版权

jQuery的学习同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript的学习

1 篇文章 0 订阅

订阅专栏

JQuery的定义：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

jQuery 优点：

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
极大地简化了 JavaScript 编程。jQuery 库可以通过一行简单的标记被添加到网页中。

jQuery库包含以下功能：
1、html，的元素选取
2、html的，元素操作
3、html dom，遍历和修改
4、js，特效和动画效果
5、css，操作
6、html，事件操作
7、ajax，异步请求方式

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

jQuery 语法使用：
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector(选择器)).(行为)action()
美元符号用来定义 jQuery
选择符（selector）用来“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作事件
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

<script type="text/javascript" src="js/jquery-2.1.0.js">
       /*为了保证js和jq的代码能够同时使用，所以独立开一个scrpt*/
       </script>
       
       <script>
           /*js版的加载方式*/
           onload = function(){
               alert("我被加载了1");
           }

           /*jq的加载方式*/
           jQuery(document).ready(function(){
               alert("我被加载了1");
           });
           /*简写方式*/
           $(document).ready(function(){
               alert("我被加载了2");
           });
           /*终极简写方式*/
           $(function(){
               alert("我被加载了3");
           });
       </script>

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

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

jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML元素。

它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。

jQuery中所有选择器都以美元符号开头：$ (function(){// 开始写 jQuery 代码...});如果在文档没有完全加载之前就运行函数，操作可能失败。

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

#jQuery的元素转换

##示例代码
<script>
           function changeJs(){
               var div1 = document.getElementById("div1");
               div1.innerHTML = "JS成功修改了代码";
               //js对象转换为jq的对象
               $(div1).html("JQ成功修改了代码");
//               div1.html("JS成功修改了代码");
           }

           $(function(){
               //给bt2添加点击事件
               $("#bt2").click(function(){
                   //找到div2
                   $("#div2").html("是JQ进行的内容的改变");
                   //将jq的对象转换成js的对象
                   var $div = $("#div2");
                   //获取jq对象的具体元素，赋值给js变量转换为js对象
                   //var jsDiv = $div.get(0);
                   var jsDiv = $div[0];
                   jsDiv.innerHTML = "jq对象转换为js对象成功";
               });

           });
</script>

#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如右侧所示：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test") ........…(".test")

$("*")，选取所有元素
$(this)，选取当前 HTML 元素
$(“p.intro”)，选取 class 为 intro 的
元素
$(“p:first”)，选取第一个

元素
$(“ul li:first”)，选取第一个

元素的第一个
元素
$(“ul li:first-child”)，选取每个
元素的第一个
元素
$("[href]")，选取带有 href 属性的元素
$(“a[target=’_blank’]”)，选取所有 target 属性值等于 “_blank” 的元素
$(“a[target!=’_blank’]”)，选取所有 target 属性值不等于 “_blank” 的元素
$(":button")，选取所有 type=“button” 的元素和元素
$(“tr:even”)，选取偶数位置的元素
$(“tr:odd”)，选取奇数位置的元素

#JQ的开发步骤

1. 导入相关的JQ的库
2. 完成文档加载事件 $(function)
3. 确定相关的事件源
4. 确定事件源所操作的事件
5. 确定事件的响应行为

#jQuery的动画效果
## 示例代码
   <script>
           $(function(){
               //显示图片
               //给btn1添加点击事件
               $("#btn1").click(function(){
                   //$("#img1").show(5000);
                   //$("#img1").fadeIn(5000);
                   $("#img1").slideDown(1000);
               });


               //隐藏图片
               $("#btn2").click(function(){
                   //$("#img1").hide(5000);
                   //$("#img1").slideUp(2000);
                   $("#img1").animate({width:"20%",opacity:"0.3"},1000)
               });
           });
       </script>

##使用jQuery写出一个带动画的自动显示和隐藏的广告的功能
   <script>

               //显示广告
               function showAD(){
                   $("#img1").slideDown(2000);
                   setTimeout("hideAD()",2000);

               }
               //隐藏广告
               function hideAD(){
                   $("#img1").slideUp(2000);

               }
               $(function(){
                   setTimeout("showAD()",2000);
               });
       </script>
   </head>
   <body>
       <img src="img/1.jpg" id="img1" style="display: none;" width="300px"/>
   </body>

#jQuery的选择器:
## 什么选择器?
jQuery的选择器和CSS的选择器基本一致，都是为了更加精确的匹配到某个元素

## 基本选择器
- 标签选择器:以标签名作为参考
- 类选择器:以.类名开头
- ID选择器:以#ID名开头
- 通配符选择器:以*代表全部选择器
- 多层选择器:选择器，选择器

### 示例代码
<script>
           $(function(){
               //找出id为two的元素
               $("#btn1").click(function(){
                   $("#two").css("background-color","paleturquoise");
               });
               //找出mini类的所有元素
               $("#btn2").click(function(){
                   $(".mini").css("background-color","paleturquoise");
               });
               //找出所有div元素
               $("#btn3").click(function(){
                   $("div").css("background-color","paleturquoise");
               });
               //找出所有元素
               $("#btn4").click(function(){
                   $("*").css("background-color","paleturquoise");
               });
               //找出mini类和span类的元素
               $("#btn5").click(function(){
                   $(".mini,span").css("background-color","paleturquoise");
               });
           });
</script>

##层级选择器
- 子代选择器：选择器1 > 选择器2
- 后代选择器:选择器1 选择器2
- 相邻兄弟选择器:选择器1 + 选择器2:找出离本身最近的一个弟弟元素
- 找出所有弟弟选择器?：选择器1 ~ 选择器2:找出所有的弟弟

###示例代码
   <script>
           $(function(){
               //找出body下面的子div
               $("#btn1").click(function(){
                   $("body > div").css("background-color","paleturquoise");
               });
               //找出body下面的所有div
               $("#btn2").click(function(){
                   $("body div").css("background-color","paleturquoise");
               });
               //找出id为one的相邻兄弟div
               $("#btn3").click(function(){
                   $("#one+div").css("background-color","paleturquoise");
               });
               //找出id为two的所有弟弟div
               $("#btn4").click(function(){
                   $("#two~div").css("background-color","paleturquoise");
               });
           });
   </script>

独立文件中使用 jQuery 函数，如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

jQuery 事件
jQuery 是为事件处理特别设计的。
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress(按键响应) 事件”。
常见 DOM 事件：
鼠标事件：
click(单击)
dblclick(双击鼠标)
mouseenter(鼠标移入)，mouseleave(鼠标移出)
mousedown(按下鼠标按键)，mouseup(松开鼠标按钮)
hover()方法用于模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter)，当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
键盘事件：keypress(按键响应)，keydown(按键按下)，keyup(按键恢复)
表单事件：submit(提交)，change(更换)，focus(焦点)， blur(失去焦点)
文档/窗口事件： load(负荷)，resize(调整尺寸)， scroll(文本框中的起始滚动行)， unload(卸载)
fadeOut(淡出时间)
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
(document).ready()方法允许我们在文档完全加载完后执行函数。

jQuery效果−隐藏和显示隐藏、显示、切换，滑动，淡入淡出，以及动画。slow(缓慢的)，可用作动作时间

jQueryhide(spaad)和show(spaad)：通过jQuery，您可以使用"hide(隐藏)"和"show(显示)"方法来隐藏和显示HTML元素。speed参数规定隐藏/显示的速度，可以取以下值："slow(缓慢的)"、"fast(快速的)"或毫秒，可选的callback参数是隐藏或显示完成后所执行的函数名称

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

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

jQuery拥有下面四种fade方法：fadeIn()，用于淡入已隐藏的元素。fadeOut()，用于淡出显示的元素。fadeToggle()，可以在fadeIn()与fadeOut()方法之间进行切换。

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

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

jQuery拥有以下滑动方法：slideDown()，用于向下滑动元素。

slideUp()，用于向上滑动元素。

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

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

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

jQuery效果−动画jQueryanimate()方法允许您创建自定义的动画。

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

jQuery 效果- 隐藏和显示隐藏、显示、切换，滑动，淡入淡出，以及动画。slow(缓慢的)，可用作动作时间

jQuery hide(spaad) 和 show(spaad)：通过 jQuery，您可以使用 "hide(隐藏)" 和 "show(显示)" 方法来隐藏和显示 HTML 元素。speed 参数规定隐藏/显示的速度，可以取以下值："slow(缓慢的)"、"fast(快速的)" 或毫秒，可选的 callback 参数是隐藏或显示完成后所执行的函数名称

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

jQuery 效果 - 淡入淡出通过 jQuery，您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法：fadeIn()，用于淡入已隐藏的元素。fadeOut()，用于淡出显示的元素。

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

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

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

jQuery 拥有以下滑动方法：slideDown()，用于向下滑动元素。

slideUp()，用于向上滑动元素。

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

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

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

jQuery 效果- 动画jQuery animate() 方法允许您创建自定义的动画。

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

jQuery效果−隐藏和显示隐藏、显示、切换，滑动，淡入淡出，以及动画。

slow(缓慢的)，可用作动作时间。

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

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

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

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

jQuery拥有下面四种fade方法：fadeIn()，用于淡入已隐藏的元素。

fadeOut()，用于淡出显示的元素。fadeToggle()，可以在fadeIn()与fadeOut()方法之间进行切换。fadeTo()，允许渐变为给定的不透明度（值介于0与1之间）。

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

jQuery拥有以下滑动方法：slideDown()，用于向下滑动元素。

slideUp()，用于向上滑动元素。

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

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

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

jQuery效果−动画jQueryanimate()方法允许您创建自定义的动画。

语法：(selector).animate({params},speed,callback)，必需的 params 参数定义形成动画的 CSS 属性。
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动，如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
jQuery animate() - 使用相对值，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 “+=” 或 “-=” 。
jQuery animate() - 使用预定义的值，您也可以把属性的动画值设置为 “show”、“hide” 或 “toggle” 。
jQuery animate() - 使用队列功能，默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
jQuery stop() 方法，jQuery stop() 方法用于停止动画或效果，在它们完成之前，stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法：(selector).stop(stopAll,goToEnd);可选的stopAll参数规定是否应该清除动画队列。

默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

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

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

jQueryCallback(回调函数)方法Callback函数在当前动画100许多jQuery函数涉及动画。

这些函数也许会将speed或duration作为可选参数。例子： (selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。

jQuery Callback(回调函数) 方法Callback 函数在当前动画 100% 完成之后执行。许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：(selector).stop(stopAll,goToEnd);可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的goToEnd参数规定是否立即完成当前动画。默认是false。因此，默认地，stop()会清除在被选元素上指定的当前动画。

jQueryCallback(回调函数)方法Callback函数在当前动画100许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。例子：(“p”).hide(“slow”)
speed 或 duration 参数可以设置许多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。

jQuery - 链(Chaining)
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
jQuery 方法链接：直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示：这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
如果需要，我们也可以添加多个方法调用。
提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。
jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

jQuery - 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作：
jQuery 中非常重要的部分，就是操作 DOM 的能力，jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式”。
获得内容 - text()、html() 和 val()：
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr(“要获取的属性”) - 方法用于获取属性值

jQuery - 设置内容和属性

设置内容 - text()、html() 和 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
。。。。。。。。。。。。。。。。。。
text()、html() 以及 val() 的回调函数：
text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
attr() 方法也用于设置/改变属性值。attr() 方法也允许您同时设置多个属性。
attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。
添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容，（仍然该元素的内部），可无限追加。
prepend() - 在被选元素的开头插入内容，可无限追加。
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。
可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素），remove() 方法也可接受一个参数，允许您对被删元素进行过滤，该参数可以是任何 jQuery 选择器的语法。
empty() - 从被选元素中删除子元素

jQuery - 获取并设置 CSS 类

通过 jQuery，可以很容易地对 CSS 元素进行操作。
jQuery 拥有若干进行 CSS 操作的方法：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对addClass()和removeClass() 的切换

jQuery css() 方法

css() - 设置或返回被选元素的一个或多个样式属性
如需返回指定的 CSS 属性的值，请使用如右所示语法：css("(属性名)propertyname")。
如需设置指定的 CSS 属性，请使用如右所示语法：css("(属性名)propertyname","(值)value")。
如需设置多个 CSS 属性，请使用如下语法：css({“propertyname”:“value”,“propertyname”:“value”,…})。

jQuery 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery width() 和 height() 方法：

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

jQuery innerWidth() 和 innerHeight() 方法：

innerWidth() 方法返回元素的宽度（包括内边距，不包括外边距）。
innerHeight() 方法返回元素的高度（包括内边距，不包括外边距）。

jQuery outerWidth() 和 outerHeight() 方法：

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

jQuery 遍历：

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
遍历 DOM：jQuery 提供了多种遍历 DOM 的方法，遍历方法中最大的种类是树遍历（tree-traversal）。

jQuery 遍历 - 祖先：

祖先是父、祖父或曾祖父等等，通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()方法，返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
parents()方法，返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()方法，返回介于两个给定元素之间的所有祖先元素。

jQuery 遍历 - 后代：

后代是子、孙、曾孙等等，通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
下面是用于向下遍历 DOM 树的 jQuery 方法：
children()方法，返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。
find()方法，返回被选元素的后代元素，一路向下直到最后一个后代。

jQuery 遍历 - 同胞(siblings)：

同胞拥有相同的父元素，通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
在 DOM 树中水平遍历，有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings() 方法，返回被选元素的所有同胞元素。
next()方法，返回被选元素的下一个同胞元素，该方法只返回一个元素。
nextAll()方法，返回被选元素的所有跟随的同胞元素。
nextUntil()方法，返回介于两个给定参数之间的所有跟随的同胞元素。
prev()，prevAll()，prevUntil()方法，工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

jQuery 遍历- 过滤：

缩小搜索元素的范围：
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first()方法，返回被选元素的首个元素。
last()方法，返回被选元素的最后一个元素。
eq()方法，返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
filter()方法，允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not()方法，返回不匹配标准的所有元素，提示：not() 方法与 filter() 相反。

jQuery - AJAX(创建交互式 Web 应用程序而无需牺牲浏览器兼容性的流行方法)

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）,简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery - AJAX load() 方法：

jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(负荷)(URL(地址),data(数据),callback)。
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

jQuery - AJAX get() 和 post() 方法：

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST：
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
.get()方法通过HTTPGET请求从服务器上请求数据，语法： .get() 方法通过 HTTP GET 请求从服务器上请求数据，语法：.get()方法通过HTTPGET请求从服务器上请求数据，语法：.get(URL,callback)，必需的 URL 参数规定您希望请求的 URL，可选的 callback 参数是请求成功后所执行的函数名。
.post()方法通过HTTPPOST请求向服务器提交数据，语法： .post() 方法通过 HTTP POST 请求向服务器提交数据，语法：.post()方法通过HTTPPOST请求向服务器提交数据，语法：.post(URL,data,callback)，必需的 URL 参数规定您希望请求的 URL。可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

jQuery - noConflict(无抵触) 方法
如何在页面上同时使用 jQuery 和其他框架？

jQuery 和其他 JavaScript 框架：

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
noConflict() 方法，会释放对 $ 标识符的控制，这样其他脚本就可以使用它了，您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。
如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”。

JSONP(跨域) 教程

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。