向您的页面添加 jQuery 库

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中：

  1. <head>
  2. <script type="text/javascript" src="jquery.js"></script>
  3. </head>
请注意，<script> 标签应该位于页面的 <head> 部分。
Jquery需要下载，如果不想下载的话，可以将src部分改成网络链接
  1. <head>
  2. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
  3. /jquery-1.4.min.js"></script>
  4. </head>

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

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

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

一个小例子

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("p").css("background-color","red");
  8.   });
  9. });
  10. </script>
  11. </head>
  12.  
  13. <body>
  14. <h2>This is a heading</h2>
  15. <p>This is a paragraph.</p>
  16. <p>This is another paragraph.</p>
  17. <button type="button">Click me</button>
  18. </body>
  19.  
  20. </html>
jQuery 是为事件处理特别设计的。
jQuery可以通知servlet
 

jQuery AJAX 实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("#btn1").click(function(){
  9.     $('#test').load('/example/jquery/demo_test.txt');
  10.   })
  11. })
  12. </script>
  13. </head>
  14.  
  15. <body>
  16.  
  17. <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
  18. <button id="btn1" type="button">获得外部的内容</button>
  19.  
  20. </body>
  21. </html>

jQuery $.get() 方法

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $.get("/example/jquery/demo_test.asp",function(data,status){
  9.       alert("数据：" + data + "\n状态：" + status);
  10.     });
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16.  
  17. <button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>
  18.  
  19. </body>
  20. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("button").click(function(){
  9.     $.post("/example/jquery/demo_test_post.asp",
  10.     {
  11.       name:"Donald Duck",
  12.       city:"Duckburg"
  13.     },
  14.     function(data,status){
  15.       alert("数据：" + data + "\n状态：" + status);
  16.     });
  17.   });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22.  
  23. <button>向页面发送 HTTP POST 请求，并获得返回的结果</button>
  24.  
  25. </body>
  26. </html>

JQuery post方法

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

语法：

  1. $.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

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

实例

  1. $("button").click(function(){
  2.   $.post("demo_test_post.asp",
  3.   {
  4.     name:"Donald Duck",
  5.     city:"Duckburg"
  6.   },
  7.   function(data,status){
  8.     alert("Data: " + data + "\nStatus: " + status);
  9.   });
  10. });

传递和接收的数据都是json格式，的所以，还有必要在学下json

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求（name 和 city）一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

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

步骤大约是：

1. 写一个监听函数，等待被触发

2. 监听函数如果有参数的话，可以根据参数做相应的操作

3. 定位到要添加组件上（一般是parent级别，比如对于li,可能是ul)

4. $(要添加组件).append(要添加的东西)

demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("#btn1").click(function(){
  9.     $("p").append(" <b>Appended text</b>.");
  10.   });
  11.  
  12.   $("#btn2").click(function(){
  13.     $("ol").append("<li>Appended item</li>");
  14.   });
  15. });
  16. </script>
  17. </head>
  18.  
  19. <body>
  20. <p>This is a paragraph.</p>
  21. <p>This is another paragraph.</p>
  22. <ol>
  23. <li>List item 1</li>
  24. <li>List item 2</li>
  25. <li>List item 3</li>
  26. </ol>
  27. <button id="btn1">追加文本</button>
  28. <button id="btn2">追加列表项</button>
  29. </body>
  30. </html>

JSON 教程

JSON：JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

Json一个实例
  1. {
  2. "employees": [
  3. { "firstName":"Bill" , "lastName":"Gates" },
  4. { "firstName":"George" , "lastName":"Bush" },
  5. { "firstName":"Thomas" , "lastName":"Carter" }
  6. ]
  7. }

这个 employee 对象是包含 3 个员工记录（对象）的数组。

JSON - 转换为 JavaScript 对象

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

employees[1].firstName="Jobs";

