jquerydom对象的事件隐藏显示和对象数组示例

1.事件处理

1.1.事件绑订

bind（type,fn）;

例子:
复制代码代码如下:
$（function（）{

//正式的写法
$（"#d1"）.bind（"click",function（）{
$（this）.css（"font-size","80px"）;
}）;

//简写形式
$（"#d1"）.click（function（）{
$（this）.css（"font-size","80px"）;
}）;
}）;

1.2.绑订方式的简写形式
复制代码代码如下:
click（function（）{
}）;

1.3.合成事件

hover（enter,leave） : 模拟光标悬停事件
toggle（fn1,fn2...） : 模拟鼠标连续单击事件

例子1:
复制代码代码如下:
$（function（）{
//分开的事件
$（".s1"）.mouseenter（function（）{
$（this）.addClass（"s2"）;
}）;

$（".s1"）.mouseleave（function（）{
$（this）.removeClass（"s2"）;
}）;

//合成事件
$（".s1"）.hover（function（）{
$（this）.addClass（"s2"）;
},function（）{
$（this）.removeClass（"s2"）;
}）;
}）;

例子2:
复制代码代码如下:
$（function（）{
$（"#a1"）.toggle（function（）{
$（"#d1"）.show（"slow"）;
},function（）{
$（"#d1"）.hide（"slow"）;
}）;
}）;

1.4.事件冒泡//子节点产生的事件会依次向上抛给父节点

1.4.1.获得事件对象//只需要给事件处理函数添加一个任意变量即可，比如e
//e不是真正的事件对象，而是对底层的事件对象的一个封装

click（function（e）{

}）;

例子1:
复制代码代码如下:
$（function（）{
$（"a"）.click（function（e）{
//e:jQuery对象，里面包含了一个事件对象。
//target属性返回的是一个dom对象，即事件源。
var srcObject = e.target;
alert（srcObject.innerHTML）;
}）;
}）;

1.4.2.停止冒泡

event.stopPropagation（）;

例子2:
复制代码代码如下:
$（function（）{
$（"a"）.click（function（e）{
alert（"你点击了一个链接"）;
//停止冒泡
e.stopPropagation（）;
}）;

$（"#d1"）.click（function（e）{
alert（"你点击了一个div"）;
}）;
}）;

1.4.3.停止默认行为

event.preventDefault（）;//比如表单提交

例子3:
复制代码代码如下:
$（function（）{
$（"a"）.click（function（e）{
var flag = confirm（"是否确定删除？"）;
if（！flag）{
//停止默认行为
e.preventDefault（）;
}
}）;
}）;

1.5.事件对象的属性

event.type : 事件类型
event.target : 返回事件源（是dom对象！！！）
event.pageX/pageY : 点击的点的坐标

例子4:
复制代码代码如下:
$（function（）{
$（"a"）.click（function（e）{

alert（e.type）; //获得事件类型

alert（e.pageX + " " +e.pageY）;

}）;
}）;

1.6.模拟操作//如.$（"xxx"）.mouseenter（）;

$（"xxx"）.trigger（"被模拟的事件"）;//也可以简化

例子5:
复制代码代码如下:
$（function（）{
$（"#b1"）.click（function（）{
//让username对应的文本输入框获得焦点
$（"#username"）.trigger（"focus"）;
//另外，也可以简化
$（"#username"）.focus（）;
}）;
}）;

2.动画

2.1.show（） / hide（）//显示 / 隐藏
//作用:通过同时改变元素的宽度和高度来实现显示和隐藏

用法:
show（速度,[回调函数]）;

速度可以使用"normal","fast","slow"，也可以使用毫秒数

回调函数会在整个动画执行完毕之后执行

2.2.slideUp（） / slideDown（）

//作用：通过改变元素的高度来实现显示和隐藏
用法同上。

例子:
复制代码代码如下:
$（function（）{
$（"#a1"）.toggle（function（）{

$（"#d1"）.show（"slow"）;

$（"#d1"）.slideDown（"slow"）;

},function（）{

$（"#d1"）.hide（"slow"）;

$（"#d1"）.slideUp（"slow"）;

}）;
}）;

2.3.fadeIn（） / fadeOut（）//淡入，淡出

//作用：通过改变元素的不透明度来实现显示和隐藏
用法同上。

例子:
复制代码代码如下:
$（function（）{
$（"#b1"）.toggle（function（）{

$（"#d1"）.fadeOut（"slow"）;

},function（）{

$（"#d1"）.fadeIn（"slow"）;

}）;
}）;

2.4.自定义动画

animate（params,speed,[callback]）

params : //是一个javascript对象，描述的是动画执行结束时的样式。

speed : //速度，单位是毫秒。

callback : //回调函数，会在动画执行完毕之后执行。

例子:
复制代码代码如下:
$（function（）{
$（"#d1"）.click（function（）{
//动画队列
$（this）.animate（{"left":"400px"},3000）;
$（this）.animate（{"top":"250"},2000）.fadeOut（"slow"）;
}）;
}）;

3.类数组的操作

//类数组：指的是jQuery选择器会将查找到的所有的dom对象封装成一个jQuery对象，
//将这些dom对象称为类数组。

3.1.length属性 : //获得jQuery对象包含的dom对象的个数。

3.2.each（fun（i）） : //循环遍历每一个元素,this代表被迭代的dom对象，
//$（this）代表被迭代的jquery对象。

3.3.eq（index） : //返回index+1位置处的jquery对象

3.4.index（obj） : //返回下标，其中obj可以是dom对象或者jquery对象。

3.5.get（） : //返回dom对象组成的数组

3.6.get（index） : //返回index+1个dom对象。

例子:
复制代码代码如下:
$（function（）{
$（"#b1"）.click（function（）{
//var $obj = $（"ul li"）;
alert（$obj.length）;

$obj.each（function（i）{
//i:表示正在被访问的那个dom对象的下标,
//下标从0开始。
//this:表示正在被访问的那个dom对象
if（i==0）{
$（this）.css（"font-size","60px"）;
}else if（i==1）{
$（this）.css（"font-style","italic"）;
}else{
$（this）.css（"color","red"）;
}
}）;

//var $obj = $（"ul li"）;
var $o = $obj.eq（1）;
//$o.css（"font-size","60px"）;
var index = $obj.index（$o）;
//alert（index）;

//var $obj = $（"ul li"）;
var arr = $obj.get（）;
//alert（arr[1].innerHTML）;

var $obj = $（"ul li"）;
var obj = $obj.get（1）;
alert（obj.innerHTML）;
}）;
}）;