常用的 jQuery 事件方法
- $(document).ready(function) 文档完全加载完后执行函数
- click(function) 方法是当按钮点击事件被触发时会调用一个函数
- dblclick(function)双击元素时,会发生 dblclick 事件。
- mouseenter(function)当鼠标指针穿过元素时,会发生 mouseenter 事件。
- mouseleave(function)当鼠标指针离开元素时,会发生 mouseleave 事件。
- hover(function)方法用于模拟光标悬停事件。
- focus(function)当元素获得焦点时,发生 focus 事件。
- blur(function)当元素失去焦点时,发生 blur 事件。
-
<script> //1.html 通过事件属性来设置对应事件 //function 事件处理函数(){} //<input type="button" value="按钮" onclick="事件处理函数"> //2.得到html元素的dom对象,调用方法的设置 /* window.onload=function(){ var btndom=document.getElementById("btn1"); btndom.onclick=function(){} } <input id="btn1" type="button" value="按钮" onclick="事件处理函数">*/ //使用按钮的点击事件来学习事件的设置 $(function(){ $("#b1").click(function(){ alert("点击事件"); }); }) //双击事件 $(function(){ $("#b2").dblclick(function(){ alert("双击事件"); }); }) //鼠标指针穿过元素时,会发生 mouseenter 事件 $(function(){ $("#b3").mouseenter(function(){ alert("鼠标移入事件"); }); }) //鼠标指针离开元素时,会发生 mouseleave 事件 $(function(){ $("#b4").mouseleave(function(){ alert("鼠标离开事件"); }); }) //模拟光标悬停事件 $(function(){ $("#a1").hover(function(){ alert("光标悬停"); }); }) //元素获得焦点时 $("#t1").focus(function (){ $(this).val("background-color"); }); //元素失去焦点时 $("#t1").blur(function(){ alert($(this).val()); }); </script> </head> <body> <input type="button" id="b1" value="单击" > <br><br> <input type="button" id="b2" value="双击" > <br><br> <input type="button" id="b3" value="鼠标移入" > <br><br> <input type="button" id="b4" value="鼠标离开" > <br><br> <a id="a1" href="#">光标悬停</a> <br><br> <input id="t1" type="text" value="获得焦点和失去焦点"> </body>
元素的隐藏和显示动画【就是元素的隐藏和显示】
hide([毫秒数],[success-function]) 隐藏元素
show([毫秒数],[success-function]) 显示元素
fadeIn([毫秒数],[success-function]) 显示元素。
fadeOut([毫秒数],[success-function]) 隐藏元素。
slideDown([毫秒数],[success-function]) 显示元素
slideUp([毫秒数],[success-function]) 隐藏元素
<script>
$(function(){
/*
$("[src]").hide();
$("[src]").hide(3000);
$("[src]").hide(3000,function(){
});
$("[src]").fadeOut(3000);
$("[type]").val("显示");
*/
$("[type]").click(function(){
if($("[type]").val()=="隐藏"){
$("[src]").slideUp(3000);
$("[type]").val("显示");
}else{
/*
$("[src]").show();
$("[src]").show(3000);
$("[src]").show(3000,function(){
});
$("[src]").fadeIn(3000);
$("[type]").val("隐藏");
*/
$("[src]").slideDown(3000);
$("[type]").val("隐藏")
}
});
})
</script>
</head>
<body>
<input type="button" value="隐藏"> <br><br>
<img src="css/faq03.jpg">
</body>
jQuery 效果- 动画
jQuery animate() 方法允许您创建自定义的动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<style>
img{
position:absolute;
top:50px;
left:50px;
}
</style>
<script>
$(function(){
$("#b1").click(function(){
$("[src]").animate(
{"position":"absolute","top":"50px","left":"1000px"},
5000,
function(){
alert("动画执行结束");
}
);
});
$("#b2").click(function(){
$("[src]").stop();
})
})
</script>
</head>
<body>
<input id="b1" type="button" value="开始动画">
<br>
<input id="b2" type="button" value="停止动画">
<br><br>
<img src="css/tu1.jpg" style="height: 400px; width: 400px;">
</body>
总结:
- jQuery 选择器
- jQuery对象与javascriptDOM对象转换
- jQuery控制html元素内容【text([content]) /html([content]) / val([content]) 】
- jQuery添加html元素[append()/ after() / before()]
- jQuery删除html元素[remove()/empty()]
- jQuery控制css 【css(“css属性名”)
/ css(“css属性名”,”属性值”)
/css({“css属性名”:”属性值”,....})
/addClass(class类型样式)
/removeClass(class类型样式)
- jQuery控制事件 【jquery对象.事件名称(function(){/* 事件处理动作 */})】
- jQuery的each方法
jQuery的AJAX操作
jQuery - AJAX的常用方法
$.ajax()执行异步 AJAX 请求
语法:$.ajax({name:value, name:value, ... })
url:"后端处理程序的访问路径"---后端处理程序的访问路径
type:"GET"/"POST" --- 规定请求的类型(GET 或 POST)
data:{userid:userid} --- 规定要发送到服务器的数据。
dataType:"xml"/"text"/"json" ----规定预期的服务器响应的数据类型
success:function(result,status,xhr) --- 规定当请求成功时运行的函数。
async:true/false ---布尔值,表示请求是否异步处理。默认是 true。
error:function(status,xhr,error) ---请求失败要运行的函数。
<script>
//javascript 的for each 方法
// window.onload=function(){
// var pdom=document.getElementsByTagName("p");
// $(pdom).each(function(index){
// var size = index*10+20;
// $(this).css("font-size",size+"px");
// })
// }
//jquery 的 each()
$("selector").each(function(index,[element]){ })
$(function(){
var pdom=$("p");
pdom.each(function(index){
// index---元素下标
// element---当前元素的dom对象,可以使用this代替
var size=index*10+20;
$(this).css("font-size",size+"px");
})
})
</script>
</head>
<body>
<p>测试遍历元素1</p>
<p>测试遍历元素2</p>
<p>测试遍历元素3</p>
<p>测试遍历元素4</p>
</body>
$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据
语法
$.get(URL,data,function(data,status,xhr),dataType)
url----后端处理程序的访问路径
data---提交给后端处理程序的数据。
function(data,status,xhr)----当请求成功时运行的函数
dataType---"text"、"json" 预期的服务器响应的数据类型.
<script>
$(function(){
$("#login").click(function(){
var name=$("#name").val();//得到用户名
var pass=$("#pass").val();//得到密码
//var myurl = "http://localhost:8080/login?username="+name+"&password="+pass;
//$.ajax({name:value, name:value, ... })
//url:"后端处理程序的访问路径"---后端处理程序的访问路径
//type:"GET"/"POST" 规定请求的类型(GET 或 POST)
//data:{userid:userid} 规定要发送到服务器的数据。
//dataType:"xml"/"html"/"text"/"json" 规定预期的服务器响应的数据类型
//success:function(result,status,xhr) 规定当请求成功时运行的函数。
//async:true/false 布尔值,表示请求是否异步处理。默认是 true。
//error:function(status,xhr,error) 请求失败要运行的函数。
$.ajax({
url:"http://localhost:8080/login?username="+name+"&password="+pass,
type:"GET",
dataType:"text",
success:function(resp){
var jsonobj=JSON.parse(resp);
// alert("resp-"+resp);
if(jsonobj.success){
window.location.href="test 1016 5s.html";
}else{
alert("用户名密码错误!");
}
},
async:true,
error:function(){}
})
})
/*$("#login").click(function(){
var name=$("#name").val();//得到用户名
var pass=$("#pass").val();//得到密码
$.ajax({
url:"http://localhost:8080/login?username="+name+"&password="+pass,
type:"POST",
dataType:"text",
success:function(resp){
var jsonobj=JSON.parse(resp);
// alert("resp-"+resp);
if(jsonobj.success){
window.location.href="test 1016 5s.html";
}else{
alert("用户名密码错误!");
}
},
async:true,
error:function(){}
})
})*/
/*$.ajax({
url:"http://localhost:8080/login",
type:"POST",
data:{username:name,password:pass},
dataType:"text",
success:function(resp){
var jsonobj=JSON.parse(resp);
if(jsonobj.success){
window.location.href="test 1016 5s.html";
}else{
alert("用户名密码错误!");
}
},
async:true,
error:function(){}
})
})*/
})
</script>
</head>
<body>
<table border="1px">
<tr align="center">
<td colspan="2">
<h2>测试Jquery的get</h2>
</td>
</tr>
<tr align="center">
<td>用户名:</td>
<td><input id="name" type="text"></td>
</tr>
<tr align="center">
<td>密码:</td>
<td><input id="pass" type="password"></td>
</tr>
<tr align="center">
<td colspan="2"><input id="login" type="button" value="登陆"></td>
</tr>
</table>
</body>
<script>
$(function(){
$("#login").click(function(){
var name=$("#name").val();//得到用户名
var pass=$("#pass").val();//得到密码
/*$.get("http://localhost:8080/login?username="+name+"&password="+pass,
function(resp){
var jsonobj=JSON.parse(resp);
// alert("resp-"+resp);
if(jsonobj.success){
window.location.href="test 1016 5s.html";
}else{
alert("用户名密码错误!");
}
},"text");*/
$.get("http://localhost:8080/login","username="+name+"&password="+pass,
function(resp){
var jsonobj=JSON.parse(resp);
// alert("resp-"+resp);
if(jsonobj.success){
window.location.href="test 1016 5s.html";
}else{
alert("用户名密码错误!");
}
},"text");
})
})
</script>
</head>
<body>
<table border="1px">
<tr align="center">
<td colspan="2">
<h2>测试Jquery的get</h2>
</td>
</tr>
<tr align="center">
<td>用户名:</td>
<td><input id="name" type="text"></td>
</tr>
<tr align="center">
<td>密码:</td>
<td><input id="pass" type="password"></td>
</tr>
<tr align="center">
<td colspan="2"><input id="login" type="button" value="登陆"></td>
</tr>
</table>
</body>
$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法$.post(URL,data,function(data,status,xhr),dataType)
url----后端处理程序的访问路径
data---提交给后端处理程序的数据。
function(data,status,xhr)----当请求成功时运行的函数
dataType---"text"、"json" 预期的服务器响应的数据类型.
<script>
$(function(){
$("#login").click(function(){
var name=$("#name").val();//得到用户名
var pass=$("#pass").val();//得到密码
/*$.post("http://localhost:8080/login?username="+name+"&password="+pass,
function(resp){
var jsonobj=JSON.parse(resp);
// alert("resp-"+resp);
if(jsonobj.success){
window.location.href="test 1016 5s.html";
}else{
alert("用户名密码错误!");
}
},"text");*/
var url="http://localhost:8080/login";
var data={username:name,password:pass};
$.post(url,data,function(resp){
var jsonobj=JSON.parse(resp);
if(jsonobj.success){
window.location.href="test 1016 5s.html";
}else{
alert("用户名密码错误!");
}
},"text");
})
})
</script>
</head>
<body>
<table border="1px">
<tr align="center">
<td colspan="2">
<h2>测试Jquery的get</h2>
</td>
</tr>
<tr align="center">
<td>用户名:</td>
<td><input id="name" type="text"></td>
</tr>
<tr align="center">
<td>密码:</td>
<td><input id="pass" type="password"></td>
</tr>
<tr align="center">
<td colspan="2"><input id="login" type="button" value="登陆"></td>
</tr>
</table>
</body>