• javascript和jquery使用技巧集


    实用小技巧集合

    Tip16:JS的定时器


      JS 中有两种定时器,setTimeout('fn', t) 和 setInterval('fn', t),'fn'指的是定时执行的方法名,字符串类型。     setTimeout('fn', t): 只执行一次,执行完成后将销毁。   setInterval('fn', t):一直执行。
     

    -----------------------------------------------------------------


    Tip15:Jquery触发回车事件

            $(function () {
                $('#target').bind('keyup', function (event) {
                    if (event.keyCode == 13) {
                        alert("Hello~");
                    }
                });
            }); 



    -----------------------------------------------------------------


     Tip14:获得select 的值


      jquery可以像获取textbox值一样获取select的值:$('select').val();



    -----------------------------------------------------------------


    Tip13:复制文本


      使用  window.clipboardData.setData('text', text); 可以将text文本放到系统剪贴板中,实现文本的复制功能。但是,这个方法只被IE所支持。Google Chrome 和Foxfire都不支持。所以,在使用时应先判断浏览器是否支持:if (window.clipboardData) {  window.clipboardData.setData('text', text); }



    -----------------------------------------------------------------


    Tip12:选择文本


      对于input或者textarea的文本选择,jquery提供了一个简单的函数完成:select(),在调用它的时候,需要确保文本框可见,并 且已经获得焦点。     $("#txtSample").focus().select();  //现货的焦点,然后选择文本



    -----------------------------------------------------------------


    Tip11:鼠标事件


      mouseover 和 mouseout、 mouseenter 和  mouseleave;这两组事件都是鼠标移入和移出元素时触发的,他们的最大区别是: mouseover 和 mouseout是冒泡的,如果鼠标移动到它们的子元素,同样会触发该事件,而 mouseenter 和  mouseleave是不会冒泡的。这个区别很重要!



    -----------------------------------------------------------------


    Tip10:页面跳转


    使用js直接对window.location.href 赋一个URL字符串值即可实现跳转。


    window.location.href = 'a.html';



    -----------------------------------------------------------------


    Tip9:jQuery对象的扩展


    $.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。例如:
    $.extend(settings, options);
    合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在 setting中。
    var settings = $.extend({}, defaults, options);
    合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。可以有多个参数(合并多项并返回)

    -----------------------------------------------------------------

    Tip8:jQuery删除数组中的项

    如Tip7中所说,使用$.grep()方法删除数组中的元素。

    var array = ['a', 'b', 'c']; 
    $.grap(array, function(value, index){return value=='b';}, true);
    上面的代码将删除数组array中的元素'b'。

    -----------------------------------------------------------------

    Tip7:jQuery数组的处理

    $.each(obj, fn);


      对obj进行遍历,obj为要遍历的数组或对象;fn为处理函数,可选的参数为索引和内容,例如var fn = function(index, content){};如果需要结束遍历,请返回false,其它的返回值将会被忽略。

      该方法可以用来处理JSON数据对象。
    $.inArray(obj, array);


      判断数组array中是否包含obj对象,如果存在,返回对应的下标,如果不存在,返回-1;

    $.map(array, fn);

      将一个数组中的元素转换到另一个数组中。array为需要转换的数组,fn为处理函数;这个方法的返回值是一个经过处理后的新数组。

    $.merge(array1, array2);

      合并两个数组;将数组array2中的内容复制到array1中,并将结果返回。merge方法不会去除重复,需要使用 $.unique()去除重复。

    $.unique(array);

      去除数组array中的重复项。

    $.grep(array, fn, [invert]);

      过滤数组中的元素;该方法对数组array中的每一个对象都调用fn方法;

      invert 可选参数;如果 "invert" 为 false 或未设置,则函数返回数组中由过滤函数返回 true 的元素,当"invert" 为 true,则返回过滤函数中返回 false 的元素集。

      该方法常用来删除数组中的元素


    -----------------------------------------------------------------

    Tip6:去除string开头和结尾的空格

    js中没有提供trim函数供我们去掉字符串两段的空字符,jQuery中扩展了这一功能:

    $.trim(str):删除字符串两端的空白字符。
    如:$.trim(" hello, how are you? "); //返回"hello,how are you? "

    -----------------------------------------------------------------

    Tip5:添加事件和移除事件

    为一个jQuery对象添加事件是很方便的事情:

    $('#btn').click(fn);


    $('#btn').bind('click', fn);

    jQuery提供了为一个对象的事件提供多个处理函数的机制,我们添加了一个click事件处理方法后,还可以继续添加,而不会覆盖先前的处理方法。

    当调用unbind方法时移除绑定的事件订阅:

    $('#btn').unbind();    //将会移除所有的事件订阅

    $('#btn').unbind('click')  //将会移除click事件的订阅


    -----------------------------------------------------------------

    Tip4:扩展需要的功能

    jQuery提供了extend方法让我们来扩展自己需要的功能。例如:

    $.extend({
      sum: function(num1, num2){return num1+num2; },
    }); //为jquery扩展了sum方法


    使用扩展的方法(通过“$.方法名”调用):
    alert($.sum(10, 20));


    ----------------------------------------------------------------

    Tip3:获取jQuery对象集合中的一项

      对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三 个<div>元素的内容。有如下两种方法:
      $("div").eq(2).html();      //调用jquery对象的方法
      $("div").get(2).innerHTML;   //调用dom的方法属性


    -----------------------------------------------------------------

    Tip2:jQuery对象和Dom的转换

    Dom对象可以通过$(dom)转换为jQuery对象;例如:

      $(document.getElementById('#myDiv'))

    jQuery对象本身是一个索引,可以通过下标得到Dom对象;也可以使用方法get()获取Dom对象;例如:

      $("div")[0];    //获取第一个Dom对象

      $("div").get(0);  //同样获取第一个Dom对象


    -----------------------------------------------------------------

    Tip1:在独立的js文件中智能感知

    在js文件的开头添加:/// <reference path="jquery-1.3.2-vsdoc2.js" />

  • 相关阅读:
    乐在其中设计模式(C#) 享元模式(Flyweight Pattern)
    乐在其中设计模式(C#) 抽象工厂模式(Abstract Factory Pattern)
    新瓶旧酒ASP.NET AJAX(7) 客户端脚本编程(Sys命名空间下的类)
    [翻译]在GridView中针对鼠标单击的某一独立单元格进行编辑
    乐在其中设计模式(C#) 中介者模式(Mediator Pattern)
    [翻译]使用C#创建SQL Server的存储过程(Visual Studio 2005 + SQL Server 2005)
    [翻译]ASP.NET 2.0中的健康监测系统(Health Monitoring)(1) 基本应用
    厚积薄发,丰富的公用类库积累,助你高效进行系统开发(11)各种线程相关操作类
    Oracle如何实现创建数据库、备份数据库及数据导出导入的一条龙操作
    Winform分页控件支持表头全选操作实现
  • 原文地址:https://www.cnblogs.com/ifonly/p/2800062.html
Copyright © 2020-2023  润新知