JS、JQuery、CSS+DIV实例大全part2(共两卷此卷为part2)下载

1努力加油1 2019-03-05 06:32:35

(注意：本资源为本人亲自总结，手工整理出来。共327个应用实例，文件较大共分为两卷 part1 和 part2 两部分,以下是详细目录)

一、J Query实例大全
1) AjaxJavaScript资源
1. JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码
2. js+css简单后台二级树形菜单demo示例
3. JS+CSS美化经典Select选项框插件
4. JS+CSS通用一个页面同时三个焦点图轮换效果完整实例
5. JS+CSS网页版模拟QQ登录框界面特效示例
6. JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果
7. JS版本黑色超动感二级菜单导航模块代
相关下载链接：//download.csdn.net/download/jesse919/3899165?utm_source=bbsseo

...全文

24 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

包含JavaScript、JQuery、CSS+DIV等的实列代码，是一部不可多得的前端开发参考资料。

目录第1部分　CSS基础知识篇　第1章　CSS的初步体验　　　1.1　CSS的概念　　　1.2　使用CSS控制页面　　　1.3　体验CSS　　第2章　CSS的基本语法　　　2.1　CSS选择器　　　2.2　选择器声明　　2.3　CSS的继承　第3章　用CSS设置丰富的文字效果　　　3.1　CSS文字样式　　3.2　文字实例一：模拟Google公司Logo　　　3.3　文字实例二：制作页面的五彩标题　　　3.4　CSS段落文字　　3.5　段落实例：百度搜索　　第4章　用CSS设置图片效果　　　4.1　图片样式　　　4.2　图片的对齐　　4.3　图文混排　　　4.4　图文实例：八仙过海　　第5章　用CSS设置网页中的背景　　　5.1　背景颜色　　　5.2　背景图片　　　5.3　背景综合一：我的个人主页　　　5.4　背景综合二：古词《念奴娇·赤壁怀古》　　第6章　用CSS设置表格与表单的样式　　　6.1　控制表格　　　6.2　表格实例一：隔行变色　　　6.3　表格实例二：鼠标经过时变色的表格　　　6.4　表格实例三：日历　　　6.5　CSS与表单　　　6.6　综合实例一：直接输入的Excel表格　　　6.7　综合实例二：模仿新浪网民调查问卷　　第7章　用CSS设置页面和浏览器的元素　　　7.1　丰富的超链接特效　　7.2　鼠标特效　　7.3　页面滚动条　　第8章　用CSS制作实用的菜单　　　8.1　项目列表　　　8.2　无需表格的菜单　　　8.3　菜单的横竖转换　　　8.4　菜单实例一：百度导航条　　　8.5　菜单实例二：流行的Tab菜单　　第9章　CSS滤镜的应用　　　9.1　滤镜概述　　　9.2　通道（Alpha）　　　9.3　模糊（Blur）　　　9.4　运动模糊（Motion Blur）　　　9.5　透明色（Chroma）　　　9.6　下落的阴影（Dropshadow）　　　9.7　翻转变换（Flip）　　　9.8　光晕（Glow）　　　9.9　灰度（Gray）　　　9.10　反色（Invert）　　　9.11　遮罩（Mask）　　　9.12　阴影（Shadow）　　　9.13　X射线（X-ray）　　　9.14　浮雕纹理（Emboss和Engrave）　　　9.15　波浪（Wave）　第2部分　CSS+DIV美化和布局篇　第10章　理解CSS定位与div布局　　　10.1　 div 标记与 span 标记　　10.2　盒子模型　　10.3　元素的定位　　　10.4　定位实例一：轻轻松松给图片签名　　　10.5　定位实例二：文字阴影效果　　第11章　CSS+div布局方法剖析　　　11.1　CSS排版观念　　　11.2　固定宽度且居中的版式　　11.3　左中右版式　　　11.4　块的背景色问题　　11.5　排版实例：电子相册　　　11.6　div排版与传统的表格方式排版的分析　　第12章　CSS+div美化与布局实战　　　12.1　框架搭建　　　12.2　实例一：蓝色经典　　　12.3　实例二：清明上河图　　　12.4　实例三：交河故城　　　12.5　自动选择CSS样式　第3部分　CSS混合应用技术篇　第13章　CSS与JavaScript的综合应用　　　13.1　JavaScript概述　　13.2　JavaScript语法基础　　13.3　实例一：输入时高亮显示的Excel表格　　　13.4　实例二：由远到近的文字　　　13.5　实例三：跑马灯特效　　　13.6　实例四：图片淡入淡出　　　13.7　实例五：CSS实现PPT幻灯片　　　13.8　实例六：灯光效果　　　13.9　实例七：舞台灯光　　　13.10　实例八：探照灯　　　13.11　实例九：鼠标文字跟随　　第14章　CSS与XML的综合运用　　　14.1　XML基础　　　14.2　XML链接CSS文件　　　14.3　XML文字阴影效果　　　14.4　XML古诗字画　　　14.5　XML实现隔行变色的表格　　第15章　CSS与Ajax的综合应用　　　15.1　Ajax概述　　　15.2　Ajax入门　　15.3　Ajax实例：能够自由拖动布局区域的网页　第4部分　综合案例篇　第16章　我的博客　　　16.1　分析构架　　　16.2　模块拆分　　　16.3　整体调整　　第17章　小型工作室网站　　　17.1　分析构架　　　17.2　模块拆分　　17.3　整体调整　　第18章　企业网站　　　18.1　分析构架　　18.2　模块拆分　　18.3　整体调整　　第19章　网上购物网站　　　19.1　分析构架　　19.2　模块分析　　19.3　整体调整　　第20章　旅游网站　　　20.1　分析构架　　　20.2　模块拆分　　20.3　整体调整精通JavaScript+jQuery 书籍目录：第1部分　JavaScript.cCSS与DOM基础篇　　第1章　ccJavaScript概述　　1.1　JavaScript的起源　　1.2　浏览器之争　　　1.2.1　DHTML 　　　1.2.2　浏览器之间的冲突　　　1.2.3　标准的制定　　　1.3　JavaScript的实现　　　1.3.1　ECMAScript 　　　1.3.2　DOM 　　　1.3.3　BOM 　　　1.3.4　新的开始　　1.4　Web标准　　　1.4.1　Web标准概述　　　1.4.2　结构.c表现和行为的分离　第2章ccJavaScript基础　　2.1　JavaScript的语法　　2.2　变量　　2.3　数据类型　　　2.3.1　字符串 .　　　2.3.2　数值　　　2.3.3　布尔型　　　2.3.4　类型转换　　　2.3.5　数组　　2.4　关键字　　2.5　保留字　　2.6　条件语句　　　2.6.1　比较操作符　　　2.6.2　逻辑操作符　　　2.6.3　if语句　　　2.6.4　switch语句　　2.7　循环语句　　　2.7.1　while语句　　　2.7.2　do…while语句　　　2.7.3　for语句　　　2.7.4　break和continue语句　　　2.7.5　for…in语句　　　2.7.6　实例：九九乘法表　　2.8　函数　　　2.8.1　定义和调用函数　　　2.8.2　用arguments对象访问函数的参数　　　2.8.3　实例：杨辉三角　　2.9　其他对象　　　2.9.1　对象简述　　　2.9.2　时间日期：Date对象　　　2.9.3　数学计算：Math对象　　2.10　BOM基础　　　2.10.1　window对象　　　2.10.2　document对象　　　2.10.3　location对象　　　2.10.4　navigator对象　　　2.10.5　screen对象　第3章　ccCSS基础　　3.1　CSS的概念　　　3.1.1　标记的概念　　　3.1.2　传统HTML的缺点　　　3.1.3　CSS的引入　　　3.1.4　浏览器与CSS 　　3.2　使用CSS控制页面　　　3.2.1　行内样式　　　3.2.2　内嵌式　　　3.2.3　链接式　　　3.2.4　导入样式　　3.3　CSS选择器　　　3.3.1　标记选择器　　　3.3.2　类别选择器　　　3.3.3　ID选择器　　　3.3.4　选择器集体声明　　　3.3.5　选择器的嵌套　　　3.3.6　子选择器　　　3.3.7　属性选择器　　3.4　CSS设置文字效果　　　3.4.1　CSS文字样式　　　3.4.2　CSS段落文字　　　3.4.3　首字放大　　3.5　ccCSS设置图片效果　　　3.5.1　图片的边框　　　3.5.2　图文混排　　3.6　CSS设置页面背景　　　3.6.2　背景图片　　　3.6.3　背景图的重复　　　3.6.4　背景样式综合设置　　3.7　CSS设置超链接效果　　3.8　CSS制作实用菜单　　　3.8.1　项目列表　　　3.8.2　无需表格的菜单　第4章　ccCSS进阶　　4.1　标记与标记　　　4.1.1　概述　　　4.1.2　与的区别　　4.2　盒子模型　　4.3　元素的定位　　　4.3.1　float定位　　　4.3.2　position定位　　　4.3.3　z-index空间位置　　4.4　CSS排版观念　　　4.4.1　将页面用div分块　　　4.4.2　设计各块的位置　　　4.4.3　用CSS定位　　4.5　排版实例：我的博客　　　4.5.1　设计分析　　　4.5.2　排版构架　　　4.5.3　导航与Banner 　　　　4.5.4　左侧列表　　　4.5.5　内容部分　　　4.5.6　footer脚注　　　4.5.7　整体调整　　4.6　JavaScript与CSS 　　　4.6.1　颜色渐变的文字　　　4.6.2　鼠标文字跟随　　　…… 第2部分　JavaScript.cCSS.cDOM高级篇第3部分　jQuery框架篇第4部分　综合案例篇

