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 ...
随机推荐
- hdu2328(后缀数组 + 二分)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2328 题意: 求 n 个串的字典序最小的最长公共子串 思路: 本题中单个字符串长度不超过 200, ...
- js数据类型基础
一.数据类型 数据类型包括:基本数据类型和引用数据类型 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还 ...
- apache2.4.X虚拟主机配置
1,用记事本打开apache目录下httpd文件(如:D:\wamp\bin\apache\apache2.2.8\conf),找到如下模块 # Virtual hosts #In ...
- Python脚本开发练习
打印乘法口诀表 #!/usr/bin/python #coding=utf-8 print("Hello,World....") print("你好,欢迎来到Python ...
- ubuntu14.04 搭建samba
1.安装软件 sudo apt-get remove libwbclient0 sudo apt-get remove samba-common sudo apt ...
- js按回车事件提交
$(document).keyup(function (event) { if (event.keyCode == "13") { document.getElementById( ...
- QueryTask,FindTask,IdentifyTask三种查询的区别
1:QueryTask是一个进行空间和属性查询的功能类,它可以在某个地图服务的某个子图层内进行查询,顺便需要提一下的是,QueryTask进行查询的地图服务并不必项加载到Map中进行显示.QueryT ...
- swift -- 单例+ lazy懒加载 + 第三方库
//工具类单例 static let goods : NHGoods = { let good = NHGoods() return good }() //懒加载 lazy var registerB ...
- shell脚本学习一
shell脚本是一种程序与linux内核的语言: 第一个shell脚本: #!/bin/bash echo "cxy" 就是输出cxy 如何执行这个脚本呢: cd demo 进入s ...
- day29 进程
1..操作系统知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的 ...