jQuery以及Ajax操作
jQuery
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，
使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让
写出来的代码更加优雅, 更加健壮，“如虎添翼”. 同时网络上丰富的 jQuery 插件也让我
们的工作变成了"有了 jQuery,一切 soeasy."--因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自
世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，
jQuery 已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超
过 55%在使用 jQuery。
一、jQuery 的下载和安装
1. 官网
http://jquery.com/ 下载
2. 版本
jQuery 2.x has the same API as jQuery 1.x, but does not support
Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
3. 优点
（1）提供了强大的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
太多了! 等待我们一一去发现...............
4. 安装
在页面引入即可
<script src="js/jquery.js" type="text/javascript" ></script>
二、jQuery 核心
"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象，通过该对象
可以获取 jQuery 对象，调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供
的方法。
$ <==> jQuery
三、DOM 对象和 jQuery 包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对
象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery
获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提
供的方法。
1. Dom 对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
2. jQuery 包装集| 对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组,
都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:
var jQueryObject = $("#testDiv");
3. Dom 转 转 jQuery 对象
Dom 对象转为 jQuery 对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementById('mydiv'); // 获取 Dom 对象
mydiv = $(domDiv);
4. jQuery 对象转 Dom 对象
jQuery 对象转 Dom 对象，只需要取数组中的元素即可
//第一种方式 获取 jQuery 对象
var jqueryDiv = jQuery('#mydiv');
//第二种方式 获取 jQuery 对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0];//将以获取的 jquery 对象转为 dom
通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象
$('#mydiv').each(function() {//遍历
var jquery = $(this);
})
案例
<div id="mydiv">write less, do more</div>
<script type="text/javascript">
console.log("-------------获取 dom 对象------------------")
//dom 对象
var domDiv = document.getElementById("mydiv");
console.log(domDiv);
console.log("-------------获取 jquery 对象------------------")
//获取 jquery 对象
//第一种方式
var jqueryDiv = jQuery('#mydiv');
console.log(jqueryDiv);
//第二种方式
jqueryDiv = $('#mydiv');
console.log(jqueryDiv);
console.log("-------------dom 转 jquery------------------")
//dom 转 jquery 包装集/对象
var obj = $(domDiv);
console.log(obj);
console.log("-------------jquery 转 dom------------------")
//jquery 对象转 dom 对象
var dom = $('#mydiv')[0];//获取 jquery 对象转为 dom
//或
var dom2 = jqueryDiv[0];//将 jquery 对象转为 dom
console.log(dom);
console.log(dom2);
/*this 代表了 dom 对象，不是 jquery 对象*/
console.log("-------------dom 转 jquery------------------")
$('#mydiv').each(function() {//通过 id 选择器选择了 id 为 mydiv 的所有元素
然后进行遍历，那么遍历出的每个元素就是 id 为 mydiv 的标签元素，而 this 就代表了当前
的这个元素
var jquery = $(this);
})
console.log("-------------jquery 转 dom------------------")
$('#mydiv').each(function() {
var dom3 = this;
})
</script>
四、jQuery 选择器
和使用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提
供了简便的方式供我们查找|定位元素，称为 jQuery 选择器，选择器可以说是最考验一个人
jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只
要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形
式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。
基础选择器掌握即可 ,其他用到再查阅。
1. 基础选择器 Basics （掌握即可）
选择器 名称 举例
id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素
元素名称选择器 element $("div")选择所有 div 元素
类选择器 .class $(".blue")选择所有 class="blue" 的元素
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1,
selector2,
selectorN
$("#testDiv,span,.blue")同时选中这几个选
择器匹配的元素
<style type="text/css">
.blue{
background: blue;
}
</style>
<body>
<div id="mydiv1">id 选择器 1<span>span 中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
</body>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"
charset="utf-8">
</script>
<script type="text/javascript">
//id 选择器
console.log("======id====");
var idSelecter = $('#mydiv1');
console.log(idSelecter.html());
console.log(idSelecter.text());
//元素选择器
console.log("======name====");
var nameSe = $('div');//有多个 div 元素
nameSe.each(function(){
//this 是 dom 对象，$(this)是 jquery 对象
console.log($(this).text());
});
//类选择器，class
console.log("======class====");
var classSe = $('.blue');//有多个 class=blue 的元素
classSe.each(function(){
console.log($(this).text());
});
//通用选择器：*
console.log("======所有元素====");
var all = $("*");
console.log(all.length);
//组合选择器
console.log("======组合====");
var unionSe = $('span, .blue,div');
unionSe.each(function(){
console.log($(this).text());
});
</script>
dom：innerHTML="...."，innerText="....."
jquery： .html("...")，.text("......")
2. 层次选 择器 Hierarchy
选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器</title>
<script src="../js/jquery-2.1.4.min.js"
type="text/javascript">
</script>
<style type="text/css">
.testColor{
background: green;
}
.gray{
background: gray;
}
</style>
</head>
<body>
<div id="parent">层次择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
</div>
<div>
选择器 2<div>选择器 2 中的 div</div>
</div>
</div>
</body>
<script type="text/javascript">
console.log("=========后代选择器-选择所有后代=====");
var ancestorS = $('#parent div');
ancestorS.each(function(){
console.log($(this).text());
});
console.log("=========子代选择器-选择儿子辈=====");
var child = $('#parent>div');
child.each(function(){
console.log($(this).text());
});
console.log("=========相邻选择器=====");
var pre_next = $(".gray + img");
console.log(pre_next.length);
console.log("=========同辈选择器,其后，（弟弟）=====");
var pre_siblings = $(".gray ~ img");
console.log(pre_siblings.length);
</script>
</html>
3. 表
单选择
器
Forms j/x 选 择器
名称 举例
表单选择器 :input 查找所有的 input 元素：$(":input")；注意：会匹配所
有的 input、textarea、select 和 button 元素。
文本框选择器 :text 查找所有文本框：$(":text")
密码框选择器 :password 查找所有密码框：$(":password")
单选按钮选择器 :radio
查找所有单选按钮：$(":radio")
复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
提交按钮选择器 :submit
查找所有提交按钮：$(":submit")
图像域选择器 :image 查找所有图像域：$(":image")
重置按钮选择器 :reset
查找所有重置按钮：$(":reset")
按钮选择器 :button 查找所有按钮：$(":button")
文件域选择器 :file 查找所有文件域：$(":file")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"
charset="utf-8"></script>
</head>
<body>
<form id='myform' name="myform" method="post">
<input type="hidden" name="uno" value="9999"
disabled="disabled"/>
姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd"
value="123456" /><br />
年龄:<input type="radio" name="uage" value="0"
checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂
得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮
球
<input type="checkbox" name="ufav" value="爬床
"/>爬床
<input type="checkbox" name="ufav" value="代码
"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选
择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
简介:<textarea rows="10" cols="30"
name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image"
src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/>
<button type="submit" onclick="return checkForm();">提交
</button>
<button type="reset" >重置</button>
</form>
</body>
</html>
<script type="text/javascript">
function checkForm(){
//获取 所有的表单元素
$(":input").each(function(){
//console.log($(this)[0]);
console.log($(this)[0].tagName);
})
console.log("------+++++++++++++++++++++--------")
//获取 text
console.log("text-->"+$(":text").length); //1
//获取 password
console.log("password-->"+$(":password").length);//1
//获取 radio
console.log("radio-->"+$(":radio").length);//2
//获取 checkbox
console.log("checkbox-->"+$(":checkbox").length);//3
//获取 file
console.log("file-->"+$(":file").length);//1
//获取按钮
console.log("button-->"+$(":button").length);//2
//获取 submit 按钮
console.log("submit-->"+$(":submit").length);//1
//获取 image 按钮
console.log("image-->"+$(":image").length);//1
//获取 reset 按钮
console.log("reset-->"+$(":reset").length);//1
return false;
}
</script>
五、jQuery DOM 操作
jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的基础之上进行了优化，使用起来
更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节
点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式；动
画操作等。注意：以下的操作方式只适用于 jQuery 对象。
1. 操作元素的属性
获取属性
方法 说明 举例
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回
checked，没有选中返回 undefined。
attr('checked')
attr('name')
prop(属性名称) 获取具有 true 和 false 两个属性的属性值 prop('checked')
<form action="" id="myform">
<input type="checkbox" name="ch" checked="checked"/> aa
<input type="checkbox" name="ch" /> bb
</form>
<script type="text/javascript">
var ch = $("input[type='checkbox']")
console.log(ch)
ch.each(function(idx, em){
console.log(idx + "-" + $(em) + "=" + this)
console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
console.log('--------------')
})
</script>
设置属性
方法 说明 举例
attr(属性名称，属性值) 设置指定的属性值，操作 checkbox
时选中返回 checked，没有选中返
回 undefined。
attr('checked',’checked’)
attr('name',’zs’)
prop(属性名称，属性值) 设置具有 true 和 false 两个属性的
属性值
prop('checked',’true’)
移除属性
方法 说明 举例
removeAttr(属性名) 移除指定的属性 removeAttr('checked')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性操作</title>
<script src="../js/jquery-2.1.4.min.js"
type="text/javascript"></script>
</head>
<body>
<pre>
<h5>1.attr()</h5>:设置或者返回元素的属性 ;
<h5>2.prop()</h5>:设置 具有 true 和 false 两个属性的属性，
如 checked, selected 或者 disabled。
</pre>
<hr />
<a href="http://www.bjsxt.com" id="a1">尚学堂</a>
<a href="http://www.sxt.cn" id="a2">速学堂</a>
<input type="checkbox" name="all" checked="checked"/>全选
</body>
<script type="text/javascript">
//获取属性值：attr
console.log($('#a1').attr('href'));
console.log($(':checkbox').attr('name'));
console.log($(':checkbox').attr('checked'));//若未选中显示
undefined，选中显示 checked
//获取属性值：prop
console.log($(":checkbox").prop('checked'));//若未选中显示
false，选中显示 true
console.log($('#a2').prop('href'))
//设置属性值
$('#a1').attr('href','http://www.shsxt.com');
$(":checkbox").prop("checked",false);
//移除属性
$('#a2').removeAttr('href');
</script>
</html>
2. 操作元素的样式
对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理
外还可以有专门的方法进行处理。
方法 说明
attr(“class”) 获取 class 属性的值，即样式名称
attr(“class”,”样式名”)
修改 class 属性的值，修改样式
addClass(“样式名”)
添加样式名称
css() 添加具体的样式
removeClass(class)
移除样式名称
增加元素的具体样式，格式：
1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
例：css({"background-color":"red","color":"#fff"});
2）css(“样式名”,”样式值”)
例：css('color','white')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素样式</title>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"
charset="utf-8"></script>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
</style>
</head>
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script type="text/javascript">
//获取样式名称
console.log($("#remove").attr("class"));
//修改样式，那么 id 为 remove 的元素样式 class 只有 green
//$('#remove').attr("class","green")
//添加样式名称，class 名称 --叠加
//$('#conBlue').addClass("blue larger");
//添加元素具体样式
//{ "":"" , "":"" } 名:值 对
$('#conRed').css({"background-color":"red","color":"#fff"});
$('#remove').css('color','red');
//移除样式
//$("#remove").removeClass("blue larger");
</script>
</html>
3. 操作元素的内容
对于元素还可以操作其中的内容，例如文本，值，甚至是 html。
方法 说明
html() 获取元素的 html 内容
html("html 内容") 设定元素的 html 内容
text() 获取元素的文本内容，不包含 html
text("text 内容") 设置元素的文本内容，不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作内容</title>
<script src="../js/jquery-2.1.4.min.js"
type="text/javascript"></script>
</head>
<body>
<h3><span>html()和 text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
</body>
<script type="text/javascript">
//获取 HTML 内容，包括 HTML 标签
console.log($('h3').html());
//获取文本内容，不包括 HTML 标签
console.log($('h3').text());
//获取 value 值
console.log($('[name=uname]').val());
//设置
$('#html').html("<p>使用 html 设置,看不到标签</p>");
$('#text').text("<p>使用 text 设置,能看到标签</p>");
$('[name=uname]').val("哈哈哈");
// console.info("abc");
// console.log("abc");
// console.warn("abc")
// console.error("abc");
</script>
</html>
4. 创建元素
在 jQuery 中创建元素很简单，直接使用核心函数即可
$(‘元素内容’)
$(‘<p>this is a paragraph!!!</p>’)
5. 添加元素
方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以
是字符、HTML 元素标记。
$(content).prependTo(
selector)
把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以
是字符、HTML 元素标记。
$(content).appendTo(s
elector)
把 content 元素或内容插入 selector 元素内，默认是在尾部
before()
在元素前插入指定的元素或内容:$(selector).before(content)
after()
在元素后插入指定的元素或内容:$(selector).after(content)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加</title>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"
charset="utf-8"></script>
<style type="text/css">
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span >小鲜肉</span>
</div>
</body>
</html>
<script type="text/javascript">
var str ="<span id='mydiv' style='padding: 8px;width:
180px;background-color:#ADFF2F;'>动态创建 span</span>";
//1、使用 prepend 前加内容
$("body").prepend(str);
//2、使用 prependTo 前加内容
$("<b>开头</b>").prependTo('body');
//3、使用 append 后加内容
$("body").append(str);
//$("div").append($('.red'));//当把已存在的元素添加到另一处的时候相当于
移动
//4、使用 appendTo 后追加内容
$(str).appendTo('body');
//$('.blue').appendTo("div");
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入元素</title>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"
charset="utf-8"></script>
<style type="text/css">
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<h3>before() 和 after()方法在元素之前后插入内容</h3>
<span class="green">财大气粗</span>
</body>
</html>
<script type="text/javascript">
var str1 = "<span class='red'>土豪</span>";
var str2 = "<span class='blue'>暴发户</span>";
$(".green").before(str1); //前置元素
$(".green").after(str2); //后存元素
</script>
6. 删除元素
方法 说明
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历元素</title>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"
charset="utf-8"></script>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http 协议</span>
<span class="blue">servlet</span>
</body>
</html>
<script type="text/javascript">
//删除所选元素 或指定的子元素
//$("span").remove();
//删除样式为 blue 的 span
//$("span.blue").remove();
//清空元素
//$("span").empty();
//$(".green").empty();
</script>
7. 遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历元素</title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
<script src="../js/jquery-2.1.4.min.js"
type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http 协议</span>
<span class="green">servlet</span>
</body>
<script type="text/javascript">
$('span').each(function (idx , e) {
console.log(idx + " ---> " + $(e).text());
})
</script>
</html>
六、Jquery 事件
1. ready() 加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})等价于$(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ready 事件</title>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript">
//文档载入完便触发 ready 方法
$(document).ready(function(){
$("div").html("ready go...");
})
//$(document).ready(function(){}) == $(function(){})
$(function(){
$("p").click( function () {
$(this).hide();
});
});
$(function(){
$("#btntest").bind("click",function(){
$("div").html("剁吧...");
});
});
</script>
</head>
<body>
<h3>页面载入时触发 ready()事件</h3>
<div></div>
<input id="btntest" type="button" value="剁手" />
<p>aaa</p>
<p>bbbb</p>
<p>ccc</p>
<p>dddd</p>
</body>
</html>
2. bind() 绑定元素事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject))
eventType ： 是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可
以包括如下：
blur, focus, focusin, focusout, load, resize, scroll, unload, click,
dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
mouseleave,change, select, submit, keydown, keypress, keyup, error 。
[, eventData]：传递的参数，格式：{名:值,名 2:值 2}
handler(eventObject)：该事件触发执行的函数
的 简单的 bind() 事件
<script type="text/javascript">
$(function(){
/*$("#test").bind("click",function(){
alert("世界会向那些有目标和远见的人让路！！");
});*/
/*
* js 的事件绑定
ele.onclick=function(){};
* */
//等同于上面的放方法
$("#test").click(function(){
alert("世界会向那些有目标和远见的人让路！！");
});
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
* */
$("#btntest").bind('click',function(){
//$(this).attr('disabled',true);
$(this).prop("disabled",true);
})
});
</script>
<body>
<h3>bind()方简单的绑定事件</h3>
<div id="test" style="cursor:pointer">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了" />
</body>
绑定多个事件
<script type="text/javascript">
$(function(){
//绑定 click 和 mouseout 事件
/*$("h3").bind('click mouseout',function(){
console.log("绑多个事件");
});*/
//链式编程
$("h3").bind('click',function(){
alert("链式编程 1");
}).bind('mouseout',function(){
$("#slowDiv").show("slow");//让 slowDiv 显示
});
/*$("#test").click(function(){
console.log("点击鼠标了....");
}).mouseout(function () {
console.log("移出鼠标了...");
});*/
$("#test").bind({
click:function(){
alert("链式编程 1");
},
mouseout:function(){
$("#slowDiv").show("slow");
}
});
});
</script>
<body>
<h3>bind()方法绑多个事件</h3>
<div id="test" style="cursor:pointer">点击查看名言</div>
<div id="slowDiv"style=" width:200px; height:200px; display:none; ">
人之所以能，是相信能
</div>
</body>
Ajax
一、XMLHttpRequest
Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在 XHR 出现之前，Ajax 式的通信必须借助一些手段来实现，大多数是使用隐藏的框架或内嵌框架。XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，也就是说这种技术不一定使用 XML。
IE7+、Firefox、Opera、Chrome 都支持原生的 XHR 对象，在这些浏览器中创建 XHR 对象可以直接实例化 XMLHttpRequest 即可。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
了解：较老的 IE 版本创建 Microsoft.XMLHTTP 对象:
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体
发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性：
属性名 说明
responseText 作为响应主体被返回的文本
responseXML
如果响应主体内容类型是"text/xml"或"application/xml"，
则返回包含响应数据的 XML DOM 文档
status 响应的 HTTP 状态
statusText HTTP 状态的说明
接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般
情况 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码，还有一些别的：
200 OK 服务器成功返回了页面
400 Bad Request 语法错误导致服务器不识别
401 Unauthorized 请求需要用户认证
404 Not found 指定的 URL 在服务器上找不到
500 Internal Server Error 服务器遇到意外错误，无法完成请求
503 ServiceUnavailable 服务器过载或维护导致无法完成请求
我们判断 HTTP 状态值即可，不建议使用 HTTP 状态说明，因为在跨浏览器的时候，可能会不太一致。
function ajaxFunction () {
//创建 XMLHttpRequest 对象
var xhr ;
try {
xhr = new XMLHttpRequest();
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("你的浏览器不支持 ajax 技术");
}
}
//提出 get 请求
xhr.open('get','js/cuisine_area.json',false);
//提出请求 post 请求
/*xhr.open('post','js/cuisine_area.json',false);
xhr.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');*/
//发送请求
xhr.send(null);
//alert("在等待....");
//处理服务器返回的内容
if(xhr.status == 200) {
alert(xhr.responseText);
}else {
alert("请求失败！状态码为：" + xhr.status + "，状态信息：" +
xhr.statusText);
}
//alert("请求完成");
}
</script>
说明：
1.post 请求，需要有服务器，暂时使用 tomcat将 tomcat 压缩包在某个盘下解压;将存放了 json 文件的项目放入 webapps 文件夹下;在 bin 目录下，打开 startup.bat，启动服务同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发
readystatechange 事件。这个属性有五个值：
0 未初始化 尚未调用 open()方法
1 启动 已经调用 open()方法，但尚未调用 send()方法
2 发送 已经调用 send()方法，但尚未接受响应
3 接受 已经接受到部分响应数据
4 完成 已经接受到全部响应数据，而且可以使用
function ajaxFunction () {
//创建 XMLHttpRequest 对象
var xhr ;
try {
xhr = new XMLHttpRequest();
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("你的浏览器不支持 ajax 技术");
}
}
alert("在等待....");
/*
* 使用异步调用的时候，检测 readyState 属性,每当 readyState 属性改变时，触
发 readystatechange 事件。
* */
//处理服务器返回的内容
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
alert(xhr.responseText);
}else {
alert("请求失败，状态码为：" + xhr.status + "，状态信息：" +
xhr.statusText);
}
}
}
//提出 get 请求
xhr.open('get','js/cuisine_area.json',true);
//提出 post 请求
/*xhr.open('post','js/cuisine_area.json',true);
xhr.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');*/
//发送请求
xhr.send(null);
alert("请求完成");
}
</script>
二、GET 与 与 POST
在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用的过程中，GET 的使用频率要比 POST 高。
1.GET 请求
GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。xhr.open('get','diner/login?'+'name=Lee&age=100',true);
通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。
特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可，AJAX 返回的数据为 UTF-8。
//一个通用的 URL 提交函数
function addURLParam(url, name, value) {
//判断的 url 是否有已有参数
url += (url.indexOf('?') == -1 ? '?' : '&');
url+=encodeURIComponent(name)+'='+encodeURIComponent(value);
return url;
}
当没有 encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现
错误导致无法获取。
2.POST 请求
POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是
使用的 POST 传输方式。
xhr.open('post', 'diner/login', true);
而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法向服务器提交数据。xhr.send('name=Lee&age=100');
一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。xhr.setRequestHeader('Content-Type','application/x-www-form-urlncoded');
从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET最多比 POST 快两倍。
三、封装 Ajax
因为 Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用 GET 还是POST；我们需要封装一个 Ajax 函数，来方便我们调用。
function ajax (obj) {
//创建对象
var xhr = new XMLHttpRequest();
//拿到 obj.data 进行转换，将对象拼接成字符串形式
obj.data = params(obj.data);
//若为 get 请求，拼接 url
if(obj.method == 'get'){
obj.url += (obj.url.indexOf("?")==-1) ? '?'+obj.data : '&'+obj.data;
}
//若 obj.async 参数为 true 则为异步，需要判断 readyState 状态
if(obj.async == true){
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
callback();
}
}
}
//打开请求
xhr.open(obj.method,obj.url,obj.async);
//发送请求
if(obj.method == 'get'){//若为 get 请求，send 传递 null 即可
xhr.send(null);
}else {//若为 post 请求，需先模拟表单提交，再 send，同时传递数据
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(obj.data);
}
//若 obj.async 参数为 false 则为同步
if(obj.async == false){
callback();
}
//封装好的回调函数
function callback () {
if(xhr.status == 200) {
obj.success(xhr.responseText);
}else {
alert("请求错误，状态码:" + xhr.status + ",状态信息:" +
xhr.statusText);
}
}
}
//调用 ajax
ajax({
method:'post',
url :'js/cuisine_area.json',
async : false,
data : {
name:'tom',
age : 10
},
success : function (result) {
alert(result);
}
})
//参数转换方法
//params({name:'tom',age:100})
function params(data) {
var arr = [];
for (var d in data) {
//console.log(d);//键
//console.log(data[d])//值
arr.push(encodeURIComponent(d) + "=" +
encodeURIComponent(data[d]));//name=tom
}
return arr.join("&");//name=tom&age=100
}
封装 Ajax 并不是一开始就形成以上的形态，需要经过多次变化而成。同步提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。一心一意,当前只能做一件事，其他事情必须等当前的事情完成，才能继续后面的事情。
异步:请求通过事件触发->服务器处理（这时浏览器仍然可以做其他事情）->处理完毕 。三心二意：同时可以做多件事情：左手按着空格键，右手可以不断的击打鼠标，眼睛还要同时看着屏幕，很辛苦。
三,Jquery 的 的 ajax
1.$.ajax()
jquery 调用 ajax 方法：
格式：$.ajax({});
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
2.get 请求
$.ajax({
type:"get",
url:"../js/cuisine_area.json",
async:true,
success : function (msg) {
var str = msg;
console.log(str)
$('div').append("<ul></ul>");
for(var i=0; i<msg.prices.length;i++){
$('ul').append("<li></li>")
$('li').eq(i).text(msg.prices[i])
}
},
error : function (errMsg) {
console.log(errMsg);
$('div').html(errMsg.responseText)
}
});
3.post 请求
$.ajax({
type:"post",
data:"name=tom",
url:"../js/cuisine_area.json",
contentType: "application/x-www-form-urlencoded",
async:true,
success : function (msg) {
var str = msg;
console.log(str)
$('div').append("<ul></ul>");
for(var i=0; i<msg.prices.length;i++){
$('ul').append("<li></li>")
$('li').eq(i).text(msg.prices[i])
}
},
error : function (errMsg) {
console.log(errMsg);
$('div').html(errMsg.responseText)
}
});
4.$.get()
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
1.请求 json 文件，忽略返回值
$.get('../js/cuisine_area.json');
2.请求 json 文件，传递参数，忽略返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100});
3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
$.get('../js/cuisine_area.json',function(data){
console.log(data)
});
4.请求 json 文件,传递参数,拿到返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
});
4.$.post()
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
1.请求 json 文件，忽略返回值
$.post('../js/cuisine_area.json');
2.请求 json 文件，传递参数，忽略返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100});
3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
$.post('../js/cuisine_area.json',function(data){
console.log(data)
});
5.请求 json 文件,传递参数,拿到返回值
$.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
});
5.$.getJSON()
表示请求返回的数据类型是 JSON 格式的 ajax 请求
6.jsonp
远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
添加属性：
jsonp:’callback’
dataType:’jsonp’
$.ajax({
type:"post",
url:"http://iservice.itshsxt.com/restaurant/find",
dataType : 'jsonp',
jsonp:"callback",
success : function (msg,status) {
if(status == "success"){
var res = msg.result;
$('div').append("<ul></ul>");
for(var i=0; i<res.length;i++){
$('ul').append("<li></li>")
$('li').eq(i).text(res[i].name)
}
}else {
alert("请求失败,错误信息：" + msg);
}
},
