JQuery绑定及效果

文章目录

JQuery绑定及效果
- 一、JQuery的四种事件绑定
- - 1.bind(type,[data],function(eventObject))
  - 2.live(type, [data], fn)
  - 3.delegate
  - 4.on
- 二、this
- - 1.获取元素的索引值
  - 2.this和$(this)
  - 3.jQuery中this与$(this)的区别
- 三、效果
- - 1.隐藏和显示
  - 2.淡入淡出
  - 3.jQuery 滑动方法
  - 4.jQuery 动画 - animate() 方法
  - 5.jQuery stop()
  - 6.chaining

一、JQuery的四种事件绑定

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。

1.bind(type,[data],function(eventObject))

bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：
type:事件类型，如click、change、mouseover等;
data:传入监听函数的参数，通过event.data取到。可选;
function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意
bind的源码：

 bind: function( types, data, fn ) {return this.on( types, null, data, fn );}$('#myol li').bind('click',getHtml);

bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。
但如果列表中动态增加一个“列表元素”，点击它是没有反应的，必须再bind一次才行。 要想不这么麻烦，我们可以使用live。
jQuery还有一种事件绑定的简写方式如a.click(function(){});、a.change(function(){});等，它们的作用与bind一样，仅仅是简写而已。

2.live(type, [data], fn)

live的参数和bind一样，它又有什么蹊跷呢，我们还是先瞄一眼源码：

live: function( types, data, fn ) {jQuery( this.context ).on( types, this.selector, data, fn );return this;}

可以看到**live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了**。这个context是什么东西呢?其实就是元素的限定范围，看了下面的代码就清楚了：

$('#myol li').context; //document$('#myol li','#myol').context; //document$('#myol li',$('#myol')[0]); //ol

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了document上了。
不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?
live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document。在
监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的节点。下面的例子来揭晓：

$('#myol li').live('click',getHtml);

3.delegate

live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，
绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate破壳而出
参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn );}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。

看看示例先：

$('#myol').delegate('li','click',getHtml);

4.on

看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：

on(type,[selector],[data],fn)

参数与delegate差不多但还是有细微的差别，首先type与selector换位置了
其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服一些吧。

我们先不传selector来看一个例子：

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己，与bind的效果一样。至于传selector进去，就是跟delegate一样的意义了，除了参数顺序不同，其他完全一样。
终于看到on的真实作用了，那么，这么多的事件绑定方式，我们该如何进行选择呢?
其实这个问题是完全不必纠结的，因为你已经知道他们之间的区别了不是么?根据实际情况斟酌使用就行。
不过官方有一个推荐就是尽量使用on，因为其他方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。
至于如何代替我想就不必这么直白的写出来了，真正理解它们的区别之后自然而然也就不是难事了

//给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){// 内部的this指的是原生对象// 使用jquery对象用 $(this)})

二、this

1.获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<ul class="list"><li>1</li><li>2</li><li>4</li><li>5</li><li>6</li>
</ul>

2.this和$(this)

当你用的是jquery时，就用$(this)，如果是JS，就用this

$(this).html( $(this).html() + " BAM! ");

这个里的html()是JQUERY方法，用$(this).html()
当然，JS里也有相似方法innerHTML，如果用innerHTML，就要这样写了，这里的reset是JS方法，所以同上得用this.reset()：

 1 this.innerHTML(); 2 this.reset();

jquery对象$ (this)[0]等同于JS里的元素this，这里的this是一样的
JS里的元素只要包上$()就是jquery对象了，而jquery的对象只要加上[0]或者.get(0)，就是js元素了。
$(this)是jquery对象，this就是简单指当前元素。
jquery对象不能直接指定元素的属性（ele.style），需要get（index）或者直接（index）取得对象中元素才行
JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（），即：

 $(this)=jquery(this);

也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了。
那么，我们再回过头来说$(this)，这个this是什么呢？假设我们有如下的代码：

