JS与JQuery点击事件传递参数_jq在web前端的button点击时调用函数,现在要传参-CSDN博客

本文链接：https://blog.csdn.net/yels303/article/details/50908834

本文介绍了JS和JQuery在Web开发中的应用，并探讨了如何在点击事件中传递参数。通过示例展示了在JavaScript中直接使用onclick和在JQuery中利用选择器实现事件处理的两种不同方式，强调了在实际项目中采用JQuery选择器以实现页面内容和行为分离的优越性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们知道JS(javascript)是一种脚本语言，用于客户端web开发，常用来给html网页添加动态功能，是客户端运行的解释性语言。

JQuery是对js的封装，简化了ajax和html的一款js框架，利用JQuery可以更加简单和模块化的使用js.

按钮点击事件传递参数的两种写法：

1、在同网页上利用js

一个“编辑”按钮，名字为editBtn,class其他的是bootstrap按钮样式

<a type="button" methods="get" onclick="toEdit(this)" class="editBtn btn btn-xs btn-success">编辑</a>

在js中接受参数并实现定义的函数

<script language="javascript">
  function toEdit(btn){
    var tr = $(btn).parents("tr");
    tr.toggleClass("edit");

    if(tr.hasClass("edit")){
      tr.find('.month input').attr("disabled",false);

      tr.find(".editBtn").hide();
      tr.find(".submitBtn").show();

    }else{
      tr.find('.month input').attr("disabled",true)
    }
    return false;
  }
</script>

btn即为传递过来的参数this,至当前点击的按钮。

2、在JQuery中实现

一个“编辑”按钮，名字为editBtn,class其他的是bootstrap按钮样式，不用定义onclick()函数

<a type="button" methods="get" class="editBtn btn btn-xs btn-success">编辑</a>

$(".editBtn").click(function(){    //给class为editBtn的元素添加行为
        var tr = $(this).parents("tr");
        tr.toggleClass("edit");

        if(tr.hasClass("edit")){
            tr.find('.month input').attr("disabled",false);

            tr.find(".editBtn").hide();
            tr.find(".submitBtn").show();

        }else{
            tr.find('.month input').attr("disabled",true)
        }
        return false;
    });

按钮被点击即触发函数，利用&(this)拿到当前参数值。

在实际项目的页面设计中，我们一般使用后者最好，原则为页面内容和行为分离，便于管理。

CSS选择器让html表现和内容相分离
JQuery选择器让页面内容和行为分离