jQuery和AJAX使用
- 是一个JavaScript函数库
- 轻量级的javaScript库
1、jquery语法
jQuery 语法是通过选取HTML元素,并对元素执行某些操作。
$(selector).action)
- 美元符号定义jQuery
- 选择符(selector) 查询和查找html元素
- jquery的action()执行对元素的操作
元素选择器
$(“p”)
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id选择器
$("#test")
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class选择器
$(".test")
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
2、jquery事件
click() 单击元素
$("p").click(function(){
// 动作触发后执行的代码!!
});
dblclick() 双击元素
$("p").dblclick(function(){
$(this).hide();
});
mouseenter() 鼠标穿过元素
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
**mouseleave()**鼠标离开元素
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
});
**mousedown()**鼠标移动到元素上方,并按下
**mouseup()**在当前元素上松开鼠标
**hover()**当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)
**focus()**当元素获得焦点时,发生 focus 事件。
**blur()**当元素失去焦点时,发生 blur 事件。
3、jquery效果
jQuery 效果- 隐藏和显示
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
**toggle()**切换hide()和show()方法
$("button").click(function(){
$("p").toggle();
});
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
4、jQuery 获取内容和属性
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#runoob").attr("href"));
});
jQuery - 添加元素
$(“p”).append(“追加文本”);
$(“p”).prepend(“在开头追加文本”);
jQuery - 删除元素
$("#div1").remove();
jQuery - 获取并设置 CSS 类
#添加 class 属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
#删除指定的 class 属性:
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
#toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery css() 方法
返回指定的 CSS 属性的值
$(“p”).css(“background-color”);
设置指定的 CSS 属性
$(“p”).css(“background-color”,“yellow”);
设置多个 CSS 属性
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});
5、jQuery 遍历
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
6、jQuery - AJAX 简介
什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。以及交互性更强的web应用程序的技术
不是一种编程语言,而是一种用于创建更好更快
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法
$(selector).load(URL,data,callback);
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
利用AJAX可以做
- 注册时,输入用户名自动检测用户是否已经存在
- 登录时,提示用户密码错误
- 修改用户名密码时候,判断旧密码是否输入正常
- 删除数据行时,将ID发送到后台,后台数据库删除成功,在页面DOM中将数据行也删除。
1、jQuery.get(...)
所有参数:
url:待载入页面的URL地址
data:待发送key/value 参数
success:载入成功时回调函数
dataType:返回内容格式,xml, json,script,text,html
2、jQuery.post(...)
3、jQuery.ajax(...)
部分参数:
url:请求地址
type:请求方式,get,post
data:要发送的数据
success:成功之后执行的回调函数
data:封装了服务器返回的数据
status:状态
@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
String msg = "";
if(name!= null){
if("admin".equals(name)){
msg = "ok"
}else{
msg= "用户名错误";
}
}
if(pwd!= null){
if("123456".equals(pwd)){
msg = "ok"
}else{
msg= "密码输入错误";
}
}
return msg;
}
<script>
function a1(){
$.post({
url:${pageContext.request.contextPath}/ajax/a3,
data:{"name:$("#name").val()},
success:function(data){
if(data.toString()=='ok'){
//信息核对成功
$('#userInfo').css("color","green")
}else{
$('#userInfo').css("color","red")
}
$("#userInfo").html(data);
}
});
}
function a2(){
$.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("pwd").val()},function(data){
if(data.toString()=='ok'){
//信息核对成功
$('#pwdInfo').css("color","green")
}else{
$('#pwdInfo').css("color","red")
}
$("#pwdInfo").html(data);
})
}
</script>
<p>
用户名:
<input type ="text" id = "name" οnblur="a1()"/>
<span id= "userInfo"></span>
</p>
<p>
密码:
<input type="text" id="pwd" οnblur="a2()"/>
<span id ="pwdInfo"></span>
</p>
ajax总结
使用jQuery需要导入jQuery,使用vue导入vue,也可以原生实现
步骤:
-
编写对象的Controller,返回消息或者字符串或者json格式的数据;
-
编写ajax请求
- url:Constroller请求
- data:键值对
- success:回调函数
-
给ajax绑定事件
- 点击.click
- 失去焦点onblur
- 键盘弹起keyup