JavaScript 框架学习(JQuery)
参考: http://www.w3cschool.cc/jquery/jquery-tutorial.html
参考: http://tool.oschina.net/apidocs/apidoc?api=jquery
// 注意:在JS代码中,为保证 JS代码能够正常运行,需要在HTML代码加载完毕后,再执行JS代码。
<script>
$(document).ready(function(){
// 代码放在这 ... ...
// 好几一因为这个原因,jQuery无法选定DOM,所以无法执行代码 ... ...
});
</script>
一、JQuery教程
JQuery是一个JavaScript库,极大的简化了JavaScript编程。
想着之后再看 HTML5 , CSS3 看来需要先看下了 .... 看完再更新这个吧 ...
二、AJAX
jQuery实现ajax还是比较简单的。
(一)AJAX 请求
(1)jQuery.ajax()
jQuery.ajax(url, [settings]); 通过HTTP请求加载远程数据。jQuery底层的实现,简易高层实现 .get(), .post() 等。
① 回调函数
如果需要处理 $.ajax() 得到的数据,需要使用回调函数。
beforeSend:在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
error:请求在出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)。
dataFilter:在请求成功之后调用。传入返回数据以及“dataType”参数的值。并且必须返回(经处理的)数据传递给success回调函数。
success:当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
complete:当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
②数据类型
$.ajax() 函数依赖服务器提供的信息来处理返回数据。
通过指定 dataType选项还可以指定不同的数据处理方式。出了xml还有html,json,jsonp,script,text。
③参数
url:一个用来包含发送请求的URL字符串。
async:默认为true,所有请求均为异步请求。当设置为false时,同步请求将锁住浏览器,其他操作必须等待请求完成之后。
data:发送到服务器的数据,将自动转换为请求字符串格式。必须是Key/Value格式。
dataType:预期服务器返回的数据类型。
success(data, textStatus, jqXHR):请求成功之后回调函数。参数由服务器返回,并根据dataType参数进行处理数据。
timeout:设置请求超时时间(毫秒)。
type:默认“GET”,请求方式可为“POST”或“GET”,如浏览器支持还可使用“PUT”,“DELETE”。
// 示例。加载并执行一个 JS 文件
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
// 一个稍微完整点的例子
<script src="static/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
$("#submit").click(function () {
$.ajax({
type: "POST",
url: "ajax_resp.php",
data: "user=" + $("#datePicker").val(),
success: function (data, status) {
$("#resp").html(data);
}
});
});
});
</script>
<input type="text" name="date" id="datePicker" />
<input type="button" id="submit" value="ajax 提交" />
<br>
<div id="resp"></div>
(2)load(url, [data], [callback])
①概述
载入远程HTML文件代码至DOM中。默认使用GET方式,当data有值时,自动转换为POST方式。
②参数
url:待载入HTML地址
data:发送至服务器Key/Value数据,或字符串。
callback:载入成功时回调函数。
<script src="static/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
$("#resp").load("webdictionary.txt");
});
</script>
<div id="resp"></div>
(3)jQuery.get(url, [data], [callback], [type])
通过远程HTTP GET 请求载入信息。简单的GET请求,以取代复杂的 $.ajax() 。
$.get(
"test.php",
{user: "John"},
function(data){
alert(data);
}
);
(4)jQuery.getJSON(url, [data], [callbacj])
通过HTTP GET 请求载入 JSON数据。
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
(5)jQuery.getScript(url, [callback])
通过HTTP GET 请求载入并执行一个 JavaScript文件。
如果使用 getScript 加入脚本, 请加入延时函数。
url:待载入 JS 文件地址。 callback:成功载入后回调函数。
$.getScript("test.js", function(){
alert("脚本加载完毕。");
});
(6)jQuery.post(url, [data], [callback], [type])
通过远程HTTP POST 请求载入信息。简单的POST请求代替复杂的 $.ajax() 。
$.post(
"test.php",
{ "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
},
"json"
);
(二)AJAX 事件
(1)ajaxComplete(callback)
AJAX请求完成时,执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。
- JQuery实现仿sina新浪微博新鲜事滚动
- 简单的jquery拖曵原理js特效实例
- 使用MiniProfiler调试ASP.NET MVC网站性能
- 大金主撑腰 4声母Mynt.com竟36万元结拍
- ASP.NET MVC4 Web API 堆栈将添加指定消息处理功能
- 页面copyright部分始终居于页面底部
- Hammock for REST
- 网页超过一屏时自动浮动在网页最上方的图层特效
- 关于gcc、glibc和binutils模块之间的关系
- 贝叶斯过滤算法
- 強大的jQuery Chart组件-Highcharts
- vue2.0 配置 选项 属性 方法 事件 ——速查
- 亲密接触IIS 8和Web Deploy 3.0
- vue2.0 组件通信
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python测试开发django-83.Dockerfile部署django项目
- python测试开发django-82.线上部署设置DEBUG=FALSE
- BCEL ClassLoader去哪了
- python接口自动化35-r.html.render() 下载无反应问题解决
- 源码编译搭建Spark3.x环境
- 搭建Hive3.x并整合MySQL8.x存储元数据
- MySQL binlog_error_action分析
- docker(数据卷容器)
- Python炫技操作:模块重载的五种方法
- 一文搞定 Eureka 集群高可用配置
- SpringBoot三招组合拳,手把手教你打出优雅的后端接口
- 在bootstrap中col-md-offset-* 偏移不起作用
- ES6 模糊查询 智能联想(不区分大小写)
- 干货分享 | K8s 、Docker 常用命令汇总
- 干货 | YOLOV5 训练自动驾驶数据集,并转Tensorrt,收藏!