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 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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

1.jQuery

什么是 jQuery ？

jQuery 语法

文档就绪事件

jQuery 基本选择器

jQeury基本操作

2.Ajax

AJAX - 创建 XMLHttpRequest 对象

XHR 请求

GET请求：

POST请求：

XHR 响应

最新文章

热门文章

巴特西

5.jQuery&Ajax

1.jQuery

什么是 jQuery ？

jQuery 语法

文档就绪事件

jQuery 基本选择器

jQeury基本操作

2.Ajax

AJAX - 创建 XMLHttpRequest 对象

XHR 请求

GET请求 ：

POST请求：

XHR 响应

最新文章

热门文章

GET请求：