jquery的选择器和事件

最新推荐文章于 2019-05-09 16:29:22 发布

_学习机

最新推荐文章于 2019-05-09 16:29:22 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/ningbufan728903/article/details/55670688

版权

1.添加jquery文件

<script src="jquery-1.8.3.js" type="text/javascript"></script>
src为jquery-1.8.3.js所在硬盘的位置。

2.以id来定位
$("b2")

3.以标签来定位
$("input:eq(1)")

4.绑定方法

$("input:eq(1)").click(function(){
alert($("#a2").val());
});
5.得到后台的json属性

//绑定点击得到变量的按钮message
$("#message").click(function(){
$.getJSON("UserinfoAction!returnMessage.action",function(data){
//alert(data.message);
$("div").html("从服务器得到的数据是："+data.message);
});
});

6.得到后台的jaon变量
//绑定点击得到变量的按钮userinfo
$("#userinfo").click(function(){
$.getJSON("Userinfo2Action!returnUserinfo.action",function(data){
$("div").html("<table><tr><td>账号</td><td>密码</td></tr><br/><tr><td>"+data.userinfo.userid+"</td><td>"+data.userinfo.userpwd+"</td></tr><br/></table>");
$("div").addClass("ok");
});
});

7.得到后台的json集合

//绑定点击得到集合的按钮userinfos
$("#userinfos").click(function(){
var res = "<table><tr><td>帐号</td><td>密码</td></tr>";//存储要输出的HTML
$.getJSON("Userinfo3Action!returnUserinfos.action",function(data) {
//alert(data.userinfos);
//alert(data.userinfos[0].userid);//不循环，只取第几个，这样做
//循环，迭代:将struts2返回的集合userinfos,拿出来循环，
//index是每次循环的索引从0开始，从集合中拆箱得到的对象userinfo
$.each(data.userinfos,function(index,userinfo){
//alert(index);
res+="<tr><td>"+userinfo.userid+"</td><td>"+userinfo.userpwd+"</td></tr>";
});

res+="</table>";

//写到div区域里面去
$("div").html(res);
});
});

-------------------------------------------------------------------------------------------------------------
案例如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//绑定点击得到变量的按钮message
$("#message").click(function(){
$.getJSON("UserinfoAction!returnMessage.action",function(data){
//alert(data.message);
$("div").html("从服务器得到的数据是："+data.message);
});
});

//绑定点击得到变量的按钮userinfo
$("#userinfo").click(function(){
$.getJSON("Userinfo2Action!returnUserinfo.action",function(data){
$("div").html("<table><tr><td>账号</td><td>密码</td></tr><br/><tr><td>"+data.userinfo.userid+"</td><td>"+data.userinfo.userpwd+"</td></tr><br/></table>");
$("div").addClass("ok");
});
});

//绑定点击得到集合的按钮userinfos
$("#userinfos").click(function(){
var res = "<table><tr><td>帐号</td><td>密码</td></tr>";//存储要输出的HTML
$.getJSON("Userinfo3Action!returnUserinfos.action",function(data) {
//alert(data.userinfos);
//alert(data.userinfos[0].userid);//不循环，只取第几个，这样做
//循环，迭代:将struts2返回的集合userinfos,拿出来循环，
//index是每次循环的索引从0开始，从集合中拆箱得到的对象userinfo
$.each(data.userinfos,function(index,userinfo){
//alert(index);
res+="<tr><td>"+userinfo.userid+"</td><td>"+userinfo.userpwd+"</td></tr>";
});

res+="</table>";

//写到div区域里面去
$("div").html(res);
});
});

//map集合
$("#map").click(function(){
var res = "<table><tr><td>帐号</td><td>密码</td></tr>";//存储要输出的HTML
$.getJSON("UserinfoAction4!returnMaps.action",function(data) {
//alert(data.userinfos);
//alert(data.userinfos[0].userid);//不循环，只取第几个，这样做
//循环，迭代:将struts2返回的集合userinfos,拿出来循环，
//index是每次循环的索引从0开始，从集合中拆箱得到的对象userinfo
$.each(data.userinfos,function(index,userinfo){
//alert(index);
res+="<tr><td>"+userinfo.userid+"</td><td>"+userinfo.userpwd+"</td></tr>";
});

res+="</table>";

//写到div区域里面去
$("div").html(res);
});
});

//加减乘除
//加
$("#jia").click(function(){
$("#ccc").val(parseInt($("#aaa").val())+parseInt($("#bbb").val()));
});
//减
$("#jian").click(function(){
$("#ccc").val(parseInt($("#aaa").val())-parseInt($("#bbb").val()));
});
//乘
$("#cheng").click(function(){
$("#ccc").val(parseInt($("#aaa").val())*parseInt($("#bbb").val()));
});
//除
$("#chu").click(function(){
$("#ccc").val(parseInt($("#aaa").val())/parseInt($("#bbb").val()));
});
//注册验证
$("#userid").blur(function(){
if($("#userid").val()==""){
$("span:eq(0)").html("账号不能为空");
}else if($("#userid").val()=="admin"){
$("span:eq(0)").html("该账号已存在");
}else{
$("span:eq(0)").html("输入正确");
}
});

});
</script>
<style type="text/css">
.ok{
font-size:10px;
color:#0C6;
}
</style>

</head>

<body>
<input type="button" value="得到服务器属性" id="message"/><br/>
<input type="button" value="得到服务器对象" id="userinfo"/><br/>
<input type="button" value="得到服务器集合" id="userinfos"/><br/>
<input type="button" value="得到服务器MAP集合" id="map"/><br/>
<hr color="pink"/>
<div>

</div>
<hr color="pink"/>
<input type="text" id="aaa"/>
<input type="button" value="+" id="jia"/>
<input type="button" value="-" id="jian"/>
<input type="button" value="*" id="cheng"/>
<input type="button" value="/" id="chu"/>
<input type="text" id="bbb"/>
<input type="button" value="="/>
<input type="text" id="ccc"/>
<br/><br/>
<form action="" method="post">
账号：<input type="text" id="userid"/><span></span><br/>
密码：<input type="text" id="userpwd"/><span></span><br/>
<input type="submit" value="注册"/><br/>
</form>
</body>
</html>

_学习机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的选择器和事件

1.添加jquery文件src为jquery-1.8.3.js所在硬盘的位置。2.以id来定位$("b2")3.以标签来定位$("input:eq(1)")4.绑定方法$("input:eq(1)").click(function(){alert($("#a2").val());}); 5.得到后台的json属性
复制链接

扫一扫