js+jquery常用知识点汇总

站长资源 2024/11/28 佚名

2 0 1

一、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, {
            '&': "&"
            , '"': """
            , "'": '''
            , '<': "<"
            , '>': ">"
            , ' ': " "
            , '\t': "	"
            , '(': "("
            , ')': ")"
            , '*': "*"
            , '+': "+"
            , ',': ","
            , '-': "-"
            , '.': "."
            , '/': "/"
            , '"?"
            , '\\': "\"
            , '\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, " ").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, " ").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常用知识点的汇总小结了，希望大家能够喜欢。

js,jquery,常用,知识点

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“js+jquery常用知识点汇总”

暂无评论...

js+jquery常用知识点汇总

深入理解JavaScript系列（25）：设计模式之单例模式详解

js实现宇宙星空背景效果的方法

评论“js+jquery常用知识点汇总”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接