js+jquery常用知识点汇总

一、jquery源码中常见的知识点

　　1.string，number类型转换的快捷方法

复制代码 代码如下:
// @param s为字符串，n为数字
function fn(obj){
    //转换为String类型
    var s = obj +"";
    //转换为number类型
    var n = +obj;
}

　　分享一个面试例子：

//加会将其后面自动转换成字符串
"64"+4="644"
//减会将其自动转换成数字
"64"-4=60

　　2.bool类型转换

　　!!obj，将其强制转换为bool类型

复制代码 代码如下:
alert(!!0)  //结果为false
alert(!!"33dd")  //结果为true

　　!obj，取相反的bool类型

复制代码 代码如下:
alert(!0)  //结果为true
alert(!"222333")  //结果为false

　　3.=== 与 ==区别

　　=== 是严格相等，不会进行类型转换，而 == 是不严格相等，会进行类型转换。有些js的书中，建议开发人员永远不要用 == 或者 != 。

　　但是jquery源码中，有用到“==”或者“!=”的情况 —— 判断 undefined 和 null 的时候。

复制代码 代码如下:
//这里的判断，将obj是null，obj是undefined都排除在外了
if(obj != null){
}

　　4.检测obj是否为window对象

复制代码 代码如下:
//null == window.null为true
function isWindow(obj){
    return obj != null && obj == window.obj;
}

　　5.|| 与 && 用法技巧

复制代码 代码如下:
//例 var aa=5; name = aa || {} ; alert(name) 则name为55
this.name = name || {} //如果name值存在，则值为name，反之为{}
//例 var aa=5; name = aa && {} ; alert(name) 则name为{}，因为aa为5，不为0则为真
this.name = bool && [] //如果bool为true，则值为[],反之则为bool

　　经典实例:

复制代码 代码如下:
( window.foo || ( window.foo = "bar" ) );
                alert(window.foo);  //弹出  bar
//  为什么最后的结果是bar呢，其实可以看成是   undefined || bar  出来的结果肯定是bar

　　6.setTimeout(fn,0)与setTimeout(fn)区别

　　setTimeout(fn,0)与setTimeout(fn)都是延迟执行，但是setTimeout(fn)比setTimeout(fn,0)延迟时间还要长，例

复制代码 代码如下:
        function fn(){
            var data = new Date();
            for(var i=0;i<=1000;i++){
                if(i==1000){
                    console.log("fn="+data.getTime());
                }
            }
        }
        function fn1(){
            var data = new Date();
            for(var i=0;i<=1000;i++){
                if(i==1000){
                    console.log("fn1="+data.getTime());
                }
            }
        }
        setTimeout(fn,0),
        setTimeout(fn1);

　　结果：

　　7.判断是否为数值

复制代码 代码如下:
function isNumeric(obj){
return !isNaN(parseFloat(obj)) && isFinite(obj);
}

　　8.判断是否为空对象

复制代码 代码如下:
function isEmptyObject(){
    var name;
    //遍历不是空对象返回
    for (name in obj) {
        return false;
    }
    return true;
}

　　9.检测对象类型

　　检测obj对象类型，返回类型,通过Object.prototype.toString()来判断类型，但是ie低版本兼容性有问题，因此采用{}.toString来监测，返回为[object Array],[object Object],[object Function]

复制代码 代码如下:
// 类型判断
function isType(type){
    return function(o){
        return Object.prototype.toString.call(o) === '[object ' + type + ']';
    }
}
var isString = isType(“String”);
var isObject = isType("Object");
var isArray = isType("Array");
isString("I'm Barret Lee.");
isArray([1,2,3])；
isObject({});

　　10.jquery里的去除空格trim妙用

复制代码 代码如下:
//相当于if (String.prototype.trim && “\uFEFF\xA0″.trim() !== “”)高级的浏览器已经支持原生的String的trim方法，但是pFan还为了避免它没法解析全角空白，所以加多了一个判断：”\uFEFF\xA0″.trim() !== “”   
vart core_version = "1.0",core_trim = core_version.trim;           
function trim(){
    core_trim && !core_trim.call("\uFEFF\xA0") "" :
                            core_trim.call(text); //这里按我的理解应该为" ".trim.call(text),有点不明白转换为"1.1.0".trim.call(text)
                    } :
        
                    // 高级的浏览器已经支持原生的String的trim方法，如果浏览器不支持则采用
                    function (text) {
                        var  whitespace = "[\\x20\\t\\r\\n\\f]",
                         rtrim = new RegExp("^" + whitespace + "+|((" + whitespace + "+$", "g");
                        return text == null "" :
                            (text + "").replace(rtrim, "");
                    },
                //nodeName函数是获取dom节点的节点名字或者判断其名字跟传入参数是否匹配   
                nodeName: function(elem,name){
                     //IE下，DOM节点的nodeName是大写的，例如DIV
                     return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
                }
}

