Jquery绑定事件

Posted 2020-10-25 hmwnote

绑定事件的方法：

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(); 
            }
        });