5.jQuery&Ajax
1.jQuery
什么是 jQuery ？
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
引用：
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
// 开始写 jQuery 代码...
});
或是
$(function(){
// 开始写 jQuery 代码...
});
jQuery 基本选择器
//元素选择器
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); //选择P标签
});
}); //#ID选择器
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
}); //.class 选择器
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
}); //
jQeury基本操作
//addClass()方法给元素加class
$(".text-primary").addClass("animated shake"); //删除HTML元素的class
$("#target2").removeClass("btn-default"); //改变HTML元素的CSS样式
$("#target1").css("color", "blue"); //注意此处属性和值都是“” //设置元素不可用
$("button").prop("disabled", true); //改变元素中的文本
$("h3").html("<em>jQuery Playground</em>"); //删除一个HTML元素
$("#target4").remove(); //使用appendTo()移动HTML元素
$("#target4").appendTo("#left-well"); //使用clone()方法复制元素
$("#target2").clone().appendTo("#right-well"); //使用parent()操作父级元素
$("#left-well").parent().css("background-color", "blue") //使用parent()操作子级元素
$("#left-well").children().css("color", "blue") //使用target:nth-child(n) CSS选择器获取子元素
$(".target:nth-child(3)").addClass("animated bounce"); //使用选择器操作偶数索引元素，因为索引0对应的是第一个元素，所以奇数索引，偶数元素，
$(".target:odd").addClass("animated shake");偶数
$(".target:even").addClass("animated shake");奇数
2.Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button> </body>
</html>
AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。XmlHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
构建代码：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XHR 请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open(method,url,async)：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)：将请求发送到服务器。
string：仅用于 POST 请求
GET请求 ：
xmlhttp.open("GET","demo_get2.html?fname=Henry&name=Ford",true);
xmlhttp.send();
POST请求：
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
XHR 响应
获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText：获得字符串形式的响应数据。
- responseXML：获得 XML 形式的响应数据。
<!--responseText -->
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; <!--responseXML -->
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
XHR.readyState状态的变化如下：
- 0：请求未初始化，还没有调用 open()。
- 1：请求已经建立，但是还没有发送，还没有调用 send()。
- 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
- 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
- 4：响应已完成；您可以获取并使用服务器的响应了。
5.jQuery&Ajax的更多相关文章
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- jquery ajax解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- jQuery.ajax 根据不同的Content-Type做出不同的响应
使用H5+ASP.NET General Handler开发项目,使用ajax进行前后端的通讯.有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需 ...
- jQuery.ajax(url,[settings])
概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法
最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...
- JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册
写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...
- 用.NET MVC实现长轮询，与jQuery.AJAX即时双向通信
两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- 用JQuery Ajax 与一般处理程序 请求数据无刷新，以及如何调试错误
通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新. Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax ...
随机推荐
- 《图解HTTP》阅读笔记--第二章 简单的HTTP协议--第三章 HTTP报文信息
第二章.简单的HTTP协议HTTP协议:HTTP协议用于客户端(请求资源的一端)和服务器端(响应回复提供资源的一端)的通信,是一种无状态协议HTTP1.1默认TCP持久连接,管线化发送(并行发送多个 ...
- 洛谷4316 绿豆蛙的归宿(DAG递推/概率dp)
题目大意: 给定一个DAG,求起点到终点的路径长度期望 根据题意可以知道每一条边都有一定概率被走到 那么\(\displaystyle\begin{aligned} Ans = \sum_{e \in ...
- POJ1511 Invitation Cards SPFA算法裸题变形
原题目:http://poj.org/problem?id=1511 给出一个有向图,求出这个图从1到所有点的最短路径和所有点到1的最短路径的和. 这题数据量有点大,数据范围也大,所以用SPFA+邻接 ...
- git 创建、切换和提交新分支
查看本地分支 git branch 创建新的分支 git branch <newBranch> 切换分支 git checkout <branchName> 创建并切换分支 g ...
- Spring注解实现定时功能以及Quartz定时器
一:Spring注解实现--------->Spring3.0以后自带的task,可以将它看成一个轻量级的Quartz 1:maven配置: <!-- quartz--> <d ...
- js常用代码收集
1. PC - js 返回指定范围的随机数(m-n之间)的公式 Math.random()*(n-m)+m return false return false // event.preventDefa ...
- Python自动化开发学习20-Django的form组件
武沛齐老师的Django的FORM组件:http://www.cnblogs.com/wupeiqi/articles/6144178.html 转自:http://blog.51cto.com/st ...
- CodeForces - 359C-Prime Number
Simon has a prime number x and an array of non-negative integers a1, a2, ..., an. Simon loves fracti ...
- tarjan算法，一个关于 图的联通性的神奇算法
一.算法简介 Tarjan 算法一种由Robert Tarjan提出的求解有向图强连通分量的算法,它能做到线性时间的复杂度. 我们定义: 如果两个顶点可以相互通达,则称两个顶点强连通(strongly ...
- 2016"百度之星" - 资格赛（Astar Round1）D
Problem Description 度熊所居住的 D 国,是一个完全尊重人权的国度.以至于这个国家的所有人命名自己的名字都非常奇怪.一个人的名字由若干个字符组成,同样的,这些字符的全排列的结果中的 ...