绑定事件的方法:
1.通过DOM对象属性。
<a href=" " id="login_button">登录</a>
js代码:
$(‘login_button‘).onclick = function(){}
2.通过HTML元素属性。就是在html结构中,给你要添加事件的元素添加一个事件属性
<a href="#" onclick="login()">登录</a>
3.在<a>标签的href属性值中使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。
<a href="javascript:search()">查询</a>
例一:通过DOM对象属性,即在js代码中通过id绑定
登录提交按钮:
<input id="login_button" type="submit" value="登录">
js代码:
$(function() { $("#login_button").click(function() { $.ajax({ url : "/nutzbook/user/login",//请求的链接地址 type : "POST",//请求方式常用的是 get或者post,默认为get请求 data : $(‘#loginForm‘).serialize(),//jQuery的serialize()方法通过序列化表单值,把序列化的值传给ajax()作为url的参数,这样就不需要一个一个获取表单中的值然后传给ajax() dataType : "json",//预期服务器返回的数据类型 success : function(data) {//要求为Function类型的参数,请求成功后调用的回调函数 console.info(data); if (data != null) { alert("登陆成功"); location.href = "/nutzbook/detailform.html"; } else { alert("登陆失败,请检查账号密码"); } } }); return false; }); });
例二:给超链接添加事件
在<a>标签的href属性值中使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。
<a id="btn" href="javascript:search()" class="easyui-linkbutton">查找</a>
js代码:
$(function(){ search(); }); /* 查询 */ function search() { $(‘#form1‘).form(‘submit‘, {//使表单form1成为ajax提交方式的表单 url : encodeURI("/nutzbook/member/query"),//提交表单动作的URL地址,encodeURI()函数可把字符串作为 URI 进行编码 success : function(data) {//在表单提交成功以后触发的回调函数,参数data为返回的json数据 //console.info(data);//json对象数组 data = JSON.parse(data);//将json对象数组转换为json对象 //console.log(data);//json对象 $(‘#dg‘).datagrid(‘loadData‘, data); //请求成功后将查询结果显示在id=dg的表格中 } }); }
例三:通过HTML元素属性。就是在html结构中,给你要添加事件的元素添加一个事件属性
登录提交按钮:
<button id="btn-login" type="button" onclick="login()">登 录</button>
js代码:
// 登录 function login() { var userName = $(‘#input-username‘).val(); var passWord = $(‘#input-password‘).val(); if (userName == "" || userName == undefined) { $("#remind-info").html("<font color=‘red‘>请输入用户名!</font>"); return; } if (passWord == "" || passWord == undefined) { $("#remind-info").html("<font color=‘red‘>请输入密码!</font>"); return; } $("#remind-info").html(""); $("#btn-submit").attr("disabled", true); $("#remind-info").html("<img id=‘loding‘ src=‘img/loading.gif‘ />"); $.post("user/login", { username : userName, password : passWord }, function(result) { if(result == ""){ $("#remind-info").html("发生错误,请联系管理员"); }else{ var result = eval(‘(‘ + result + ‘)‘); if (result.code == ‘000‘) { if($("#cbx-remb-me").attr(‘checked‘) == true){ setCookie("username",userName); setCookie("password",passWord); setCookie("remberme","true"); } window.location.href = "../../cas/page/index.jsp"; } else { var authResult = result.dataMap; if(!isEmpty(authResult)){//产品认证失败 if(userName.indexOf("admin") > -1){ //跳转,重新录入注册码 window.location.href = "../../page/auth/auth.html"; }else{ $("#remind-info").html("<font color=‘red‘>产品已到期,请联系管理员重新注册!</font>"); } }else{ $("#remind-info").html(""); $("#remind-image").html(""); $("#btn-submit").attr("disabled", false); $("#remind-info").html("<font color=‘red‘>"+result.message+"!</font>"); } } } }); };
例四:easyUI中绑定事件
easyUI表格:
<!-- 表格 --> <table id="dg" class="easyui-datagrid" style="width: 500px; height: 200px" data-options=" rownumbers:true, ctrlSelect:true, method:‘get‘, toolbar: ‘#tb‘, onClickRow:endEdit, onDblClickRow:editRow "> <thead> <tr> <th data-options="field:‘name‘,width:100,editor:‘text‘">姓名</th> <th data-options="field:‘old‘,width:80,editor:‘numberbox‘">年龄</th> <th data-options="field:‘pinYin‘,width:100,align:‘right‘,editor:‘text‘">拼音</th> <th data-options="field:‘position‘,width:100,align:‘right‘,editor:‘text‘">职位</th> <th data-options="field:‘ck‘,checkbox:true"></th> </tr> </thead> </table>
js代码:
/* 双击事件对应的方法——编辑 */ function editRow(index, row) {//这里的参数为onDblClickRow事件的参数,index为点击的行的索引值,row为对应于点击行的记录。事件和函数相关联,函数里调用相关方法和参数 $(‘#dg‘).datagrid(‘beginEdit‘, index);//beginEdit为方法名,index为方法的参数 indexEdit = index; } /* 单击事件对应的方法——退出编辑 */ function endEdit(){ if(indexEdit!=undefined){//如果开启了行编辑,则关闭 $(‘#dg‘).datagrid(‘endEdit‘, indexEdit); } }
例五:easyUI中下拉列表框通过id在js中绑定事件
<!-- 下拉列表 -->
<select id="cc" name="position" class="easyui-combobox" panelHeight="100" >
<option value="总经理">总经理</option>
<option value="开发">开发</option>
<option value="实施">实施</option>
<option value="" selected>全部</option>
</select>
js代码:
/* 下拉列表选项 */ $(‘#cc‘).combobox({ onChange: function(newValue,oldValue){//在字段值发生更改的时候触发 //console.info(newValue); $(‘#cc‘).combobox(‘setValue‘, newValue);//设置下拉列表框的值 search(); } });