jquery 笔记集合2

来源：互联网发布：飞天侠淘宝客9.0源码编辑：程序博客网时间：2024/06/07 06:30

模拟操作:

1.添加事件

           $('input').click(function(event) {
               alert('点击了');
           });

2.模拟用户点击 .trigger() 方法触发被选元素的指定事件类型

$('input').trigger('click');

3.合并简写

           $('input').click(function(event) {
               alert('点击了');
           }).trigger('click');

           $('input').click(function(event) {
               alert('点击了');
           }).click(); 空的 click()执行的是 trigger()

4.传参数可以是数字、字符串、数组、对象
当两个值以上（包含两个）,需要在前后用中括号包含起来。但不能认为是数组形式

           $('input').click(function(event,data1,data2) {
               alert("data1 = " + data1 + ','+ 'data2='+ data2);
           }).trigger('click',[123,'abc']);

5.自定义事件就是一个被.bind()绑定的任意函数

           $('input').bind('myEvent',function(event) {
               alert('点击了');
           }).trigger('myEvent');
           $('input').myEvent();

6.triggerHandler()

           $('input').click(function(event) {
               alert('点击了');
           }).triggerHandler('click');
7.区别

           1>.triggerHandler()方法不会引起事件的默认行为
            2>.trigger();    返回值是对象
                .triggerHandler(); 返回什么就是什么不会返回对象

3>.triggerHandler() 创建的事件不会在 DOM 树中冒泡 .trigger()会冒泡

           var index = 1;
           $('div').bind('myEvent',function(){
               alert('自定义事件' + index);
               index++;
            });
           $('.div3').triggerHandler("myEvent");

4>.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。

           $('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.引入插件的周边,比如皮肤、中文包等。

0 0