通过parse函数来处理数据

  1. <html>
  2. <body>
  3. <h2>通过 JSON 字符串来创建对象</h3>
  4. <p>
  5. First Name: <span id="fname"></span><br />
  6. Last Name: <span id="lname"></span><br />
  7. </p>
  8. <script type="text/javascript">
  9. var txt = '{"employees":[' +
  10. '{"firstName":"Bill","lastName":"Gates" },' +
  11. '{"firstName":"George","lastName":"Bush" },' +
  12. '{"firstName":"Thomas","lastName":"Carter" }]}';
  13.  
  14. obj = JSON.parse(txt);
  15. //var obj = eval ("(" + txt + ")");//更好的方案
  16.  
  17. document.getElementById("fname").innerHTML=obj.employees[1].firstName
  18. document.getElementById("lname").innerHTML=obj.employees[1].lastName
  19. </script>
  20. </body>
  21. </html>

我更需要的是获取数组长度的函数

  1. var data = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
  2. alert(eval(data).length);

Jquery Ajax 和json用法的更多相关文章

  1. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  2. Spring MVC Controller与jquery ajax请求处理json

    在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: "}]}]} $.ajax({ url : url, typ ...

  3. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  4. jQuery.ajax() datatype:“json" 转换失败

    当使用jQuery.ajax() 时,如果设置dataType:"json",如果返回的字符转换出错则不会调用success方法,而进入error方法,控制台中也不会出现错误信息 ...

  5. jQuery ajax 传递JSON数组到Spring Controller

    jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...

  6. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

  7. JQuery ajax返回JSON时的处理方式

    最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来 ...

  8. 编程语言 - 脚本编程 - JavaScript/Jquery/Ajax/XML/JSON/ActionScript3

    事件处理onmouseover <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  9. Jquery ajax使用json形式通信

    前台JS $.ajax({                              type: 'post',                              url: 'HandlerL ...

随机推荐

  1. Spring Cloud Eureka 服务关闭但是未从注册中心删除 自我保护机制

    自我保护背景 首先对Eureka注册中心需要了解的是Eureka各个节点都是平等的,没有ZK中角色的概念, 即使N-1个节点挂掉也不会影响其他节点的正常运行. 默认情况下,如果Eureka Serve ...

  2. Graph-BFS-Fly-图的广度优先遍历-最小转机问题

    #include <iostream> #include <queue> using namespace std; /* 5 7 1 5 1 2 1 3 2 3 2 4 3 4 ...

  3. jquery跨域访问解决方案

    客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解.由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算 ...

  4. java SoftReference WeakReference

    Java 2 平台引入了 java.lang.ref 包,其中包括的类可以让您引用对象,而不将它们留在内存中.这些类还提供了与垃圾收集器(garbage collector)之间有限的交互. 1.先“ ...

  5. 使用Photoshop画一个圆锥体

    一.准备工作 软件环境:PhotoshopCS6 实验目的:通过运用变换和选区工具,画出一个圆锥体 二.实验步骤 1,新建文件 2,前景色设置为黑色,并进行填充(快捷键 Alt+Delete) 3,创 ...

  6. HttpWebRequest.ReadWriteTimeout 属性

    获取或设置写入或读取流时的超时. 属性值在写入超时或读取超时之前的毫秒数.默认值为 300,000 毫秒(5 分钟). 备注 在写入由 GetRequestStream 方法返回的流时,或在读取由 G ...

  7. （诊断）git review时出现fatal: ICLA contributor agreement requires current contact information.错误

    使用git review时出现错误: fatal: ICLA contributor agreement requires current contact information. Please re ...

  8. T4生成实体,单张表和多张表

    # 使用说明 . 把T4目录放在项目的根目录 . 配置连接字符串,在tt文件的最底部 . generateAllEntity.tt生成全部的实体类 . generateSingleEntityByNa ...

  9. 8款最新CSS3表单 环形表单很酷

    当我们在网站上注册登录还是提交评论,都需要用到表单,今天我们来分享8款最新CSS3表单,有几个效果很酷很特别,有些也非常实用,一起来看看. 1.CSS3环形特色表单 转圈切换表单焦点 这款CSS3表单 ...

  10. 算法-Java组合

    code: import org.assertj.core.util.Lists; import java.util.ArrayList; import java.util.Collections; ...