JavaScript jQuery 项目实战系列教程能掌握JS和Jquery的基本技能，能完成基本的网页特效！

选择器速度提升
选择器的速度大幅度提高了，下表为jQuery1.1.2和1.1.3的选择器速度对比，提高了8倍多
Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement
IE 6 4890ms 661ms 740%
Firefox 2 5629ms 567ms 993%
Safari 2 3575ms 475ms 753%
Opera 9.1 3196ms 326ms 980%
Average improvement: 867%

下表为jQuery1.1.3与常用的一些JS库选择器的对比：
Browser Prototype jQuery Mootools Ext Dojo
IE 6 1476ms 661ms 1238ms 672ms 738ms
Firefox 2 219ms 567ms 220ms 951ms 440ms
Safari 2 1568ms 475ms 909ms 417ms 527ms
Opera 9.1 220ms 326ms 217ms 296ms 220ms

更新项目

New Selectors
Unicode Selectors: This is a huge addition for those of you who want to use Unicode attribute values, IDs, class names, or tag names. You can now use them directly in jQuery selectors:

$("div.台北")
$("div#台北")
$("foo_bar台北")
$("div[@id=台北]")Escape Selectors: A frequently requested feature you can now select elements by ID (or other selector) that uses a special character, for example this will find the div that has the ID of “foo.bar”:

