jquery实例 jQuery菜鸟教程
大家好，感谢邀请，今天来为大家分享一下jquery实例的问题，以及和jQuery菜鸟教程的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
jQuery开发技术详解的前言
jQuery是一个优秀的开源JavaScript库。它的体积很小，代码风格独特而又优雅，改变了JavaScript程序员编写程序的方式和思路。jQuery库有一条设计理念，那就是“写的少，做的多”（write less, do more）。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的AJAX使其在众多优秀的JavaScript库中脱颖而出，独树一帜，赢得了众多使用者的拥护和信赖。
jQuery的语法简单易学，而且具有很强大的跨平台性，可以兼容多种核心的浏览器。目前，已经有一百多个插件来扩充jQuery的功能，使得jQuery能满足几乎所有客户端的脚本开发。
但是，目前来说专门介绍jQuery的书籍还很少，中文的书籍更是少之又少，这就给国内一些想要学习jQuery的Web开发爱好者制造了不小的障碍。为了方便广大读者学习，本人花费将近一年的时间写作这本书。本书通过理论与实践相结合的方式，由浅入深、循序渐进地介绍jQuery库的使用；同时又辅以大量真实的开发案例，可以让用户很轻松地就能使用jQuery来增强网页的互动性，做出更好的Web前端产品以及各种更炫更酷的效果。
本书的特点
1．循序渐进，由浅入深
阅读本书不需要对jQuery有所了解，甚至对JavaScript也不需要有很深的了解。为了方便读者学习，本书在第一篇首先介绍Web开发的基础知识，如JavaScript的基础语法等，以期读者可以在不参考其他资料的情况下顺利过渡到jQuery的学习和使用。
2．技术全面，内容充实
本书是一本关于jQuery的初级入门读物。书中详细介绍了jQuery 1.3.2几乎所有的特性和属性，并对每个模块均有很翔实的实例讲解。以期读者对jQuery有个很好的整体把握，同时以后需要用到一些特性的时候，可以进行查阅。另外，本书还在开始介绍了Web开发的基础知识，如Web开发中比较常用的工具等，可以让读者从一个完全的门外汉很快变成业内人士。
3．图文结合，理解深刻
讲解技术类的知识，最好的方式就是面对面的讲授，但是图书却不太容易做到这一点。为了弥补这个缺憾，本书在讲解具体实例的时候，除了大量的注释、讲解之外，还辅以一些简洁明了的图片，以期让读者对实例以及jQuery效果有更直观的理解。
4．真实案例，随学随用
本书是一本注重实践的书。因此，有大量的篇幅用在了真实的Web开发案例中。本书第三篇通过若干比较完整的实例来讲解jQuery在具体项目中的使用，如增强用户体验、AJAX跨域操作、与PHP配合构建动态网站、键盘操作以及将数据以可视化形式显示等。读者可以通过这些实例对jQuery的理论知识有更加深刻的理解，同时，这些实例稍作修改，就可以用在读者正在开发的项目中去，来实现各种精彩的效果。
5．配有源代码光盘，加速学习
为了让初学者快速入门，本书配套光盘中附赠了本书中的所有源代码。读者可以参考阅读。但是，笔者依然强烈建议，在学习本书的时候应该边学边练。即便不能不看书直接写代码，最好也要对着书上的代码手工敲入一边，以加深印象以及自己对知识本身的理解。
篇名章名内容介绍
第一篇 jQuery预备基础篇第1章 Web开发的发展与趋势本章主要介绍当前Web开发的现状、Web的标准概念、Web 2.0与Web 1.0的区别与联系，并通过当前的一些使用jQuery构建的大型网站，对jQuery能实现的效果进行简单介绍，以期读者对jQuery的强大有个更加直观的了解。
第2章 JavaScript基础本章主要介绍JavaScript的基础知识，包括JavaScript中的变量、数据类型、操作符的使用、流程控制的方法，以及JavaScript数组以及函数的创建和使用。
第3章文档对象模型（DOM）本章主要介绍DOM的基本概念，如DOM的树结构以及节点的概念等。同时，也将介绍JavaScript中访问以及操作DOM节点的方法，包括获取元素、获取元素内的文本和元素内的HTML内容、创建一个新的DOM节点、插入或者删除一个DOM节点元素等。通过本章的介绍，读者可以对DOM的操作方式有所了解，为后续章节使用jQuery操作DOM元素做好铺垫。
第4章工欲善其事，必先利其器——开发工具本章将介绍网页设计过程中经常使用的工具，如SciTE、Notepad++等代码编辑工具，使用Blackbird、Firebug以及Venkman对JavaScript代码进行调试，以及Web Developer Toolbar工具栏的使用、JavaScript代码的压缩及混淆工具等。这些工具可以有效地提高编写代码及设计网站的效率，有必要熟练掌握其使用方法。
第二篇 jQuery基础篇第5章 jQuery快速上手本章将介绍了jQuery的由来和优势，并对目前几个流行的JavaScript库进行了介绍和对比。另外还将演示一个最简单的jQuery程序，通过这个示例，让读者对jQuery的$(document).ready()函数有一个基本的认识，并对jQuery选择器的使用以及click()函数也有初步的概念。
第6章使用选择器获得要操作的元素本章将介绍jQuery选择器中的基本选择器、层次选择器以及滤镜选择器，滤镜选择器中又对基本滤镜选择器、子元素滤镜选择器、表单滤镜选择器以及属性滤镜选择器分别结合具体实例展开详细的介绍。
第7章操作得到的元素本章介绍jQuery中操作得到的元素以及元素集的方法，包括对属性、样式类、CSS以及内容的操作，对元素集查找以及筛选的函数，以及jQuery中的链式操作等。通过使用这些函数，可以很方便地操作页面上的任意元素。
续表
篇名章名内容介绍
第二篇 jQuery基础篇第8章使用jQuery进行DOM操作本章介绍jQuery中比较常用的对页面上DOM元素的操作方式，包括在元素内部以及外部插入元素，对页面上的DOM元素进行包裹、替换、删除以及克隆等操作。通过熟练使用这些DOM元素操作函数，可以很方便地对页面内容进行操控，再结合其他效果函数的使用，将可以为用户提供更加强大且有很好用户体验的应用。
第9章 jQuery中的事件处理本章介绍jQuery中的事件处理机制。jQuery在JavaScript基本的事件处理机制的基础上，对其进行了增强和扩展，使得jQuery事件处理不但有优雅的语法，而且功能也更加强大。本章首先介绍了$(document).ready()事件的概念、jQuery事件的绑定与反绑定、触发器等，并对jQuery中众多的内置事件类型作了简单的分类和介绍。
第10章 jQuery中的动画与效果本章介绍jQuery中的动画与效果，包括隐藏与显示、滑动效果以及淡入淡出效果等。本章将结合实例讨论这些效果的实现和应用，并将介绍jQuery中使用animate自定义动画的方法，以及jQuery中动画队列的概念及其使用方法。
第11章 jQuery与AJAX本章将介绍jQuery中AJAX的使用方法。首先介绍AJAX的实现原理及其最核心的组成部分XMLHttpRequest对象的概念和使用方式；然后介绍jQuery中用来支持AJAX的几个核心函数，包括load、get、post、getScript以及getJSON等，并对最核心的AJAX函数作了较为详细的介绍；同时，还将介绍jQuery中在使用AJAX时支持的几种服务器端数据类型返回方式，以及jQuery在实现AJAX完整请求过程中的各个步骤以及各个阶段的主要功能。
第12章回头重看jQuery——核心及工具本章将对jQuery的核心方法进行回顾，主要介绍jQuery中对象访问的通用函数、jQuery中的数据缓存机制和插件机制，以及jQuery中的常用工具类。使用这些工具类，可以更方便地完成对浏览器检测、获得及处理数组与对象等操作。
第三篇 jQuery应用篇第13章 jQuery增强用户体验本章将介绍目前在Web设计领域比较流行的网站内容的动态加载技术的jQuery实现，如“高亮菜单”、“加载提示”等，并将通过一个动态切换样式的例子进一步展示如何满足用户多元化、个性化的需求，对jQuery的cookie插件也将有所介绍。
第14章 jQuery中使用AJAX跨域操作本章将介绍使用jQuery中的AJAX技术进行跨域操作的方法，并通过对flickr、delicious以及Google AJAX Search等网站API调用的实例，演示Script方式以及JSONP方式在跨域操作中的应用。使用该特性，可以很容易地做出新颖有趣的混搭应用。
第15章 jQuery+ PHP动态网站实践本章将介绍jQuery在PHP动态网站建站中的使用，通过两个实例来具体讲解：一个是构建网站的标签云功能；一个是构建简单的微博客系统。通过这些实例，读者可以了解，使用jQuery并结合一种动态脚本语言，可以实现很多很丰富的内容。
第16章 jQuery键盘操作本章将介绍使用jQuery实现与键盘操作相关的功能，例如：如何在网页上使用快捷键进行页面内容的切换，或者使用jQuery来实现软键盘的操作等。
续表
篇名章名内容介绍
第三篇 jQuery应用篇第17章 jQuery可视化数据显示本章将介绍数据的可视化显示对用户的理解以及阅读带来的优越性，以及使用jQuery插件对数据进行可视化的方法。在本章的实例中，将使用jQuery为其添加更加丰富的功能，例如Tooltip提示等，进一步增强了用户体验。读者可以在本文基础上对flot插件进行深入研究，实现出更加复杂与实用的图表。
适合的读者
本书是一本注重jQuery理论与Web开发实践相结合的基础教程，章与章之间的内容相对独立，读者可以根据自己的情况选择阅读。适合各层次的Web开发人员阅读和参考，主要适合于：
Web前端开发人员
Web后台设计人员
Web设计爱好者
大中专院校学生
本书作者
本书由季国飞编写，参与编写的人员有昊燃、方振宇、陈冠佐、傅奎、陈勤、梁洋洋、毕梦飞、陈庆、柴相花、陈非凡、陈华、陈嵩、承卓、陈先在，在此表示感谢！
季国飞
2010年1月
jQuery.extend 函数代码详解
JQuery的extend扩展方法：
Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。
一、Jquery的扩展方法原型是:
复制代码代码如下:
extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
复制代码代码如下:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
复制代码代码如下:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
复制代码代码如下:
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
二、省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
1、$.extend(src)
该方法就是将src合并到jquery的全局对象中去，如：
复制代码代码如下:
$.extend({ hello:function(){alert('hello');}});
就是将hello方法合并到jquery的全局对象中。
2、$.fn.extend(src)该方法将src合并到jquery的实例对象中去，如:
复制代码代码如下:
$.fn.extend({ hello:function(){alert('hello');}});
就是将hello方法合并到jquery的实例对象中。
下面例举几个常用的扩展实例：
复制代码代码如下:
$.extend({net:{}});
这是在jquery全局对象中扩展一个net命名空间。
复制代码代码如下:
$.extend($.net,{ hello:function(){alert('hello');}})
这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
三、Jquery的extend方法还有一个重载原型：
复制代码代码如下:
extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
复制代码代码如下:
var result=$.extend( true,{},{ name:"John", location:{city:"Boston",county:"USA"}},{ last:"Resig", location:{state:"MA",county:"China"}});
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
复制代码代码如下:
result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
复制代码代码如下:
var result=$.extend( false,{},{ name:"John", location:{city:"Boston",county:"USA"}},{ last:"Resig", location:{state:"MA",county:"China"}});
那么合并后的结果就是:
复制代码代码如下:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
以上就是$.extend()在项目中经常会使用到的一些细节。
jQuery.ajax()的参数
options(可选)ObjectAJAX请求设置。所有选项都是可选的。 asyncBoolean
(默认: true)默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)Function
发送请求前可修改 XMLHttpRequest对象的函数，如添加自定义 HTTP头。XMLHttpRequest对象是唯一的参数。这是一个 Ajax事件。如果返回false可以取消本次ajax请求。
function(XMLHttpRequest){ this;//调用本次AJAX请求时传递的options参数}cacheBoolean(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2新功能，设置为 false将不缓存此页面。
complete(XHR, TS)Function
请求完成后回调函数(请求成功或失败之后均调用)。参数： XMLHttpRequest对象和一个描述成功请求类型的字符串。 Ajax事件。
function(XMLHttpRequest, textStatus){ this;//调用本次AJAX请求时传递的options参数}contentTypeString(默认: application/x-www-form-urlencoded)发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给$.ajax()那么他必定会发送给服务器（即使没有数据要发送）
contextObject
这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：
$.ajax({ url: test.html, context: document.body, success: function(){$(this).addClass(done);}});
dataObject,String
发送到服务器的数据。将自动转换为请求字符串格式。GET请求中将附加在 URL后。查看 processData选项说明以禁止此自动转换。必须为 Key/Value格式。如果为数组，jQuery将自动为不同值对应同一个名称。如{foo:[bar1, bar2]}转换为'&foo=bar1&foo=bar2'。
dataFilterFunction
给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){//对Ajax返回的原始数据进行预处理 return data//返回处理后的数据}dataTypeString预期服务器返回的数据类型。如果不指定，jQuery将自动根据 HTTP包 MIME信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
xml:返回 XML文档，可用 jQuery处理。
html:返回纯文本 HTML信息；包含的script标签会在插入dom时执行。
script:返回纯文本 JavaScript代码。不会自动缓存结果。除非设置了cache参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
json:返回 JSON数据。
jsonp: JSONP格式。使用 JSONP形式调用函数时，如 myurl?callback=? jQuery将自动替换?为正确的函数名，以执行回调函数。
text:返回纯文本字符串
errorFunction
(默认:自动判断(xml或 html))请求失败时调用此函数。有以下三个参数：XMLHttpRequest对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是timeout, error, notmodified和 parsererror。Ajax事件。
function(XMLHttpRequest, textStatus, errorThrown){//通常 textStatus和 errorThrown之中//只有一个会包含信息 this;//调用本次AJAX请求时传递的options参数}globalBoolean(默认: true)是否触发全局 AJAX事件。设置为 false将不会触发全局 AJAX事件，如 ajaxStart或 ajaxStop可用于控制不同的 Ajax事件。
ifModifiedBoolean
(默认: false)仅在服务器数据改变时获取新数据。使用 HTTP包 Last-Modified头信息判断。在jQuery 1.4中，他也会检查服务器指定的'etag'来确定数据没有被修改过。
jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代在callback=?这种GET或POST请求中URL参数里的callback部分，比如{jsonp:'onJsonPLoad'}会导致将onJsonPLoad=?传给服务器。
jsonpCallbackString为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
passwordString
用于响应HTTP访问认证请求的密码
processDataBoolean
(默认: true)默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 application/x-www-form-urlencoded。如果要发送 DOM树信息或其它不希望转换的信息，请设置为 false。
scriptCharsetString
只有当请求时dataType为jsonp或script，并且type是GET才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
successFunction
请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。 Ajax事件。
function(data, textStatus){// data可能是 xmlDoc, jsonObj, html, text,等等... this;//调用本次AJAX请求时传递的options参数}
traditionalBoolean
如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param方法。
timeoutNumber
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
typeString
(默认: GET)请求方式(POST或 GET)，默认为 GET。注意：其它 HTTP请求方法，如 PUT和 DELETE也可以使用，但仅部分浏览器支持。
urlString
(默认:当前页地址)发送请求的地址。
usernameString
用于响应HTTP访问认证请求的用户名
xhrFunction
需要返回一个XMLHttpRequest对象。默认在IE下是ActiveXObject而其他情况下是XMLHttpRequest。用于重写或者提供一个增强的XMLHttpRequest对象。这个参数在jQuery 1.3以前不可用。描述:加载并执行一个 JS文件。
jQuery代码:$.ajax({ type: GET, url: test.js, dataType: script});
描述:
保存数据到服务器，成功时显示信息。
jQuery代码:$.ajax({ type: POST, url: some.php, data: name=John&location=Boston, success: function(msg){ alert( Data Saved:+ msg);}});
描述:
装入一个 HTML网页最新版本。
jQuery代码:$.ajax({ url: test.html, cache: false, success: function(html){$(#results).append(html);}});
描述:
同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
jQuery代码: var html=$.ajax({ url: some.php, async: false}).responseText;
描述:
发送 XML数据至服务器。设置 processData选项为 false，防止自动转换数据格式。
jQuery代码:
var xmlDocument= [create xml document];$.ajax({ url: page.php, processData: false, data: xmlDocument, success: handleResponse});
jQuery post实例代码：
$.post(test.php,{name:name,pwd:pwd},function(msg){
alert(msg);
})
test.php里面用$_POST[name]和$_POST[pwd]接收参数.
$.post第一个参数是url，{}这里里面的是参数名称和值之间用:非开，多个值用,分开，最后一个是返回的函数msg就是返回的结果。根据自己的需要返回不用的数据。
$.get和post一样，php接收的话改成$_GET[name]和$_GET[pwd]
好了，文章到此结束，希望可以帮助到大家。