论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解
一、什么是JQuery？
JQuery是一种JavaScript框架，是一堆大神搞出来的能够让前端程序猿敲更少代码、实现更多功能的工具（在此，跪谢各位JQuery开发大大们！！！）。JQuery的使用给优化HTML文档操作、事件处理、动画设计和Ajax交互提供了巨大的便利。而且，其特有的链式语法也较与JS更为清晰。
二、JQuery入门
想要使用JQuery框架，就必须在html文档中导入JQuery插件，导入方式和日常导入外部JS文件的方式是相同的。但要注意，在同一html文档中插入多个外部JS文件是一定要格外注意引入的位置与不同文件的顺序！！！（JQuery官方下载地址在这里，宣传费就不用给了：http://jquery.com/）
下面我们就以代码的形式来了解一下JQuery的语法与部分注意事项。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery笔记</title>
<script language="JavaScript" src="js/jquery-1.10.2.js"></script>
</head>
<body>
<p name="p" id="p">这是P1标签的文字</p>
<p>这是P2标签的文字</p>
<p>这是P3标签的文字</p>
<select id="select">
<option>123</option>
<option>456</option>
<option>789</option>
</select>
<input type="checkbox" value="1" />1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input type="checkbox" value="4" />4
</body>
<script type="text/javascript">
//JQuery语法
//1、jQuery("选择器").action();通过选择器调用事件函数
// 但jQuery中，jQuery可以用$代替，即$("选择器").action();
//①选择器可以直接使用css选择器，选中元素；
//②.action()表示对元素执行的操作；
//2、文档就绪函数：防止文档在完全加载（就绪）之前运行jQuery代码
// $(document).ready(function(){
// // JQuery代码
// });
// $(function(){
// //文档就绪函数的简写方式
// });
//[文档就绪函数 与 window.onload 区别]
//① window.onload需要在网页所有内容加载完成后执行（包括图片和音频）；
// 文档就绪函数，只需要在网页DOM结构加载以后便执行。
//② window.onload只能写一个，写多个只会执行最后一个；
// 文档就绪函数，可以写多个，也不会被覆盖。
//3、JQuery对象与原生DOM对象互转
//① 原生DOM对象转JQuery对象：$(DOM对象)
// var p = document.getElementsByTagName("p");
// $(p);
//② JQuery对象转原生DOM对象：$("p").get(0) 或 $("p")[0]
// $("p").get(0).style.color = "#00ff00";
$("p").hide();
$("p").fadeIn(5000);
$("#select").val(["123"]);
$("input[type='checkbox']").val(["1","2","3","4"])
$("#p").attr({"name":"pppppppp","class":"aaa"})
</script>
</html>
三、JQuery中的事件与动画
JQuery在前端开发中带给我们很多便利，其中就有其自带的部分动画与事件，下面是这一部分比较常用的代码讲解。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>笔记-JQuery事件与动画</title>
<script src="js/jquery-1.10.2.js" language="JavaScript"></script>
<style type="text/css">
p{
width: 50px;
height: 50px;
background-color: #00FFFF;
}
div{
width: 150px;
height: 75px;
color: #FFFFFF;
background-color: #00FFFF;
text-align: center;
line-height: 75px ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<button>点击我触发事件</button>
<p>12345</p>
<div style="display: none;" id="div1">这个原来是隐藏的div</div>
<div id="div2">这个是显示的div</div>
</body>
<script type="text/javascript">
// 事件绑定快捷方式
// $("button:first").click(function(){
// alert("1");
// })
//使用on绑定事件
//① 使用on进行单事件绑定
// $("button:first").on("click",function(){
// console.log($(this).html());
// })
//② 使用on同时为多个事件，绑定同一函数
// $("button:first").on("click mouseover",function(){
// console.log($(this).html());
// })
//③ 调用函数时，传入自定义参数
// $("button:first").on("click",{name:"wk"},function(event){
// //使用event.data.属性名 找到传入的参数
// console.log(event.data.name);
// })
//④ 使用on进行多事件多函数绑定
// $("button:first").on({
// click:function(){
// console.log("click");
// },
// mouseover:function(){
// console.log("mouseover");
// }
// })
//⑤ 使用on进行事件委派
//>>>将原本需要绑定到某元素上的事件改为绑定在父元素乃至根节点上，然后委派给当前元素生效
//>>>作用：默认的绑定方式，只能绑定到页面初始时已有的元素，当页面新增p元素时，无法绑定到新元素上；
// 使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件
// $("body").on("click","button",function(){
// alert("1");
// })
// $("button").on("click",function(){
// var p = $("<p>44444</p>");
// $("p").after(p);
// })
// $(document).on("click","p",function(){
// alert(1);
// })
//off 取消事件绑定
//1、$("p").off() 取消所有事件
//2、$("p").off("click") 取消点击事件
//3、$("p").off("click mouseover") 取消多个事件
//4、$(document).off("click","p") 取消事件委派
//one 绑定唯一一次事件
// $("button").one("click",function(){
// alert(1);
// })
//trigger 自动触发某元素的事件
// $("p").click(function(event,arg1,arg2){
// alert("触发了p的click事件"+arg1+arg2);
// })
// $("button").click(function(){
// $("p").trigger("click",["呵呵呵","哈哈哈"]);//触发事件时，传递参数
// })
//动画效果
// .show()：让隐藏元素显示，效果为同时修改元素的宽度，高度，opacity属性
//① 不传参数，让隐藏的元素直接显示，不进行动画
//② 传入时间，多少毫秒之内完成动画
//③ 传入时间、函数，完成动画之后完成回调函数
// .hidden()：让显示元素隐藏，与show相反
// $("#div1").show(1000,function(){
// alert("动画")
// });
// $("#div2").hide(1000);
// .slideDown()：让隐藏元素显示，效果为从上往下增加高度
// .slideUp()：让显示元素隐藏，效果为从下往上减小高度
// .slideToggle()：让隐藏元素显示，让隐藏的显示
//.fadeIn()：让隐藏元素显示，淡入
//.fadeOut()：让显示元素隐藏，淡出
//.fadeToggle()：让隐藏元素显示，让隐藏的显示，淡入、淡出
//.fadeTo(时间,透明度,函数)：让隐藏元素显示，让隐藏的显示，淡入、淡出，但是多了必选的透明度参数，可以指定显示的最终透明度
// $("#div1").fadeIn(1000,function(){
// alert("动画")
// });
// $("#div2").fadeOut(1000,function(){
// alert("动画")
// });
//.animate({最终的样式属性键值对},动画时间,动画效果linear和swing,回调函数)：自定义动画
// $("#div2").animate({
// width:"150px",
// opacity:"0"
// },2000,"linear")
</script>
</html>
四、Ajax请求
哈哈哈，重头戏来了。Ajax请求是JQuery给我们带来的最大最大的福利，通过Ajax，我们可以免除很多不必要的工作，下面依然是这一部分重点的讲解，虽然内容很少，但是其精华就在于其中小小一部分。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery高级Ajax</title> <script language="JavaScript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ //JSON对象 //1、JSON对象时键值对的集合，键与值间用":"分割，多个键值对之间用","分割； //2、多个JSON对象，可以放到数组中去；JSON对象和数组可以相互嵌套； //JSON对象的键必须是字符串 $("button").click(function(){ $.ajax({ type:"post", url:"http://192.168.4.172:8080/json/h51701.json", dataType:"JSON", success:function(data){ // console.log(data); $("div").html(data[0].age); } }); }) }) </script> </head> <body> <button>点击请求JSON文件</button> <div></div> </body> </html>
