首页 > 其他分享> > jQuery事件处理

jQuery事件处理

2022-05-03 14:31:23 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        var itBooks = [{"bookid":"BK100","title":"Java核心基础","price":69},
        {"bookid":"BK110","title":"Oracle应用","price":90},
        {"bookid":"BK120","title":"C#语言入门","price":60},
        {"bookid":"BK130","title":"Ajax异步处理","price":58},
        ]

        /* 文档加载完成后给第一个按钮添加鼠标单击事件，如果价格小于60购买此书 */
        $(function(){
            $('p button:first').on('click',{'books':itBooks},function(e){
                var bookArr = e.data.itBooks;
                $(bookArr).each(function(i){
                    if(this.price <= 60)
                        alert(this.title+" 比较便宜 价格是 "+this.price+" 我要买");
                    else
                        alert(this.title+" 比较贵 价格是 "+this.price+" 买不起");
                })
            });
        })

        /* 文档加载完成后为p段落中第二个按钮添加鼠标单击事件
            计算传入两个整数的和
            和键盘按下事件，计算传入两个整数的积 */
        var f1 = function sum(e){
            alert('和的结果是 '+(e.data.n + e.data.m))
        }

        var f2 = function ji(e){
            alert('积的结果是 '+(e.data.n * e.data.m))
        }


        $(function(){
            //$('p button:eq(1)').on({'click':f1,'keydown':f2},{n:45,m:55});
            $('p button:eq(1)').on({'click':function(e){
                alert('和的结果是 '+(e.data.n + e.data.m));
            },'keydown':function(E){
                alert('积的结果是 '+(E.data.n * E.data.m));
            }},{n:45,m:55});
        })


    </script>
</head>
<body id="body_">
    <p class="c_1">
        <button>点击遍历数组</button>
        <button>测试绑定多个事件</button>
        <button>按钮三</button>
    </p>
    <label onclick="removeEven()" >移除事件</label>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /* 当提交表单时，如果用户名文本框值为空则禁止提交表单 */
        $(function(){
            $('form').bind('submit',function(){
                if($('#a').val() === ''){
                    alert('用户名称必需填写');
                    return false;
                }
                return true;
            });
        });
        /*为按钮1注册一个一次性鼠标单击事件，改变按钮的文本*/
        var content ="一次性点击事件";
        $(function(){
            $('p button:first').one('click',{content},function(e){
                alert("单击事件发生，函数被调用");
                this.innerText = e.data.content;
            });
        });
    </script>
</head>
<body id="body_">
    <p class="c_1">
        <button>按钮一</button>
        <button>按钮二</button>
        <button class="b_1">按钮三</button>
    </p>
    <label>移除事件</label>
    <form action="http://www.baidu.com">
        用户名:<input name="java" value="" id="a" />
        <input type="submit" value="提 交">
    </form>
</body>
</html>

标签：jQuery,事件处理,bookid,title,function,price,事件,按钮
来源： https://www.cnblogs.com/zengyu1234/p/16218304.html