JQuery中如何传递参数如click(),change()等具体实现

因为要做这样一个作业,就是两个select中option相互转换,图如下:

这个作业就是给几个按钮添加click()事件,一般的用法是这样的:


代码如下:

$("#but_one").click(function(){
$("#select1 option:selected").appendTo($("#select2"));
});

然后我查找了官方文档,对click的说明是这样的,后来我还是没有百度到答案,
我考虑到代码的重用性,想直接传"select1"和"select2"字符串进去,我就使用下面的方法:


代码如下:

$("#but_one").click(select("select1","select2"));
//提高代码重用性,根据函数变更
function select(s1,s2){ $(("#"+s1+"option:selected")).appendTo($("#"+s2));
}

后来发现jQuery中,如果使用函数名加括号,就是执行,所以我绑定事件的时候就执行了,如select()就执行了,后来百度了一下也没有找到答案,就去google了一下,乖乖,还真找到了,在stackoverflow论坛上面找到了答案.然后我的代码就变成了这样:


代码如下:

$(function(){
var obj1 = {s:"select1",s2:"select2"};
var obj2 = {s:"select2",s2:"select1"};
$("#1").click(obj1,select);
$("#2").click(obj1,select2);
$("#3").click(obj2,select);
$("#4").click(obj2,select2);
function select(event){
console.debug(event.data.s);
$(("#"+event.data.s+" option:selected")).appendTo($("#"+event.data.s2));
}
function select2(event){
$("#"+event.data.s+" option").appendTo($("#"+event.data.s2));
}
});

click(data,fn)中的data其实是json对象,取的时候,只能通过当前的事件源来取,data是默认放在event中的,所以这里的data是eventdata,引用的时候也使用event.data.name,也就是说JQuery中的所有触发时间的方法,需要传递参数都可以通过eventdata对象来传递参数:
这里分享下老外的代码 :


代码如下:

$("select#test").change({msg: "ok"}, function(event) {
myHandler(event.data.msg);
});

赞 (0)

相关推荐

  • jQuery on方法传递参数示例

    教你如何给 jQuery on方法绑定的函数传递参数,代码如下: 复制代码 代码如下: $(".loadingFlower").on("click",'',{name:"123",id:"234",tel:"345"},callback)   function callback(event){    console.log(event.data.name);    //参数1 =>123    con

  • jQuery学习笔记之jQuery.fn.init()的参数分析

    jQuery学习笔记之jQuery.fn.init()的参数分析

    从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出参数selector和context是来自我们在调用jQuery方法时传过来的.那么selector和context都有哪些可能. 对于表格中的4~9行中的可能做具体分析. 如果selector是字符串,则首先检测是html代码还是#id.126行的if语句:以"<"开头,以">"结尾,且长度>=3.则假设额这个是HTML

  • jquery ajax 向后台传递数组参数示例

    需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象.基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],原因如下: 在后台接收的时候,只能用request来接收,request.getParameterValues()方法返回的是一个String[],所以,应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办?凉拌! 但是可以使用JSON字符串来实现,在后台把JSO

  • Jquery之Bind方法参数传递与接收的三种方法

    方法一. function GetCode(event) { alert(event.data.foo); } $(document).ready(function() { $("#summary").bind("click", {foo:'abc'} ,GetCode); }); 方法二. 函数句柄 $("#summary").bind("click", function() { GetCode("abc"

  • 传递参数的标准方法(jQuery.ajax)

    前台  复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页&

  • javascript/jquery获取地址栏url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 复制代码 代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么重要的事情 首先看看单纯的通过javascript是如何来获取url中的某个参数 复制代码 代码如下: function

  • jquery datepicker参数介绍和示例

    复制代码 代码如下: <!DOCTYPE html><html><head><link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><script src="http://ajax.googlea

  • 为jquery的ajaxfileupload增加附加参数的方法

    直接说方法: 复制代码 代码如下: $.ajaxFileUpload({data:{"a":123,"b":456};//附加参数,json格式}); 然后在ajaxFileUpload.js文件中修改两个函数,其实就是一个函数(给函数添加新的参数) 第一处: 复制代码 代码如下: createUploadForm: function(id, fileElementId,data){}大于在26行吧. 然后在在函数体中加入以下代码: 复制代码 代码如下: if (d

  • jQuery()方法的第二个参数详解

    关于jQuery()方法的第二个参数,有下面这几种用法: 1.jQuery(selector, [context]) 这种用法,相当于 $(context).find(selector) 或者 context.find(selector) 2.jQuery(html, [ownerDocument]) 文档对ownerDocument的解释是:"创建DOM元素所在的文档" 也就是说,如果你要编写挎document的脚本,比如iframe或者用window.open开一个新窗口,可能会用

  • Jquery中ajax方法data参数的用法小结

    复制代码 代码如下: $.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston", //第一种方式传参  // data: {name:"John",location:"Boston"}  //第二种方式传参  // data: {foo:["bar1", "bar2&q

  • 通过jquery 获取URL参数并进行转码

    jquery 获取URL参数并转码,首先构造一个含有目标参数的正则表达式对象,匹配目标参数并返回参数值 代码如下: <script type="text/javascript"> $(document).ready(function(){ var pic_url=getUrlParam("picture"); $("#childpic").attr("src",pic_url); var content=getUr

随机推荐