`
letitbe
  • 浏览: 237713 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery与Ajax(转)

阅读更多
在我所知道的主流JavaScript库中,jQuery拥有最棒的Ajax API。最简单的Ajax调用如:
				jQuery('div#intro').load('/some/fragment.html');

代码以GET请求方式,从/some/fragment.html文件中获取HTML片段,并把片段装载到id="intro"的div中。

当 我第一次看到这行代码时,几乎对它没什么印象。这看起来非常简洁,但如果你想用jQuery做些更复杂的事情,比如显示Ajax装载进度,该如何做呢? jQuery为你准备了一些可自定义的事件(ajaxStart,ajaxComplete,ajaxError等等),来实现你想要的代码。同时 jQuery也提供了广泛的底层API,来实现更复杂的Ajax交互:

				jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {
alert('The server said: ' + data);
}); // 以GET方式通过/some/script.php?name=Simon获取数据

jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {
alert('The server said: ' + data);
}); // 以POST方式向/some/script.php发送请求

jQuery.getJSON('/some.json', function(json) {
alert('JSON rocks: ' + json.foo + ' ' + json.bar);
}); // 从/some.json接收并解析数据,把数据转换成JSON格式

jQuery.getScript('/script.js'); // 以GET方式获取/script.js脚本并用eval()执行

http://www.nixsky.com/program/java/2008-02/393.html

选取元素:
jQuery('div.panel')
选取了所有class="panel"的div
jQuery('p#intro')
选取了所有id="intro"的段落
jQuery('div#content a:visible')
选取了id="content"的div中所有可见的链接
jQuery('input[@name=email]')
选取了所有name="email"的输入域
jQuery('table.orders tr:odd')
选取了类名为“orders”的表中所有的奇数行
jQuery('a[@href^="http://"]')
选取了所有(以http://开头的)外部链接
jQuery('p[a]')
选取了所有包含一个或多个链接的段落

上述例子中,:visible和:odd是jQuery实现的扩展,很具特色。而属性的选取使用@作为标记,

其方式和XPath一样,要优于CSS2。

jQuery的这套选取语法包罗万象,有些类似正则表达式,想完全消化是需要花上一段时间的。

$(window.frames["innerIframe"].document).find("a[rel='external']").addClass("external")
.click(function(){window.open(this.href);return false;});});

在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

取消全选
  $("input[@type=checkbox][@checked]").each(function(){
            $(this).attr("checked", '');
        });

如果选中的只有一个,取得选中的值
$("input[@type=checkbox][@checked]").eq(0).val()

分享到:
评论

相关推荐

    Asp.Net MVC之jQuery与AJAX操作实例

    本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一、jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。在Asp.Net MVC项目中,jQuery可以帮助开发者更...

    jquery ajax Datatable与json之间数据转换

    jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...

    jQuery与Ajax教程WORD版

    资源名称:jQuery与Ajax教程 WORD版内容简介:本文档是jQuery与Ajax教程;jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Javascript代码的习惯。希望本文档...

    jquery,ajax的几个小例子

    **jQuery和Ajax技术详解*...总结,jQuery和Ajax的结合大大提高了Web应用的用户体验,使得网页能够在不刷新的情况下与服务器进行通信。通过学习和实践这些基本的Ajax功能,开发者能够构建出更加动态和响应式的网页应用。

    基于jQuery的Ajax聊天室程序

    2. **Ajax**:Ajax的核心是创建XMLHttpRequest对象,用于与服务器进行异步通信。在聊天室中,当用户发送消息时,jQuery的$.ajax()函数会被调用,发送数据到服务器。同时,它也用于接收服务器返回的新消息,更新聊天...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    jquery与ajax调用,有代码 , 有说明,使ajax调用简单

    **jQuery与Ajax调用详解** 在Web开发中,jQuery与Ajax的结合使用极大地简化了异步数据交互的过程,使得前端可以高效地与服务器进行通信,而无需刷新整个页面。本教程将详细介绍如何利用jQuery实现Ajax调用,并通过...

    Ajax里jQuery的ajax与ssh集成

    当我们谈论Ajax与jQuery的ajax方法与SSH框架的集成时,实际上是在讨论如何在前端使用jQuery的Ajax功能与后端SSH框架进行通信,实现数据的无刷新交互。 首先,jQuery的`$.ajax()`方法是核心工具,它允许我们发起异步...

    jquery-ajax实例

    本实例聚焦于"jQuery-AJAX",这是一项核心功能,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。AJAX(异步JavaScript和XML)技术在现代Web开发中扮演着关键角色,而jQuery的ajax方法则提供了...

    jquery,jquery是Ajax的一个框架

    **jQuery:Ajax 的强大工具** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了前端开发中的许多任务...通过学习和熟练掌握 jQuery 与 AJAX 的结合使用,你可以创建出更加交互性强、用户体验优秀的 web 应用。

    jQuery的Ajax实现异步传输List、Map

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交换,极大地提升...

    JQuery+AJAX实现用户名验证

    在IT行业中,前端开发是构建动态网页应用的关键环节,而jQuery和AJAX是其中不可或缺的工具。本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能,以此来确保用户输入的用户名的独特性。这个...

    Struts2+Jquery+Ajax

    6. Struts2与Ajax的集成,使用JQuery的$.ajax()或$.getJSON()方法 7. 请求与响应的处理,包括参数传递和数据封装 8. 实例演示:使用Struts2+Jquery+Ajax实现动态加载数据或表单验证 "struts2 jar"文件包含了Struts2...

    jquery的ajax方法

    **jQuery的Ajax方法**是JavaScript库中的核心特性之一,它为开发者提供了简单、高效的数据交互方式,无需刷新页面即可实现异步与服务器进行通信。在Web开发中,jQuery的Ajax功能极大地简化了XMLHttpRequest对象的...

    jquery+ajax的视频讲解

    在“第八章后jQueryAjax的使用”中,我们将深入探讨如何利用jQuery进行AJAX操作。 **AJAX基础** AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器...

    jquery、ajax学习电子书.zip

    《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书,旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库,它极大地简化了DOM...

    Jquery Ajax分页(有实例)

    本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能。 首先,理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。...

    jquery+AJAX小小项目

    在Web开发中,jQuery和AJAX是两种非常重要的技术,它们使得前端与后端的数据交互变得更加便捷和高效。本项目主要展示了如何利用jQuery库来实现AJAX的增删改查功能,帮助开发者更好地理解和运用这两种技术。 **一、...

Global site tag (gtag.js) - Google Analytics