js和jQuery获取点击按钮的属性

<html>

<head>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        function getByJs(that) {
            alert(that.getAttribute("button1"));
        }
        function getByJquery(that) {
            alert($(that).attr("button2"));
        }

        $(function () {
            $('body').delegate("[getAttr]", "click", function () {
                var that = $(this);
                var button3 = that.attr("button3");
                alert(button3);
            })
        })
    </script>
    <title>js和jQuery获取点击按钮的属性</title>
</head>

<body>
    <div button1="点击js获取" onclick="getByJs(this)">点击js获取</div>
    <div button2="点击jQuery获取" onclick="getByJquery(this)">点击jQuery获取</div>
    <div getAttr="XXXX" button3='delegate()获取'>delegate()</div>
</body>

</html>

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,可以参考以下代码实现美观的模态框效果: 1. HTML页面 ```html <!-- 引入LayUI样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <!-- 引入Jquery文件 --> <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script> <!-- 引入LayUI文件 --> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script> <!-- 编辑按钮 --> <button class="layui-btn layui-btn-normal" id="editBtn">编辑</button> <!-- 模态框 --> <div id="editModal" class="layui-form layui-form-pane" style="display:none;"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-inline"> <input type="radio" name="sex" value="0" title="男" checked> <input type="radio" name="sex" value="1" title="女"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄</label> <div class="layui-input-inline"> <input type="text" name="age" id="age" lay-verify="number" placeholder="请输入年龄" autocomplete="off" class="layui-input"> </div> </div> </div> ``` 2. Jquery代码 ```javascript // 点击编辑按钮,弹出模态框 $('#editBtn').click(function () { // 假设已经获取到了用户信息 var userInfo = { username: '张三', sex: 1, age: 18 }; // 将用户信息填充到模态框中 $('#username').val(userInfo.username); $('input[name="sex"][value="' + userInfo.sex + '"]').prop('checked', true); $('#age').val(userInfo.age); // 弹出模态框 layer.open({ type: 1, title: '修改用户信息', content: $('#editModal'), area: ['500px', '300px'], btn: ['保存', '取消'], skin: 'layui-layer-lan', yes: function(index, layero) { // 点击保存按钮后的操作 // 获取表单数据 var formData = { username: $('#username').val(), sex: $('input[name="sex"]:checked').val(), age: $('#age').val() }; // TODO: 发送请求保存数据 // 关闭模态框 layer.close(index); } }); }); ``` 3. LayUI代码 ```html <!-- 引入LayUI样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <!-- 引入Jquery文件 --> <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script> <!-- 引入LayUI文件 --> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script> <!-- 编辑按钮 --> <button class="layui-btn layui-btn-normal" id="editBtn">编辑</button> <!-- 模态框 --> <div id="editModal" class="layui-form layui-form-pane" style="display:none;"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-inline"> <input type="radio" name="sex" value="0" title="男" checked> <input type="radio" name="sex" value="1" title="女"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄</label> <div class="layui-input-inline"> <input type="text" name="age" id="age" lay-verify="number" placeholder="请输入年龄" autocomplete="off" class="layui-input"> </div> </div> </div> <script> // 点击编辑按钮,弹出模态框 $('#editBtn').click(function () { // 假设已经获取到了用户信息 var userInfo = { username: '张三', sex: 1, age: 18 }; // 将用户信息填充到模态框中 $('#username').val(userInfo.username); $('input[name="sex"][value="' + userInfo.sex + '"]').prop('checked', true); $('#age').val(userInfo.age); // 弹出模态框 layer.open({ type: 1, title: '修改用户信息', content: $('#editModal'), area: ['500px', '300px'], btn: ['保存', '取消'], skin: 'layui-layer-lan', yes: function(index, layero) { // 点击保存按钮后的操作 // 获取表单数据 var formData = { username: $('#username').val(), sex: $('input[name="sex"]:checked').val(), age: $('#age').val() }; // TODO: 发送请求保存数据 // 关闭模态框 layer.close(index); } }); }); </script> ``` 注意:需要在Jquery代码中先引入Layer组件,具体可以参考代码中的第二行和第三行。此外,为了美观,可以在弹出模态框时设置skin属性为'layui-layer-lan',表示使用蓝色主题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值