js+jquery常用知識點匯總_javascript技巧

　　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") ?
function (text) {
return text == null ?
"" :
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 ? (i < 0 ? Math.max(0, len + i) : i) : 0;，i=i為true，執行(i < 0 ? Math.max(0, len + i) : i)，反正執行i=0
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
for (; i < len; i++) {
// 雙重檢測防止類似這樣的數組 ar = [];ar[1]=1;ar[0] = undefined; 0 in ar =false;a[0]===undefined;
// 0 in arr => arr[0]是否存在 'nme' in arr => arr['nme']是否存在
if (i in arr && arr[i] === elem) {
return i;
}
}
}
return -1;
}

二、javascript中原型鏈常見的知識點

　　1.hasOwnProperty()方法

　　 使用hasOwnProperty()方法可以檢測一個屬性是存在與實例，還是存在于原型中。這個方法從Object繼承，只在給定屬性存在于對象實例中時，才會返回true。

代碼如下:
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 if(max 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 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 {
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 ? r[2] : "";
}
, 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(/([^\/?#]+)$/i) || [, ''])[1]
, hash: a.hash.replace('#', '')
, path: a.pathname.replace(/^([^\/])/, '/$1')
, relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1]
, segments: a.pathname.replace(/^\//, '').split('/')
};
}
};

　　3.常用的正則表達式

代碼如下:
pFan.regExp = { //# 字符串匹配
//是否為 數字！整數，浮點數
isNum: function (num) { //# 是否為數組
return !isNaN(num);
}
, isEmail: function (mail) {//# 是否為 郵箱
return /^([a-z0-9]+[_\-\.]?)*[a-z0-9]+@([a-z0-9]+[_\-\.]?)*[a-z0-9]+\.[a-z]{2,5}$/i.test(mail);
}
, isIdCard: function (card) { //# 是否為 身份證
return /^(\d{14}|\d{17})(\d|[xX])$/.test(card);
}
, isMobile: function (mobile) { //# 是否為 手機
return /^0*1\d{10}$/.test(mobile);
}
, isQQ: function (qq) { //# 是否為 QQ
return /^[1-9]\d{4,10}$/.test(qq);
}
, isTel: function (tel) { //# 是否為 電話
return /^\d{3,4}-\d{7,8}(-\d{1,6})?$/.text(tel);
}
, isUrl: function (url) { //# 是否為 URL
return /https?:\/\/[a-z0-9\.\-]{1,255}\.[0-9a-z\-]{1,255}/i.test(url);
}
, isColor: function (color) { //# 是否為 16進制顏色
return /#([\da-f]{3}){1,2}$/i.test(color);
}
//@id ： 身份證 ，
// @now : 當前時間 如：new Date('2013/12/12') , '2013/12/12'
// @age ： 允許的年齡
, isAdult: function (id, allowAge, now) { //# 是否年齡是否成年
var age = 0 // 用戶 年月日
, nowDate = 0 //當前年月日
;
allowAge = parseFloat(allowAge) || 18;
now = typeof now == 'string' ? new Date(now) : (now || new Date());

if (!this.isIdCard(id)) {
return false;
}
//15位身份證
if (15 == id.length) {
age = '19' + id.slice(6, 6);
} else {
age = id.slice(6, 14);
}
// 類型轉換 整型
age = ~~age;
nowDate = ~~(Tydic.date.format('YYYYMMDD', now));
//比較年齡
if (nowDate - age < allowAge * 1e4) {
return false;
}
return true;
}
//浮點數
, isFloat: function (num) { //# 是否為 浮點數
return /^(([1-9]\d*)|(\d+\.\d+)|0)$/.test(num);
}
//正整數
, isInt: function (num) { //# 是否為 正整數
return /^[1-9]\d*$/.test(num);
}
//是否全為漢字
, isChinese: function (str) { //# 是否全為 漢字
return /^([\u4E00-\u9FA5]|[\uFE30-\uFFA0])+$/gi.test(str);
}
};

　　4.操作className的方法集

代碼如下:
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': "
"
});
}
//重復字符串
, 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(' var p = /]*?>([^\x00]*?)<\/script>/ig;
var arr = [];
while(arr = p.exec(s)) {
var p1 = /]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
var arr1 = [];
arr1 = p1.exec(arr[0]);
if(arr1) {
appendscript(arr1[1], '', arr1[2], arr1[3]);
} else {
p1 = /([^\x00]+?)<\/script>/i;
arr1 = p1.exec(arr[0]);
appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
}
}
return s;
}
//清除腳本內容
,stripscript:function(){
return s.replace(/輸出時間
var pre = '0',
formatType = for

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com