论如何把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>
论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解的更多相关文章
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
- jQuery中关于Ajax的详解
原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...
- jQuery jsonp跨域请求详解
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- jQuery中的ajax使用详解
$.ajax({ type : "get", url : "http://www.w3school.com.cn/jquery/ajax_ajax.asp&quo ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
- jquery $.trim()去除字符串空格详解
jquery $.trim()去除字符串空格详解 语法 jQuery.trim()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止 ...
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
随机推荐
- CTF 字符统计2
题目地址:http://sec.hdu.edu.cn/question/web/1076/ 这一题跟上一篇那题有点相似,查看一下源代码: 发现字符产所处的HTML标签变了,还有就是上一题是get请求, ...
- redis 字符串
redis 字符串 概述 redis 没有使用 c 语言风格的字符串表示(以 "\0" 作为结尾), 而是使用自定义的 sds 结构 字符串结构 定义位置 (src/sds.h) ...
- 使用Block传值
使用Block的地方很多,其中传值只是其中的一小部分,下面介绍Block在两个界面之间的传值: 先说一下思想: 首先,创建两个视图控制器,在第一个视图控制器中创建一个UILabel和一个UIButto ...
- 设备offline时如何自动重置
在linux底层 Linux/include/uapi/linux/usbdevice_fs.h中,重置_IO('U', 20)可以重置usb设备. 因此,我们可以在脚本中利用这个方法去重置USB 代 ...
- mysql查询今天、昨天、7天、近30天、本月、上一月 数据
今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...
- margin重叠
margin重叠也就是我们常说的CSS 外边距合并,W3C给出如下定义: 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 ...
- DOS(Disk Operation System:磁盘操作系统)常见命令
学习Java语言的第一节课总是练习DOS命令,用记事本敲出自己的第一个Java语言的HelloWorld程序案例,在此特意总结一下基本的DOS命令以作记录和分享. Windows+R快捷键---> ...
- HTML标签元素分类（HTML基础知识）
HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...
- Python实现脚本锁功能，同时只能执行一个脚本
1. 文件锁 脚本启动前检查特定文件是否存在,不存在就启动并新建文件,脚本结束后删掉特定文件. 通过文件的判断来确定脚本是否正在执行. 方法实现也比较简单,这里以python脚本为例 #coding= ...
- Numpy的使用
Numpy的主要功能: 可以观察以上的规律,会发现,代码类型的简写,计量都是以8作为起始1的. # -*- coding: utf-8 -*- #向量相加-Python def pythonsum(n ...