模拟操作:
1.添加事件
$('input').click(function(event) {2.模拟用户点击 .trigger() 方法触发被选元素的指定事件类型
alert('点击了');
});
$('input').trigger('click');3.合并 简写
$('input').click(function(event) {
alert('点击了');
}).trigger('click');
$('input').click(function(event) {4.传参数 可以是数字、字符串、数组、对象
alert('点击了');
}).click(); 空的 click()执行的是 trigger()
当两个值以上(包含两个),需要在前后用中括号包含 起来。但不能认为是数组形式
$('input').click(function(event,data1,data2) {5.自定义事件 就是一个被.bind()绑定的任意函数
alert("data1 = " + data1 + ','+ 'data2='+ data2);
}).trigger('click',[123,'abc']);
$('input').bind('myEvent',function(event) {6.triggerHandler()
alert('点击了');
}).trigger('myEvent');
$('input').myEvent();
$('input').click(function(event) {1>.triggerHandler()方法不会引起事件的默认行为
alert('点击了');
}).triggerHandler('click');
7.区别
2>.trigger(); 返回值是对象
.triggerHandler(); 返回什么就是什么 不会返回对象
3>.triggerHandler() 创建的事件不会在 DOM 树中冒泡 .trigger()会冒泡
var index = 1;4>.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
$('div').bind('myEvent',function(){
alert('自定义事件' + index);
index++;
});
$('.div3').triggerHandler("myEvent");
$('input').click(function () {
alert('点击');
}).triggerHandler('click')
命名空间:
设置命名空间:
$('input').bind('click.abc',function (){
alert('111');
});
$('input').bind('click.xyz',function (){
alert('222');
});
$('input').bind('mousemove.abc',function (){
alert('222');
});
移除click 命名空间为abc
$('input').unbind('click.abc');
移除相同命名空间的不同事件
$('input').unbind('.abc');
事件委托:
通过bind()绑定事件,给每个button都绑定了一个click事件
$('.button').bind('click',function (){
alert("1");
});
live() die() 基本不用
delegate() $(selector).delegate(childselector,event,data,function)
该方法为指定元素(属于被选元素的子元素)添加一个或者多个事件处理程序.该方法的事件处理程序适用于当前或未来元素
$('#box').delegate('.button','click',fun1); //添加
$('#box').undelegate('.button','click'); // 取消
on代替bind unbind == off
$('input').bind('click',fun1);
$('input').unbind('click',fun1);
$('input').on('click',fun1);
$('input').off('click',fun1);
delegate 与 on 的区别
$('#box').delegate('.button','click',fun1);
$('#box').undelegate('.button','click',fun1);
$('#box').on('click','.button',fun1);
$('#box').off('click','.button',fun1);
one 执行一次之后移除事件
$('input').one('click',fun1);
显示与隐藏函数:
1.隐藏
元素.hide(速度,回调函数)
$('div').hide(3000); //默认速度 400 单位是毫秒
slow -> 对应 600 毫秒
normal -> 对应 400 毫秒
fast -> 对应 200 毫秒
2.显示
元素.show(速度,回调函数)
$('div').show(3000); //默认速度 400 单位是毫秒
3.回调函数
元素.show(速度,回调函数) 动画完成后调用
$('div').show(3000,function (){
alert("wanle");
});
4.可以实现列队动画效果
$('.test').eq(0).show(1000,function (){
$('.test').eq(1).show(1000,function (){
$('.test').eq(2).show(1000);
})
});
递归:
// 第一个
$('.test').first().show(1000,function testShow(){
// 到
$(this).next('.test').show(1000,testShow);
})
5.开关效果
$('.test').toggle(1000);
递归 开关效果
$('.test').first().toggle(500,function testShow(){
$(this).next().toggle(500,testShow);
})
body的内容实例如下图,添加相应的事件并结合函数实现效果
淡入与滑入
a.淡入淡出
1.淡入 .fadeIn(时间) 用于淡入已隐藏的元素
2.淡出 .fadeOut()
3.开关 .fadeToggle()
4.透明到某个程度(0-1) .fadeTo(时间 , 透明度);
b.滑动
1>向上滑动 .slideUp(speed callback)
2>向下滑动 .slideDown();
3>开关效果 .slideToggle(5000);
4>停止动画 .stop() //一调用就停
.stop(stopAll,gotoEnd); //到最后才停止
自定义动画: $(this).dequeue(); / next(); 都是提醒队列去执行下一个函数
元素.animate({执行内容},speed,callback) 后两个参数可以不写
$('#box').animate({width:'400px'});
连缀动画
$('#box').animate({width:'400px'}).animate({height:'400px'});
css不是动画方法,会默认排列到和第一个动画同步
$('#box').slideUp(2000).slideDown(2000).css('background','red');
不建议使用
$('#box').slideUp(2000).slideDown(2000).queue(function (){
$(this).css('background','red')
});
$('#box').slideUp(2000).slideDown(2000).queue(function (next){
$(this).css('background','red');
// $(this).dequeue(); // 提醒去执行下一个函数 .hide(2000)
next(); //函数的第一个参数,保存的方法告诉队列,去执行下一个函数 .hide(2000)
}).hide(2000);
工具函数:
1.去掉str字符串两边的空格
$.trim(str) 去掉str字符串两边的空格
2.数组和对象
1> $.each()只遍历,不改变数据 $.each(arr,function(下标,元素){执行操作})
2> $.map()修改数据 arr.map(function(元素,下标){执行操作}
3> $.grep()数据筛选 $.grep(arr,function (元素,下标){执行操作}
4> $.inArray()查找到指定元素的下标 $.inArray(元素,arr);
5> $.merge()合并数组 $.merge(arr1,arr2); 会影响原来数组
3.$.unique()删除重复的DOM元素
var divs = $('div').get(); //get() 方法获得由选择器指定的 DOM 元素。
divs = divs.concat($('.box').get()); //.concat() 方法的作用是连接
$.unique(divs);
4.合并多个DOM元素组成数组
$('li').toArray();
5.判断是否是数组对象
$.isArray(arr1);
6.判断是否是函数
$.isFunction(fun1);
7.判断是否为空对象
$.isEmptyObject(obj)
8.判断是否是纯粹对象(所谓纯粹对象就是通过new Object()或{}创建出来的对象)
注意:当new Object('name')传了参数就不是纯粹对象了
$.isPlainObject(obj1);
9.判断一个DOM节点中是否含有另一个DOM节点
$.contains($('#box1').get(0), $('#span1').get(0))
10.检查数据类型
$.type(数据);
11.判断是否是数值
$.isNumeric(数据);
12.检测数据对象是否是window对象
$.isWindow(数据对象);
13.将对象的键值对转换为URL字符串键值对
var obj2 = {'name':'jack','age':15};
console.log($.param(obj2)); //name=Jack&age=15
插件:
1.必须先引入 jquery.js 文件,而且在所有插件之前引入;
2.引入插件;
3.引入插件的周边,比如皮肤、中文包等。