jQuery中bind函数用法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中bind函数用法相关的知识，希望对你有一定的参考价值。

学习jquery不久,不太习惯这样的用法,请高手来帮忙解决几个问题.
1:bind( )函数:通常使用都是bind("id","函数A"),若函数A有参数即-->
函数A(args),此时该如何绑定?请写代码描述
2:追加函数appand(),appandChild(),以及appandTo()的具体区别(主要是前两个),可不可以appand("<div></div>")或者var t="<div></div>";appand(t);这样编码?
3:添加click事件时如何将元素本身当参数传递?也就是function参数为(this)的时候.
4.帮忙找一个点击显示二级目录(页面的导航栏)的代码,
(要求用li或者div标签实现的)
为这几个问题也搜索了很多资料无果,不想再浪费时间,
希望知道的朋友能详细解释一下,必定追加分数!谢谢你的帮助!

问题1：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
$('#mybtn').bind('click', a : 'hello', b : 'world', myFun);
);

function myFun(e)
alert(e.data.a);
alert(e.data.b)

</script>
</head>
<body>
<input type="button" id="mybtn" value="Click me." />
</body>
</html>
如上面例子，可以传递多个参数。

-------------------------------------------------------

问题2：
$('<p>Test</p>').appendTo('.inner');
$('.inner').append('<p>Test</p>');
上面这个是append()和appendTo()区别，应该一目了然了吧？
而appendChild()不是jquery的方法，而是javascript原生的方法。

append和appendChild的关系是：
其实几乎一样，append就是调用appendChild实现的，只是在append前，做一个简单判断。下面贴下jquery的源代码：

append: function()
return this.domManip(arguments, true, function( elem )
if ( this.nodeType === 1 )
this.appendChild( elem );

);


--------------------------------------------------

问题3：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
$('#mybtn').bind('click', myFun);
);

function myFun()
alert($(this).attr('value'));

</script>
</head>
<body>
<input type="button" id="mybtn" value="Click me." />
</body>
</html>

第3个问题不是看的很明白？直接调用应该可以呀，看看这个例子是不是你想要的？

---------------------------------------------------

问题4：网上有很多，查看参考链接这个吧。

参考资料：http://www.zcool.com.cn/

 参考技术A 就后两个问题说说吧
$('#idName').click(function(event)
$(this).val();// 当然的元素,直接使用this即可。
//$(this)把this转化成jQuery对象
);
第四个问题,你可以去下载jQuery In Action这本书的源码,里面第五章节有例子. 参考技术B <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
$('#mybtn').bind('click', a : 'hello', b : 'world', myFun);
);

function myFun(e)
alert(e.data.a);
alert(e.data.b)

</script>
</head>
<body>
<input type="button" id="mybtn" value="Click me." />
</body>
</html>
【补充】：
1.实例：
当点击鼠标时，隐藏或显示 p 元素：
$("button").bind("click",function()
$("p").slideToggle();
);

2.定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
将事件和函数绑定到元素
规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。
3.语法
$(selector).bind(event,data,function)

jquery的bind跟on绑定事件的区别

Jquery的bind跟on绑定事件的区别：主要是事件冒泡(事件代理)；

jquery文档中bind和on函数绑定事件的用法：

.bind(events [,eventData], handler)

.on(events [,selector]  [,data], handler)

 

从文档中可以看出，.on方法比.bind方法多一个参数‘selector‘

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定click事件；

 

那么这个selector参数的好处是什么?

好处在于.on方法

原理是事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理；

这样的好处 

1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；

2.为动态添加的元素也能绑上指定事件；

如：

$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个li：$(‘ul‘).append(‘<li>js new li<li>‘)；‘)；这个新加的li是不会被绑上click事件的

但是我用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件

以上是关于jQuery中bind函数用法的主要内容，如果未能解决你的问题，请参考以下文章

jQuery中bind()方法中的参数

jquery on 的用法

jquery常见用法

jquery 中toggle的2种用法

JavaScript中的bind,call和apply函数的用法和区别

apply，call，bind，symbol的用法