$("#desktop a img").each(function(index){alert($(this));alert(this);
}

那么，这时候可以看出来：

alert($(this)); //弹出的结果是[object Object ]alert(this); //弹出来的是[object HTMLImageElement]

3.jQuery中this与$(this)的区别

   $("#textbox").hover(   function() {   this.title = "Test";   },   fucntion() {   this.title = "OK”;   }
);

这里的this其实是一个html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。

但是如果将this换成(this)就不是那回事了，报Error了。this与(this)的区别在此。

\\Error Code：
$("#textbox").hover(   function() {   $(this).title ＝ "Test";   },   function() {   $(this).title = "OK";   }
);

$()这是jQuery的一个函数，也是最核心最基本的函数
功能一：传入一个选择器字符串，获得这个选择器对应的dom内容，保存在[]中，也就是俗称的jQuery对象。例如

('#id')(‘.class’) $(‘tag’)

功能二：传入一个匿名函数 ，例如

$(function(){})//这个匿名函数在网页载入完成后开始执行

功能三：将JavaScript对象包装成为jQuery对象。例如

$(this)
$({a:1,b:2,c:3})
$(document.getElementById('idstr'))

this是javascript自身的语法关键字，它指向一个javascript对象，所以可以使用所指向的目标javascript对象所拥有的方法,但他自己不是一个普通的变量，所以你无法自己定义一个变量叫this
所以为了使用jQuery对象的方法，你必须传入jQuery函数$(this), 将javascript 对象包装成为一个jquery对象。
这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：

正确的代码：

$("#textbox").hover(   function() {   $(this).attr(’title’, ‘Test’);   },   function() {   $(this).attr(’title’, ‘OK’);   }
);

使用jQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。

典型错误与注意点

var node = $('#id');
node.click(function(){this.css('display','block');//报错  this是一个html元素，不是jquery对象，//因此this不能调用jquery                             的css()方法
　　$(this).css();//正确，$(this)是一个jquery对象，不是html元素，//可以用css()方法this.style.display = 'block';　　//正确  this是一个html元素，//不是jquery对象，因此this不能调用jquery的css()方法,//但是可以用javascript来更改style属性});

不要滥用$(this)
如果不了解javasrcipt中基本的DOM属性和方法的话，很容易滥用jQuery对象。比如：

$(‘#someAnchor’).click(function() {alert( $(this).attr(‘id’) );});

如果你只是通过jQ对象获取简单的dom元素的属性比如id，那么你完全可以使用js原生的方法：

$(‘#someAnchor’).click(function() {alert( this.id );});

诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。

三、效果

1.隐藏和显示

hide()隐藏元素

hidden(speed,callback);
//说明：相反与show方法，用于隐藏元素，参数与show相同，请参考3.1
//下面的例子是点击一个按钮，隐藏显示的div
//代码如下:var callback=function(){ //alert("我是回调函数");
}
var f1=function(){// $("#t1").hide(); 参数缺省
// $("#t1").hide("fast",callback); 显示速度为fast方式
$("#t1").hide(3000,callback);//自定义显示速度 3000毫秒
}; $("#b1").click(f1);

show() 显示元素

show(speed,callback);
//说明：这个方法可以显示隐藏的元素，其中参数也缺省，即写成show()这种形式
//speed ---指定显示的速度 有3个参数可以选择 slow ,normal,fast,
//也可以自己指定数字（单位：毫秒）
//callback---回调函数
//下面是一个简单的例子var callback=function(){ //alert("我是回调函数");
}
var f1=function(){// $("#t1").show(); 参数缺省
// $("#t1").show("fast",callback); 显示速度为fast方式
$("#t1").show(3000,callback);//自定义显示速度 3000毫秒
};
$("#b1").click(f1);

toggle() 显示隐藏的元素，隐藏显示的元素

toggle(speed,callback)
//说明：这个可以理解为show()与hide()方法的结合体，轮换执行show()与hide()
//比如：页面有一个隐藏的元素，第一次执行toggle()，显示元素，
//第二次执行，隐藏元素，第三次则又显示元素。。。
代码如下:var callback=function(){ //alert("我是回调函数");
}
var f1=function(){//$("#t1").toggle(); // 参数缺省
//$("#t1").toggle("fast",callback); //显示速度为fast方式
$("#t1").toggle(3000,callback);
};
$("#b1").click(f1);

2.淡入淡出

fadeIn()淡入已隐藏的函数

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut()方法淡出可见的元素

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeToggle()可以再fadeIn()和fadeOut()方法之间进行切换。

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

3.jQuery 滑动方法

slideDown() 向下滑动元素

slideDown(speed,[callback]);
//说明：改变对象的height以实现向下展开的动画效果，常用与显示隐藏的元素
//代码如下:var callback=function(){ //alert("我是回调函数"); }
var f1=function(){//$("#t1").slideDown(); // 参数缺省
//$("#t1").slideDown("fast",callback); //显示速度为fast方式
$("#t1").slideDown(1000,callback);
};
$("#b1").click(f1);

slideUp() 向上滑动元素

slideUp(speed,[callback]););//说明：改变对象的height以实现向上展开的动画效果，常用隐藏显示的元素
//代码如下:var callback=function(){//alert("我是回调函数");
}
var f1=function(){//$("#t1").slideUp();
// 参数缺省 //$("#t1").slideUp("fast",callback); //显示速度为fast方式
$("#t1").slideUp(1000,callback);
};
$("#b1").click(f1);
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

slideToggle() 可以再slideDown ()和slideUp之间切换。

4.jQuery 动画 - animate() 方法

自定义动画使用方法：$(selector).animate({params},speed,callback);
参数说明：

params—一组包含作为动画属性和最终值哦样式属性和其值的集合
speed----可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
callback—回调函数，是动画完成后所执行的函数名称。

注意：params的样式属性必须书写成驼峰形式，即比如margin-left应该些微
marginLeft的形式

代码如下:


var callback=function(){//alert("我是回调函数");
} ;
var par={ height:"70%" };
var f1=function(){$("#t1").animate(par,1000,callback);
};$("#b1").click(f1);

5.jQuery stop()

方法用于在动画或效果完成前对它们进行停止。

6.chaining

名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条