最细的jQuery的bind()方法使用详解
jQuery的bind()方法使用详解
bind()定义和用法:bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。
bind()方法用法详解:
1.此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用。
语法格式:
$(selector).bind(type,[data],function(eventObject))
2.此方法可以为所有匹配元素的特定事件绑定事件处理函数,例如:
div{
width:150px;
height:40px;
background-color:blue;
}
$(document).ready(function(){
$("#bt").bind("click",function(){$("div").text("脚本之家")})
})
3.以上代码中,当点击按钮的时候,会将div元素中的文本设置“脚本之家”。
从bind()方法的语法结构中可以看到,还有一个可选的data参数可供使用,此参数可以作为event.data属性值,传递给事件对象的额外数据对象。
实例如下:
div{
width:150px;
height:40px;
background-color:blue;
}
$(document).ready(function(){
var newtext="脚本之家";
$("#bt").bind("click",{"mytext":newtext},function(e){
$("div").text(e.data.mytext);
})
})
4.以上代码利用data参数为事件处函数的事件对象提供额外的数据进行处理,同样达到了第一个实例的效果。
绑定多个事件:
可以使用链式编程的方式为匹配元素绑定多个事件。代码如下:
div{
width:150px;
height:40px;
background-color:blue;
}
$(document).ready(function(){
var newtext="脚本之家";
$("#bt").bind("click",{"mytext":newtext},function(e){ $("div").text(e.data.mytext);
}).bind("mouseout",function(){
alert("欢迎下次光临");
})
})
为按钮绑定了两个事件处理函数,当点击按钮的时候能够重新设置div中的文本,当鼠标离开按钮的时候,会弹出文本框。
使浏览器默认事件失效
例如点击链接跳转到一个指定的地址和点击提交按钮提交表单都是浏览器默认的事件。但是在实际操作过程中,这些默认事件并非我们想要的操作,例如早表单验证没有通过的时候,就不想提交表单。这个时候就需要阻止浏览器默认事件的发生。
代码实例如下:
$(document).ready(function(){
$(":submit").bind("click",function(){
if($("#username").val()=="")
{
alert("用户名不能为空!");
$("#username").focus();
return false;
}
if($("#pw").val()=="")
{
alert("密码不能为空!");
$("#pw").focus();
return false;
}
})
})
本文到此结束.
50个实用的JQUERY案例
jquery案例 jquery案例1.如何创建嵌套的过滤器: 1.//允许你减少集合中的匹配元素的过滤器, 2.//只剩下那些与给定的选择器匹配的部分。在这种情况下, 3.//查询删除了任何没(:not)有(:has) 4.//包含class为“selected”(.selected)的子节点。 5..filter(":not(:has(.selected))") jquery案例2.如何重用元素搜索 1.var allItems=$("div.item"); 2.var keepList=$("div#container1div.item"); 3.//现在你可以继续使用这些jQuery对象来工作了。例如, 4.//基于复选框裁剪“keep list”,复选框的名称 5.//符合 6.
jQuery常用方法中文解析
jQuery常用方法中文解析 jQuery设计思想 【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作:取值和赋值 五、元素的操作:移动 六、元素的操作:复制、删除和创建 七、工具方法 八、事件操作 九、特殊效果 一、选择网页元素 jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他函数库的根本特点。使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。选择表达式可以是CSS选择器: $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 也可以是jQuery特有的表达式: $('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素,除了前三个 $('div:animated') // 选择当前处于动画状态的div元素
二、改变结果集 如果选中多个元素,jQuery提供过滤器,可以缩小结果集: $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法: $('div').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 三、链式操作 选中网页元素以后,就可以对它进行某种操作。jQuery允许将所有操作连接在一起,以链条的形式写出来,比如: $('div').find('h3').eq(2).html('Hello'); 分解开来,就是下面这样: $('div') //找到div元素 .find('h3') //选择其中的h3元素 .eq(2) //选择第3个h3元素 .html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。jQuery还提供了.end()方法,使得结果集可以后退一步: $('div').find('h3').eq(2).html('Hello').end() //退回到选中所有的h3元素的那一步.eq(0) //选中第一个h3元素.html('World'); //将它的内容改为World
jQuery入门教程(很不错)
jQuery入门[1]-构造函数 https://www.360docs.net/doc/374811286.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小(v1.2.3 15kb) ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器(IE6,FF,Safari,Opera) ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/374811286.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">