这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
因为要做这样一个作业, 就是两个 select 中 option 相互转换, 图如下:
有个需求让两个 select 中 option 相互转换, 这个作业就是给几个按钮添加 click() 事件接下来为大家介绍下如何在 click(),change() 传递参数
这个作业就是给几个按钮添加 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);
- });
来源: http://www.phperz.com/article/17/0419/280292.html