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

2020-05-24 21:30:09易采站长站整理

例子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对象