$("div#foo\\.bar")Inequality Selector: While this selector isn’t part of the CSS specification, it’s frequently used and included in other selector libraries, so we decided to add it in:

$("div[@id!=test]"):nth-child() improvements: This selector allows you to locate specific child elements. We’ve supported selectors like :nth-child(1) and :nth-child(odd) since the beginning of jQuery, now we’ve added advanced :nth-child selectors, such as:

$("div:nth-child(2n)")
$("div:nth-child(2n+1)")
$("div:nth-child(n)")Space-separated attributes: After being removed in jQuery 1.0, this selector has now been brought back by popular demand. It allows you to locate individual items in a space-separated attribute (such as a class or rel attribute).

$("a[@rel~=test]")Animation Improvements

参数:
options
返回值:
XMLHttpRequest
使用HTTP请求一个页面。
这是jQuery的低级AJAX实现。要查看高级抽象，见$.set、$.post等，这些方法更易于理解和使用。但是功能上有限制(例如，没有错误处理函数)。
警告：如果数据类型指定为"script"，那么POST自动转化为GET方法。(因为script会作为一个嵌入页面的script标签进行载入)
$.ajax()函数返回它创建的XMLHttpRequest对象。在大部分情况下，你不需要直接操作此对象。通常，这个XMLHttpRequest对象主要用于需要手动中断XMLHttpRequest请求的时候。
注意：如果你指明了下面列出的数据类型，请确保服务端发送了正确的MIME响应类型(如. xml 的类型是 "text/xml")。错误的MIME类型能够导致脚本出现意想不到的问题。请查看AJAX的范例来了解数据类型的更多信息。
$.ajax()函数需要一个参数，一个包含有键/值对的对象，用于初始化并操作请求对象。
在jQuery 1.2版本中，如果你指明了一个JSONP回调函数，你就可以从其它的域中载入JSON类型的数据，写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串，执行你指定的回调函数。或者，你也可以指定jsonp的数据类型的回调函数，此函数会自动添加到Ajax请求中。
参数选项:
async(true) 数据类型: Boolean
默认情况下，所有的请求都是异步发送的(默认为true)。如果需要发送同步请求, 设置选项为false。注意，同步请求可能会暂时的锁定浏览器, 当请求激活时不能进行任何操作。
beforeSend 数据类型: Function
一个预处理函数用于在发送前修改XMLHttpRequest对象，设置自定义头部等。 XMLHttpRequest作为惟一的参数被传递。这是一个 Ajax 事件。 function (XMLHttpRequest) {
this; // the options for this ajax request
}cache(true) 数据类型: Boolean
jQuery 1.2中新添加的参数, 如果设为false，则会强制浏览器不缓存请求的页面。
complete 数据类型: Function
当请求完成时执行的函数(在成功或失败之后执行)。这个函数有2个参数: XMLHttpRequest对象和一个描述HTTP相应的状态字符串。这是一个 Ajax 事件。 function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}contentType("application/x-www-form-urlencoded") 数据类型: String
发送到服务器的数据的内容类型。默认是 "application/x-www-form-urlencoded", 适合大多数情况。
data 数据类型: Object,String
要发送给服务器的数据。如果不是字符串，那么它会被转化为一个查询字符串。在GET请求中它被添加到url的末尾。要防止这种自动转化，请查看processData选项。数据对象必须是一组键/值对。如果键对应的值是数组，jQuery会将其值赋给同一个键属性。例如 {foo:["bar1", "bar2"]} 变为 '&foo=bar1&foo=bar2'。
dataType( Intelligent Guess (xml or html)) 数据类型: String
期待由服务器返回值类型。如果没有明确指定，jQuery会根据实际返回的MIME类型自动的将responseXML或responseText传递给success指定的回调函数。有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有： "xml": 返回一个可以由jQuery处理的XML文档。
"html": 返回文本格式的HTML代码。包括求值后的脚本标记。
"script": 将响应作为Javascript语句求值，并返回纯文本。不缓存此脚本，除非设置了cache选项。设置为"script"类型会将post方法转换为get方法。
"json": 将响应作为JSON求值，并返回一个Javascript对象。
"jsonp": 使用JSONP载入一个JSON代码块. 会在URL的末尾添加"?callback=?"来指明回调函数。(jQuery 1.2以上的版本支持)
"text": 文本格式的字符串
error 数据类型: Function
请求失败时执行的函数。函数具有3个参数: XMLHttpRequest对象,一个描述产生的错误类型和一个可选的异常对象, 如果有的化。这是一个Ajax 事件。function (XMLHttpRequest, textStatus, errorThrown) {
// typically only one of textStatus or errorThrown
// will have info
this; // the options for this ajax request
}global(true) 数据类型: Boolean
是否为当前的请求触发全局AJAX事件处理函数，默认值为true。设置为false可以防止触发像ajaxStart或ajaxStop这样的全局事件处理函数。这可以用于控制多个不同的Ajax事件。
ifModified(false) 数据类型: Boolean
只有响应自上次请求后被修改过才承认是成功的请求。是通过检查头部的Last-Modified值实现的。默认值为false，即忽略对头部的检查
jsonp 数据类型: String
在jsonp请求中重新设置回调的函数。这个值用于代替'callback=?'中的查询字符串。'callback=?'位于get请求中url的末尾或是post请求传递的数据中。因此设置 {jsonp:'onJsonPLoad'} 会将 'onJsonPLoad=?' 传送给服务器。
processData(true) 数据类型: Boolean
在默认的情况下，如果data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串，以适应默认的content-type－－"application/x-www-form-urlencoded"。如果想发送DOMDocuments，就要把这个选项设置为false。
success 数据类型: Function
当请求成功时调用的函数。这个函数会得到二个参数：从服务器返回的数据（根据“dataType”进行了格式化）和一个描述HTTP相应的状态字符串。这是一个 Ajax 事件。 function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}timeout 数据类型: Number
如果通过$.ajaxSetup设置了一个全局timeout，那么此函数使用一个局部timeout覆盖了全局timeout(单位为毫秒)。例如，你可以设置比较长的延迟给一个特殊的请求，同时其他所有请求使用1秒的延迟。有关全局延迟，见$.ajaxTimeout()。
type("GET") 数据类型: String
请求的类型 ("POST" 或 "GET"), 默认是 "GET"。注意：其他的HTTP请求方法，如PUT和DELETE，在这里也可以使用，当时它们并不被所有的浏览器支持。
url(The current page) 数据类型: String
请求发送的目标URL地址
username 数据类型: String
username可用于在响应一个HTTP连接时的认证请求。实例
载入并执行一个JavaScript文件。
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});保存数据到服务器，完成后通知用户。
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});取得一个HTML页面的最新版本。
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});同步载入数据。在执行请求的时候阻塞浏览器。这是在保证数据的同步性比交互更重要的情况下的一种更好的方法。
var html = $.ajax({
url: "some.php",
async: false
}).responseText;向服务器发送xml文档数据。通过设置processData选项为false，将数据自动转换为string的动作被禁止了。
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});load( url, [data], [callback] )参数:
url (String): 装入页面的URL地址。
params (Map): （可选）发送到服务端的键／值对参数。
callback (Function): （可选）当数据装入完成时执行的函数. function (responseText, textStatus, XMLHttpRequest) {
this; // dom element
}返回值:
jQuery
装入一个远程HTML内容到一个DOM结点。默认使用get方法发送请求，但如果指定了额外的参数，将会使用post方法发送请求。在 jQuery 1.2中，可以在URL参数中指定一个jQuery选择器，这会过滤返回的HTML文档，只取得文档中匹配选择器的元素。此语法类似于"url #some > selector"。
实例
载入文档的sidebar的导航部分到一个无序列表中。
$("#links").load("/Main_Page #p-Getting-Started li");将feeds.html文件载入到id为feeds的div中。
$("#feeds").load("feeds.html");同上，但是发送了附加的参数，并且在响应结束后执行一个自定义函数。
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});jQuery.get( url, [data], [callback] )参数:
url (String): 装入页面的URL地址
Map(可选): （可选）发送到服务端的键／值对参数
callback (Function): （可选）当远程页面装入完成时执行的函数 function (data, textStatus) {
// data可以是xmlDoc, jsonObj, html, text, 等...
this; // the options for this ajax request
}返回值:
XMLHttpRequest
使用GET请求一个页面。
这是向服务器发送get请求的简单方法。它可以指定一个回调函数，在请求完成后执行(只有在请求成功时)。如果还需要设置error和success回调函数，则需要使用$.ajax。
实例
请求test.php页,忽略返回值.
$.get("test.php");请求test.php页并发送附加数据(忽略返回值).
$.get("test.php", { name: "John", time: "2pm" } );显示从test.php请求的返回值(HTML 或 XML, 根据不同返回值).
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});显示向test.cgi发送附加数据请求的返回值 (HTML 或 XML, 根据不同返回值).
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});jQuery.getJSON( url, [data], [callback] )参数:
url (String): 装入页面的URL地址
Map(可选): （可选）发送到服务端的键／值对参数
callback (Function): （可选）当数据装入完成时执行的函数 function (data, textStatus) {
// data will be a jsonObj
this; // the options for this ajax request
}返回值:
XMLHttpRequest
使用GET请求JSON数据。
在jQuery 1.2版本中，如果你指明了一个JSONP回调函数，你就可以从其它的域中载入JSON类型的数据，写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串，执行你指定的回调函数。或者，你也可以指定jsonp的数据类型的回调函数，此函数会自动添加到Ajax请求中。注意: 请记住, that lines after this function will be executed before callback.
实例
从Flickr JSONP API中载入最新的四幅猫的图片
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});从test.js载入JSON数据，从返回的JSON数据读取name值。
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});从test.js载入JSON数据，传递一个附加参数，从返回的JSON数据读取name值。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});显示向test.php发送请求的返回值 (HTML 或 XML, 根据不同返回值).
$.getIfModified("test.php", function(data){
alert("Data Loaded: " + data);
});显示向test.php发送请求的返回值 (HTML 或 XML, 根据不同返回值)，提供了一个附加的参数.
$.getIfModified("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});列出从pages.php返回的查询结果，将返回的数组转化为一段HTML代码。
var id=$("#id").attr("value");
$.getJSON("pages.php",{id:id},dates);
function dates(datos)
{
$("#list").html("Name:"+datos[1].name+"
"+"Last Name:"+datos[1].lastname+"
"+"Address:"+datos[1].address);
}jQuery.getScript( url, [callback] )参数:
url (String): 装入页面的URL地址
callback (Function): （可选）当数据装入完成时执行的函数 function (data, textStatus) {
// data应该是javascript
this; // the options for this ajax request
}返回值:
XMLHttpRequest
使用GET请求JavaScript文件并执行。
在jQuery 1.2前, getScript只能从页面所在的主机载入脚本，1.2中, 你可以从任何主机载入脚本。警告: Safari 2 及其更老的版本不能在全局上下文中正确识别脚本。如果你通过getScript载入函数，请保证设置一个延迟来执行这个脚本。
实例
我们动态的载入一个新的官方jQuery颜色动画插件，载入后绑定一些动画效果到元素上。
$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});载入test.js JavaScript文件并执行。
$.getScript("test.js");载入test.js JavaScript文件并执行,当执行结束后显示一条警告信息。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});jQuery.post( url, [data], [callback], [type] )参数:
url (String): 装入页面的URL地址
Map(可选): （可选）发送到服务端的键／值对参数
callback (Function): （可选）当数据装入完成时执行的函数 function (data, textStatus) {
// data可能是 xmlDoc, jsonObj, html, text, 等...
this; // the options for this ajax request
}String $.postJSON = function(url, data, callback) {
$.post(url, data, callback, "json");
};返回值:
XMLHttpRequest
使用POST请求一个页面。
这是向服务器发送post请求的简单方法。它可以指定一个回调函数，在请求完成后执行(只有在请求成功时)。如果还需要设置error和success回调函数，则需要使用$.ajax。
ajaxComplete( callback )参数:
callback (Function): 要执行的函数 function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}返回值:
jQuery
当一个AJAX请求结束后，执行一个函数。这是一个Ajax事件
实例
当AJAX请求完成时显示一条信息。
$("#msg").ajaxComplete(function(request, settings){
$(this).append("

Request Complete.

");
});ajaxError( callback )参数:
callback (Function): 要执行的函数 function (event, XMLHttpRequest, ajaxOptions, thrownError) {
// thrownError only passed if an error was caught
this; // dom element listening
}返回值:
jQuery
当一个AJAX请求失败后，执行一个函数。这是一个Ajax事件.
实例
当AJAX请求错误时显示一条信息。
$("#msg").ajaxError(function(request, settings){
$(this).append("

Error requesting page " + settings.url + "

");
});ajaxSend( callback )参数:
callback (Function): 要执行的函数 function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}返回值:
jQuery
在一个AJAX请求发送时，执行一个函数。这是一个Ajax事件.
实例
当AJAX请求发出后显示一条信息。
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append(" });ajaxStart( callback )参数:
callback (Function): 要执行的函数 function () {
this; // dom element listening
}返回值:
jQuery
在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件.
实例
当AJAX请求开始(并还没有激活时)显示loading信息。
$("#loading").ajaxStart(function(){
$(this).show();
});ajaxStop( callback )参数:
callback (Function): 要执行的函数 function () {
this; // dom element listening
}返回值:
jQuery
当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件.
实例
当所有AJAX请求都停止时，隐藏loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
});ajaxSuccess( callback )参数:
callback (Function): 要执行的函数 function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}返回值:
jQuery
当一个AJAX请求成功完成后，执行一个函数。这是一个Ajax事件
实例
当AJAX请求成功完成时，显示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("

Successful Request!

");
});jQuery.ajaxSetup( options )参数:
Options: 用于Ajax请求的键／值对
为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
实例
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });serialize( )返回值:
jQuery
以名称和值的方式连接一组input元素。返回值类似于： single=Single2&multiple=Multiple&multiple=Multiple3&radio=radio2 。在jQuery 1.2中。serialize方法实现了正确表单元素序列，而不再需要插件支持。
实例
连接表单元素的一组查询字符串，可用于发送Ajax请求。
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}

$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();serializeArray( )返回值:
jQuery
连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。
实例
从form中取得一组值，显示出来
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}

$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......

下载资源悬赏专区

12,799

社区成员

12,338,221

社区内容

发帖

与我相关

我的任务

其他技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章