向您的页面添加 jQuery 库

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

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

<head>

<script type="text/javascript" src="jquery.js"></script>

</head>
请注意，<script> 标签应该位于页面的 <head> 部分。
Jquery需要下载，如果不想下载的话，可以将src部分改成网络链接
<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

</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 函数中：

一个小例子

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("p").css("background-color","red");

  });

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>
jQuery 是为事件处理特别设计的。
jQuery可以通知servlet
 

jQuery AJAX 实例

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $('#test').load('/example/jquery/demo_test.txt');

  })

})

</script>

</head>

<body>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>

<button id="btn1" type="button">获得外部的内容</button>

</body>

</html>

jQuery $.get() 方法

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $.get("/example/jquery/demo_test.asp",function(data,status){

      alert("数据：" + data + "\n状态：" + status);

    });

  });

});

</script>

</head>

<body>

<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $.post("/example/jquery/demo_test_post.asp",

    {

      name:"Donald Duck",

      city:"Duckburg"

    },

    function(data,status){

      alert("数据：" + data + "\n状态：" + status);

    });

  });

});

</script>

</head>

<body>

<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>

</body>

</html>

JQuery post方法

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

语法：

$.post(URL,data,callback);

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

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

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

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

实例

$("button").click(function(){

  $.post("demo_test_post.asp",

  {

    name:"Donald Duck",

    city:"Duckburg"

  },

  function(data,status){

    alert("Data: " + data + "\nStatus: " + status);

  });

});

传递和接收的数据都是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

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("p").append(" <b>Appended text</b>.");

  });

  $("#btn2").click(function(){

    $("ol").append("<li>Appended item</li>");

  });

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<ol>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ol>

<button id="btn1">追加文本</button>

<button id="btn2">追加列表项</button>

</body>

</html>

JSON 教程

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

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

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

Json一个实例
{

"employees": [

{ "firstName":"Bill" , "lastName":"Gates" },

{ "firstName":"George" , "lastName":"Bush" },

{ "firstName":"Thomas" , "lastName":"Carter" }

]

}

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

JSON - 转换为 JavaScript 对象

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

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

JSON 使用 JavaScript 语法

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

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

employees[1].firstName="Jobs";

通过parse函数来处理数据

<html>

<body>

<h2>通过 JSON 字符串来创建对象</h3>

<p>

First Name: <span id="fname"></span><br />

Last Name: <span id="lname"></span><br />

</p>

<script type="text/javascript">

var txt = '{"employees":[' +

'{"firstName":"Bill","lastName":"Gates" },' +

'{"firstName":"George","lastName":"Bush" },' +

'{"firstName":"Thomas","lastName":"Carter" }]}';

obj = JSON.parse(txt);

//var obj = eval ("(" + txt + ")");//更好的方案

document.getElementById("fname").innerHTML=obj.employees[1].firstName

document.getElementById("lname").innerHTML=obj.employees[1].lastName

</script>

</body>

</html>

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

var data = [{"id":"1","name":"a"},{"id":"2","name":"b"}];

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. Java学习笔记：具体解释传值和传引用

    传值和传引用 When you're passing primitives into a method ,you get a distinct copy of the primitive. When ...

  2. Web前端开发测试题阅读笔记

    引自: http://www.w3cplus.com/css/front-end-web-development-quiz.html Q7:下面代码弹出值是什么? x = 1; function ba ...

  3. 【C】——网络编程-聊天室

    功能介绍: 此demo是基于TCP套接字编程,目的是实现一个聊天室效果.类似于QQ群效果,如果上线可以通知其他好友,下线也会通知其他好友. 需要用的技术: 一.socket编程. 1> sock ...

  4. jce_policy安装【java密码扩展无限制权限策略文件安装】

    下载与JDK或JRE对应版本的jce文件包,当前机器的jdk为1.8,所以下载jce_policy-8.zip. 下载地址:http://www.oracle.com/technetwork/java ...

  5. dd 命令 sd卡系统迁移

    Linux系统如果想做备份还原,使用ghost的时候经常出现问题,后来发现可以直接使用dd命令完成硬盘的克隆和还原.当拷贝完硬盘后,就可以拿这个硬盘放到其它设备上跑了.也就是完成了“烧写”了. 实际操 ...

  6. 自然语言交流系统 phxnet团队 创新实训 项目博客 （五）

    3DMax方面所涉及的专业知识:                       (1)一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. (2)骨骼架设:首先 ...

  7. 如何安装Node.js环境

    一.在Windows系统下安装Node.js环境 1. 下载地址:官网http://nodejs.org/ 2.   安装nodejs,根据自己情况,安装路径 D:\Program Files\nod ...

  8. C/C++ 查看数组类型长短 ， python的len的封装原理

    sizeof什么时间加括号什么时候不加括号? sizeof当用应用于一个表达式的时候不需要圆括号: 例如 sizeof  i; 如果运算符优先的时候需要: 例如sizeof(i+j); 方法一. in ...

  9. 多线程系列八：线程安全、Java内存模型(JMM)、底层实现原理

    一.线程安全 1.  怎样让多线程下的类安全起来 无状态.加锁.让类不可变.栈封闭.安全的发布对象 2. 死锁 2.1 死锁概念及解决死锁的原则 一定发生在多个线程争夺多个资源里的情况下,发生的原因是 ...

  10. vim定位到指定行数

    显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n   比如想到第2行,:2 编辑模式下,ngg  比如想到第5行 5gg(或者5G) 打开文件定位到指定行   vim  +n  te ...