一、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,常用,知识点
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。