　　11.jquery中检测数组或者类数组中是否含存在传入的值

复制代码 代码如下:
/**
    检查数组中是否存在传入的值，如果存在就返回值所在的位置，如果不存在就返回-1。
    *elem 规定需检索的值。
    *arr 数组
    *i 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 arr.length - 1。如省略该参数，则将从数组首元素开始检索。
    */
function inArray(elem, arr, i){
    var len;
    if (arr) {
        //如果浏览器支持Array拥有indexOf方法
        if ([].indexOf) {
            return [].indexOf.call(arr, elem, i);
        }
        len = arr.length;
         //当i为负数的时候，从数组后边len+i的位置开始索引
         //理解这个分成两个部分i = i "codetitle">复制代码 代码如下:
    function Person(){
            this.age=25;
            this.job="web";
    }
    Person.prototype={
        name:'pingfan',
        sayName:function(){
                        alert(this.name);
                }
    }
    var person1=new Person();
    //来自构造函数，检测属性，也返回true
    alert(person1.hasOwnProperty("age"));
    //来自原型属性，返回false
    alert(person1.hasOwnProperty("name"));
    person1.name='ping';
    //来自实例属性，返回true
    alert(person1.hasOwnProperty("name"));

　　2.通过instanceOf保证只实例一次

复制代码 代码如下:
 function shiCha(opt){
    //只实例一次
    if( !(this instanceof shiCha)){
        return new shiCha(opt);
    }               
}
var shicha = shiCha();

　　3.javascript中Array.prototype.slice.call(arguments)　　

　　我们通常看到Array.prototype.slice.call(arguments,1)或者Array.prototype.slice.call(arguments)，都有点摸不着头脑，其实我们就是借助Array.prototype中slice()将arguments变成一个数组，并且使用该数组工作更方便，第二个参数是从索引值，开始将其变成数组，例Array.prototype.call("22223",2)和Array.prototype.call([1,2,3,4],2)，从字符串第二个开始。

复制代码 代码如下:
function sliArray(array){
                        //输出为从索引1到索引3
            return Array.prototype.slice.call(array,1,3);
}
alert(sliArray([1,2,3,4,5,6]))    //结果为2,3

　　4. 利用空对象F，实现对象继承，效率最高

复制代码 代码如下:
//利用空对象做媒介，进行继承效果最佳
function inhert(C,P){
        var F=function(){};
        F.protototype = P.prototype;
        C.prototype = new F();
        C.prototype.constructor = C;
}

三、javascript中常用方法集
　　1. 常见的数组操作方法

　　数组去重：

复制代码 代码如下:
//数组去重原型
Array.prototype.unqie = function(){
  var arr = this, len=this.length, obj={}, newArr=[];           
          while(len--){
                   if(obj[ arr[len] ] !== arr[len]){
                        obj[arr[len]] = arr[len];   newArr.push( arr[len]);
                  } 
          }
return newArr.reverse();
}

　　取数组中最大值：

复制代码 代码如下:
Array.prototype.arrMax=function(){
                var arr=this, len=this.length,max=arr[0];
                for(var i=1;i<len;i++){
                        if(max<arr[i]){
                                max=arr[i];
                        }
                }
        return max;
}
//数组中通过sort取最大值
　　Array.prototype.arrMax=function(){
　　　　var arr=this;
　　　　arr.sort(function(a,b){
　　　　　　return a-b;
　　　　})
　　　　return arr[arr.length-1];
　　}
//利用Math.max取数组最大值
Array.prototype.arrMax =function(){
    var array = this;
    return Math.max.apply(null, array);
}
alert([1,2,3,4,5,6,9,8,7,9].arrMax());

　　取数组中最小值：

复制代码 代码如下:
//数组中最的小值
Array.prototype.arrMin=function(){
                var arr=this, len=this.length,min=arr[0];
                for(var i=1;i<len;i++){
                        if(min>arr[i]){
                                min=arr[i];
                        }
                }
        return min;
}
//数组中通过sort取最的小值
Array.prototype.arrSortMin=function(){
　　　　var arr=this;
　　　　arr.sort(function(a,b){
　　　　　　return a-b;
　　　　})
　　　　return arr[0];
}
//利用Math.max取数组最大值
Array.prototype.arrSortMin =function(){
    var array = this;
    return Math.min.apply(null, array);
}
alert([1,2,3,4,5,6,9,8,7,9].arrSortMin());

　　复制数组：

复制代码 代码如下:
Array.prototype.copy =
  function() {
    return [].concat(this);
};

　　去除数组中只指定元素，只能去除一个，如果想多个，之前先用unique处理：

复制代码 代码如下:
Array.prototype.remove = function(value){
    for(var i=0,len=this.length;i<len;i++)
    {
        if(this[i]==value){
            this.splice(i, 1);
            break;
        }
    }
   
    return this;
}

　　2.操作document.loaction的方法集（这里借用了园友总结的相关方法）

复制代码 代码如下:
pFan.url = { //#URL
    //参数：变量名，url为空则表从当前页面的url中取
    getQuery: function (name, url) {
        var u = arguments[1] || window.location.search
            , reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
            , r = u.substr(u.indexOf("") + 1).match(reg)
        ;
        return r != null "";
    }
    , getHash: function (name, url) { //# 获取 hash值
        var u = arguments[1] || location.hash;
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = u.substr(u.indexOf("#") + 1).match(reg);
        if (r != null) {
            return r[2];
        }
        return "";
    }
    , parse: function (url) { //# 解析URL
        var a = document.createElement('a');
        url = url || document.location.href;
        a.href = url;
        return {
            source: url
            , protocol: a.protocol.replace(':', '')
            , host: a.hostname
            , port: a.port
            , query: a.search
            , file: (a.pathname.match(/([^\/"codetitle">复制代码 代码如下:
pFan.regExp = {  //# 字符串匹配
    //是否为 数字！整数，浮点数
    isNum: function (num) { //# 是否为数组
        return !isNaN(num);
    }
    , isEmail: function (mail) {//# 是否为 邮箱
        return /^([a-z0-9]+[_\-\.]"codetitle">复制代码 代码如下:
PFan.conClass = {
    hasClass:function(){
        return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    },
    addClass:function(){
        if (!hasClass(ele,cls)) ele.className += " "+cls;
    },
    removeClass:function(){
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
            ele.className=ele.className.replace(reg,' ');
        }        
    }
}

　　5.操作字符串方法

复制代码 代码如下:
pFan.string = { //# 字符串
    codeHtml: function (content) { //# 转义 HTML 字符
        return this.replace(content, {
            '&': "&amp;"
            , '"': "&quot;"
            , "'": '&#39;'
            , '<': "&lt;"
            , '>': "&gt;"
            , ' ': "&nbsp;"
            , '\t': "&#09;"
            , '(': "&#40;"
            , ')': "&#41;"
            , '*': "&#42;"
            , '+': "&#43;"
            , ',': "&#44;"
            , '-': "&#45;"
            , '.': "&#46;"
            , '/': "&#47;"
            , '"&#63;"
            , '\\': "&#92;"
            , '\n': "<br>"
        });
    }
    //重复字符串
    , repeat: function (word, length, end) { //# 重复字符串
        end = end || ''; //加在末位
        length = ~~length;
        return new Array(length * 1 + 1).join(word) + '' + end;
    }
    //增加前缀
    , addPre: function (pre, word, size) { //# 补齐。如给数字前 加 0
        pre = pre || '0';
        size = parseInt(size) || 0;
        word = String(word || '');
        var length = Math.max(0, size - word.length);
        return this.repeat(pre, length, word);
    }
    //去除两边空格
    , trim: function (text) { //# 去除两边空格
        return (text || '').replace(/^\s+|\s$/, '');
    }
     //去除左边空格
    ,ltrim:function(){
        return s.replace( /^(\s*|　*)/, "");
    }
    //去除右边空格
    ,rtrim:function(){
        return s.replace( /(\s*|　*)$/, "");
    }
    //返回脚本内容
    ,evalscript:function(s) {
        if(s.indexOf('<script') == -1) return s;
        var p = /<script[^\>]*"([^\>]*"[^\>]*"1\")"([\w\-]+")"0" : "";
        }
        switch (type) {
            case "html": //过滤html字符串中的XSS
                return str.replace(/[&'"<>\/\\\-\x00-\x09\x0b-\x0c\x1f\x80-\xff]/g, function (r) {
                    return "&#" + r.charCodeAt(0) + ";"
                }).replace(/ /g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />").replace(/\r/g, "<br />");
                break;
            case "htmlEp": //过滤DOM节点属性中的XSS
                return str.replace(/[&'"<>\/\\\-\x00-\x1f\x80-\xff]/g, function (r) {
                    return "&#" + r.charCodeAt(0) + ";"
                });
                break;
            case "url": //过滤url
                return escape(str).replace(/\+/g, "%2B");
                break;
            case "miniUrl":
                return str.replace(/%/g, "%25");
                break;
            case "script":
                return str.replace(/[\\"']/g, function (r) {
                    return "\\" + r;
                }).replace(/%/g, "\\x25").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\x01/g, "\\x01");
                break;
            case "reg":
                return str.replace(/[\\\^\$\*\+\"\\" + a;
                });
                break;
            default:
                return escape(str).replace(/[&'"<>\/\\\-\x00-\x09\x0b-\x0c\x1f\x80-\xff]/g, function (r) {
                    return "&#" + r.charCodeAt(0) + ";"
                }).replace(/ /g, "&nbsp;").replace(/\r\n/g, "<br />").replace(/\n/g, "<br />").replace(/\r/g, "<br />");
                break;
        }
    }
    // badword , 过滤敏感词
    //@text : 要过滤的文本 , 类型 ：字符串
    //@words : 敏感词 ，类型，数组, 如 ： ['你妹', '我丢' ,'我靠']
    // 如果 用 正则匹配， text 长度 100万，words 100万，需要 4秒！
    , badWord: function (text, words) { //# 敏感词过滤
        text = String(text || '');
        words = words || [];
        var reg = new RegExp(words.join('|'), 'g')
            , _self = this;
        return text.replace(reg, function ($0) {
            var length = String($0 || '').length;
            return _self.repeat('*', length);
        });
    }
};

　　6.加密方法集

复制代码 代码如下:
pFan.encrypt = { //# 加密
    md5: function (words) {  //# md5 哈希算法
        /*
         * Crypto-JS 3.1.2
         * http://code.google.com/p/crypto-js
         */
        var CryptoJS = function (s, p) {
            var m = {}, l = m.lib = {}, n = function () { }, r = l.Base = { extend: function (b) { n.prototype = this; var h = new n; b && h.mixIn(b); h.hasOwnProperty("init") || (h.init = function () { h.$super.init.apply(this, arguments) }); h.init.prototype = h; h.$super = this; return h }, create: function () { var b = this.extend(); b.init.apply(b, arguments); return b }, init: function () { }, mixIn: function (b) { for (var h in b) b.hasOwnProperty(h) && (this[h] = b[h]); b.hasOwnProperty("toString") && (this.toString = b.toString) }, clone: function () { return this.init.prototype.extend(this) } }, q = l.WordArray = r.extend({ init: function (b, h) { b = this.words = b || []; this.sigBytes = h != p "") }, parse: function (b) { for (var a = b.length, g = [], j = 0; j < a; j += 2) g[j > 3] |= parseInt(b.substr(j, 2), 16) << 24 - 4 * (j % 8); return new q.init(g, a / 2) } }, a = v.Latin1 = { stringify: function (b) { var a = b.words; b = b.sigBytes; for (var g = [], j = 0; j < b; j++) g.push(String.fromCharCode(a[j > 2] > 24 - 8 * (j % 4) & 255)); return g.join("") }, parse: function (b) { for (var a = b.length, g = [], j = 0; j < a; j++) g[j > 2] |= (b.charCodeAt(j) & 255) << 24 - 8 * (j % 4); return new q.init(g, a) } }, u = v.Utf8 = { stringify: function (b) { try { return decodeURIComponent(escape(a.stringify(b))) } catch (g) { throw Error("Malformed UTF-8 data"); } }, parse: function (b) { return a.parse(unescape(encodeURIComponent(b))) } },
                g = l.BufferedBlockAlgorithm = r.extend({ reset: function () { this._data = new q.init; this._nDataBytes = 0 }, _append: function (b) { "string" == typeof b && (b = u.parse(b)); this._data.concat(b); this._nDataBytes += b.sigBytes }, _process: function (b) { var a = this._data, g = a.words, j = a.sigBytes, k = this.blockSize, m = j / (4 * k), m = b "init") || (c.init = function () { c.$super.init.apply(this, arguments) }); c.init.prototype = c; c.$super = this; return c }, create: function () { var a = this.extend(); a.init.apply(a, arguments); return a }, init: function () { }, mixIn: function (a) { for (var c in a) a.hasOwnProperty(c) && (this[c] = a[c]); a.hasOwnProperty("toString") && (this.toString = a.toString) }, clone: function () { return this.init.prototype.extend(this) } }, n = j.WordArray = f.extend({ init: function (a, c) { a = this.words = a || []; this.sigBytes = c != m "") }, parse: function (a) { for (var c = a.length, b = [], d = 0; d < c; d += 2) b[d > 3] |= parseInt(a.substr(d, 2), 16) << 24 - 4 * (d % 8); return new n.init(b, c / 2) } }, g = b.Latin1 = { stringify: function (a) { var c = a.words; a = a.sigBytes; for (var b = [], d = 0; d < a; d++) b.push(String.fromCharCode(c[d > 2] > 24 - 8 * (d % 4) & 255)); return b.join("") }, parse: function (a) { for (var c = a.length, b = [], d = 0; d < c; d++) b[d > 2] |= (a.charCodeAt(d) & 255) << 24 - 8 * (d % 4); return new n.init(b, c) } }, r = b.Utf8 = { stringify: function (a) { try { return decodeURIComponent(escape(g.stringify(a))) } catch (c) { throw Error("Malformed UTF-8 data"); } }, parse: function (a) { return g.parse(unescape(encodeURIComponent(a))) } }, k = j.BufferedBlockAlgorithm = f.extend({ reset: function () { this._data = new n.init; this._nDataBytes = 0 }, _append: function (a) { "string" == typeof a && (a = r.parse(a)); this._data.concat(a); this._nDataBytes += a.sigBytes }, _process: function (a) { var c = this._data, b = c.words, d = c.sigBytes, f = this.blockSize, h = d / (4 * f), h = a "codetitle">复制代码 代码如下:
pFan.date = {
    //返回时间戳
    getTimeStamp:function(){
        var timestamp=new Date().getTime();
        return timestamp.toString();
    },
    //时间戳转为日期格式
    //@nS为时间戳
    getLocalTime: function(nS) { 
        return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17);
    },
    //@time , 时间 , 如 new Date('2013/11/10 0:12:12')
    //@pre ， 星期的 前缀，如：周 ，星期
    //@ nums ，如：一二三四五六日
    getWeek: function (time, pre, nums) { //# 获取星期几
        time = typeof time == 'string' ? this.parse(time) : (time || new Date());
        pre = pre || '星期'; //周
        nums = nums || '日一二三四五六';
        return pre + nums[time.getDay()];
    },
    //@formatType : YYYY, YY, MM
    //@ time : new Date('2013/11/12')
    //@weeks : 日一二三四五六
    format: function (formatType, time, weeks) { //格式化输出时间
        var pre = '0',
        formatType = formatType || 'YYYY-MM-DD',
        weeks = weeks || '日一二三四五六',
        time = time || new Date();
        //格式化时间
        return (formatType || '')
            .replace(/yyyy|YYYY/g, time.getFullYear())
            .replace(/yy|YY/g, Tydic.string.addPre(pre, time.getFullYear() % 100), 2)
            .replace(/mm|MM/g, Tydic.string.addPre(pre, time.getMonth() + 1, 2))
            .replace(/m|M/g, time.getMonth() + 1)
            .replace(/dd|DD/g, Tydic.string.addPre(pre, time.getDate(), 2))
            .replace(/d|D/g, time.getDate())
            .replace(/hh|HH/g, Tydic.string.addPre(pre, time.getHours(), 2))
            .replace(/h|H/g, time.getHours())
            .replace(/ii|II/g, Tydic.string.addPre(pre, time.getMinutes(), 2))
            .replace(/i|I/g, time.getMinutes())
            .replace(/ss|SS/g, Tydic.string.addPre(pre, time.getSeconds(), 2))
            .replace(/s|S/g, time.getSeconds())
            .replace(/w/g, time.getDay())
            .replace(/W/g, weeks[time.getDay()]);
    }   
}

简简单单，pfan！出来混的，一切都是要还的。

以上就是本文关键jQuery和js常用知识点的汇总小结了，希望大家能够喜欢。