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") ?
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<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 ? 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);
}
};
以上是 js+jquery常用知识点汇总 的全部内容， 来源链接： utcz.com/z/330439.html
