目录
异步请求局部刷新
架构
技术栈
执行过程
jQuery简介
什么是jQuery
jQuery的语法
jQuery的优势
jQuery的使用
文档就绪事件
测试
总结
异步请求局部刷新
架构
主流方式:
技术栈
- JavaScript 形成交互
- jQuery 封装JavaScript,代码更加简洁高效
- ajax 异步请求
- json 数据传输
- Web中间件(tomcat) 处理请求和响应
- mysql数据库 存取数据
执行过程
用户页面中触发ajax请求,访问后端服务器,Web中间件拦截用户请求,转发后端程序进行数据处理,一般还需访问数据库,然后逐层返回。数据库返回数据处理服务,数据处理服务返回Web中间件,Web中间件返回ajax调用,将数据封装到返回的js对象中,目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据,最终回显到页面上。通常我们使用jquery封装过的ajax,写法更加简洁灵活。
jQuery简介
什么是jQuery
jQuery是一门轻量的、免费开源的JS函数库,主要作用是用于简化JS代码
轻量的:代码或项目对该技术的依赖程度,依赖程度越低,这个技术越轻,反之,依赖程度越高,这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想:"写的更少,但做的更多"
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。
jQuery** 库包含以下功能:**
- HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
-
jQuery的语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法是:$(selector).action()
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery的优势
1,简化了js的写法,用$替代了document.getXxx()
2,可以像CSS选择器一样非常方便的获取元素
3,可以通过修改css样式控制页面的效果
var ele = document.getElementById("username"); //js
var ele = $("#username"); // jQuery
var ele = document.getElementsByTagName("p"); //js
var ele = $("p"); //jQuery
var ele = document.getElementsByName("username"); //js
var ele = $('input[name="username"]'); // jQuery
var ele = document.getElementsByClassName("info"); //js
var ele = $(".info"); // jQuery
$("div").css("background", "red");
$("div").css({
"background" : "blue",
"border" : "2px solid red",
"font-size" : "30px"
});
jQuery的使用
jQuery其实就是一个JS文件,如需使用 jQuery,需要下载,然后使用 HTML 的script标签引用它,应该位于页面的head 部分。
<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者:
<script src="jquery.js"></script>
文档就绪事件
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败。
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
// var a = document.getElementById("p1");
// alert(a); //null
// alert(a.innerHTML);
// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
//jQuery语法:$(选择器).action{ } ;
$(document).ready(function(){
var a = document.getElementById("p1");
alert(a.innerHTML);
});
// 方式3: 简写
$(function(){
var a = document.getElementById("p1");
alert(a.innerHTML);
});
</script>
</head>
<body>
<h1 id="p1">文档就绪</h1>
</body>
</html>
总结
什么时候该使用文档就绪事件函数?
如果在获取元素时,获取元素的代码执行的时机(时间)比元素本身加载的时间还要早,如果元素还没有加载到就获取,必然是获取不到的!
将获取元素的代码放在文档就绪事件函数中,等浏览器加载完整个网页后,文档就绪事件函数才会执行,此时所有的元素都被加载过了,再获取任何元素都能获取到!
更多推荐
jQuery简介-01
发布评论