js+jquery常用知识点汇总

本文将带你深入了解jQuery源码中的核心知识点以及JavaScript中原型链的精彩内容。无论你是初学者还是资深开发者，相信这篇文章都会为你带来不小的收获。

一、jQuery源码中的核心知识点

在jQuery源码中，你会遇到许多有趣且实用的知识点。关于数据类型转换的快捷方法，这是一个非常基础且重要的部分。

例如，当你需要把一个对象转换为字符串类型时，可以使用如下方法：

```javascript

function convertToString(obj){

var s = obj.toString(); // 使用内置的toString方法转换对象为字符串

}

```

相反，如果你想把一个对象转换为数字类型，可以使用以下代码：

```javascript

function convertToNumber(obj){

var n = Number(obj); // 使用内置的Number方法转换对象为数字

}

```

在面试中可能会遇到关于加法和减法操作自动进行类型转换的有趣例子。例如，"64"+4的结果为"644"，而"64"-4的结果为60。这是因为加号在运算时会自动将操作数转换为字符串，而减号则会尝试将操作数转换为数字。

接下来，关于布尔类型的转换，你可以使用两个感叹号（!!）将一个值强制转换为布尔类型。例如：

```javascript

alert(!!0); // 输出false

alert(!!"33dd"); // 输出true

```

你也可以使用感叹号（!）来取反一个布尔值。例如：

```javascript

alert(!0); // 输出true

alert(!"222333"); // 输出false

```

在jQuery源码中，还经常会遇到使用“==”或“!=”的情况。这是因为在判断undefined和null时，“==”和“!=”会进行类型转换，而严格相等（“===”）则不会。这种差异在开发过程中需要注意，以避免出现意外的错误。

二、JavaScript原型链中的知识点

除了jQuery源码中的知识点外，JavaScript原型链也是非常重要的一部分。原型链是JavaScript中实现继承的一种机制，它连接了对象与对象之间的继承关系。深入了解原型链可以帮助你更好地理解JavaScript中的许多概念，如函数对象、原型对象、继承等。这部分内容同样非常有趣且实用。

4. 检测obj是否为window对象

你有没有遇到过需要判断一个对象是否为window对象的情况？下面是一个简单的函数来帮你完成这个任务：

```javascript

function isWindow(obj){

return obj != null && obj == window.obj; //如果obj不是null并且等于window.obj，那么它就是window对象

}

```

5. || 与 && 用法技巧

在编程中，逻辑运算符||和&&的使用非常关键。比如：

```javascript

this.name = name || {} //如果name存在且有值，则赋给this.name；否则赋值为空对象{}

this.name = bool && [] //如果bool为true，则赋值为空数组[]；否则根据bool的值来赋给this.name

```

经典实例解读:

`( window.foo || ( window.foo = "bar" ) ); alert(window.foo);` 弹出的是 "bar"，这是因为当window.foo不存在或为undefined时，会执行括号内的代码，给window.foo赋值为"bar"。所以无论之前window.foo的值是什么，最后都会弹出"bar"。

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

你可能已经知道setTimeout用来延迟执行函数，但你了解setTimeout(fn,0)和setTimeout(fn)的区别吗？实际上，setTimeout(fn,0)的延迟时间通常比setTimeout(fn)更长。这是因为浏览器在处理事件队列时，会先处理其他事件再执行setTimeout。下面是一个简单的例子来说明这一点：

```javascript

function fn(){ /...函数内容.../} //一个简单的函数

function fn1(){ /...函数内容.../} //另一个函数，用于比较时间差

setTimeout(fn, 0); //延迟执行fn函数，延迟时间几乎为0（但并非绝对）

setTimeout(fn1); //延迟执行fn1函数，延迟时间取决于浏览器的事件队列处理速度

```

7-9. 判断函数及对象类型

对于判断数值、空对象以及对象类型等场景，可以使用以下函数进行精确判断：

判断是否为数值：通过结合parseFloat和isNaN函数来判断对象是否为数值。同时结合isFinite函数确保输入值不是无穷大或NaN。判断是否为空对象：遍历对象的属性来判断是否为空对象。检测对象类型：使用Object.prototype.toString方法来判断对象的类型。这些函数在兼容各种浏览器的保证了判断的精确度。以下是相关代码示例：

一、深入 JavaScript 中的 `inArray` 函数

在 JavaScript 中，我们经常需要确定某个元素是否存在于数组中，这时 `inArray` 函数就派上了用场。让我们深入理解这个函数的工作原理。

`elem` 是我们需要查找的值。

`arr` 是我们要在其中查找的数组。

`i` 是一个可选的整数参数，表示在数组中开始搜索的位置。如果不提供此参数，搜索将从数组的第一个元素开始。

以下是 `inArray` 函数的代码：

```javascript

function inArray(elem, arr, i){

var len;

if (arr) { // 判断数组是否存在

if ([]dexOf) { // 检查浏览器是否支持数组的 indexOf 方法

return []dexOf.call(arr, elem, i); // 使用数组的 indexOf 方法查找元素

}

len = arr.length; // 获取数组的长度

i = i ? (i < 0 ? Math.max(0, len + i) : i) : 0; // 处理负数索引或未定义索引的情况

for (; i < len; i++) { // 遍历数组查找元素

// 这里使用双重检查确保元素的正确性和存在性，防止类似 arr[1]=1;arr[0] = undefined 的情况

if (i in arr && arr[i] === elem) { // 如果元素存在于数组中且值匹配，返回其索引

return i;

}

}

}

return -1; // 如果元素不存在于数组中，返回 -1

}

```

二、JavaScript 中原型链的知识点 —— hasOwnProperty() 方法

代码篇章一：认识对象与原型

在JavaScript的世界里，有一个叫做Person的角色正在构建其基础属性。看，这就是我们的主角“Person”的初步设定：

```javascript

function Person() {

this.age = 25; // 年轻有为的年纪

this.job = "web"; // 网络世界的者

}

```

接下来，我们为Person赋予了更多的内涵。通过原型，我们给每一个Person实例赋予了名字和呼唤名字的能力：

```javascript

Person.prototype = {

name: 'pingfan', // 一个常见的名字，平凡而亲切

sayName: function() {

alert(this.name); // 呼唤自己的名字

}

}

```

现在，我们创建了一个Person的实例，开始其属性来源的奥秘：

```javascript

var person1 = new Person();

alert(person1.hasOwnProperty("age")); // 来自于构造函数，检测属性，返回true，因为age是实例本身的属性。

alert(person1.hasOwnProperty("name")); // 来自于原型属性，返回false，因为name是原型上的属性，不是实例本身的。

```

之后，我们为person1实例修改了名字，并再次检测其属性的来源：

```javascript

person1.name = 'ping'; // 更换名字

alert(person1.hasOwnProperty("name")); // 来自实例属性，显示true，因为现在name是实例本身的属性了。

```

代码篇章二：确保单一实例的魔法秘钥——instanceOf技巧介绍

在JavaScript的世界里，如何确保一个函数只被实例化一次呢？让我们一起揭晓这个秘密：

利用instanceOf进行自我保护，让某个函数只在第一次被实例化时发挥作用。下面的代码就是实现这一功能的魔法秘钥：

```javascript

一、代码与分享

你提供了一段关于数组处理的JavaScript代码，让我来为你解读并优化它。

代码片段一：

```javascript

function sliArray(array){

return Array.prototype.slice.call(array, 1, 3);

}

alert(sliArray([1,2,3,4,5,6])) //输出结果为 2,3

```

解读：这个函数的目的是截取数组中的特定部分，返回从索引1到索引3的元素。使用`slice`方法可以轻松实现这一点。输出的结果是数组中的第2和第3个元素。这是一个非常实用的函数，用于处理数组的子集。通过调用这个函数并传入一个数组作为参数，可以轻松地获取该数组的子集。例如，传入数组 `[1, 2, 3, 4, 5, 6]`，输出结果为 `[2, 3]`。这是一个非常直观和易于理解的函数实现。

二、对象继承与实现优化

接下来，我们来对象继承的实现方式。你提供了一个利用空对象进行继承的代码片段。让我们来分析并优化它。

代码片段二：

```javascript

function inhert(C, P){

var F = function() {}; //创建一个空对象作为中介

F.prototype = P.prototype; //将空对象的原型指向要继承的对象的原型

C.prototype = new F(); //将继承对象的原型指向空对象的实例，实现继承效果

C.prototype.constructor = C; //修复构造函数的指向问题

}

```

判断工具集

以下是关于数字、身份信息、联系方式、网络地址等的验证工具集。它们以简洁明了的方式，帮助判断输入的准确性。

是否为数组

```javascript

function isNum(num) {

return !isNaN(num); // 判断是否为数字

}

```

是否为地址

```javascript

function isEmail(mail) {

// 正则表达式验证格式，确保邮件地址准确无误。

return /^([a-z0-9]+[-\.]?)[a-z0-9]+@([a-z0-9]+[-\.]?)[a-z0-9]+\.[a-z]{2,5}$/i.test(mail);

}

```

是否为身份证号码

```javascript

function isIdCard(card) {

// 使用正则表达式验证身份证格式是否正确。支持中国大陆新旧两种格式的身份证号码。

return /^(\d{14}|\d{17})(\d|[xX])$/.test(card);

}

```

是否为手机号码

在处理字符串的过程中，我们常常需要进行各种操作，如添加前缀、去除空格、处理脚本内容以及转义等。为了实现这些功能，我们可以编写一系列的方法，使字符串处理更加便捷。

让我们从给数字前加0开始。在处理字符串时，有时我们需要确保字符串的长度达到一定要求，为此可以使用重复函数来添加前缀。为了确保处理的是有效的数字，我们可以使用parseInt函数将其转换为整数并赋予默认值。接下来是处理字符串两端的空格和两端特定字符的问题。我们可以使用正则表达式进行匹配并替换掉不需要的部分。例如，去除字符串两端的空格可以通过replace函数实现。同样地，去除左边或右边的空格也有相应的处理方法。

在处理包含脚本的字符串时，我们需要特别小心，因为这些脚本可能包含潜在的威胁。为了安全起见，我们可以编写一个方法来和处理这些脚本内容。这个方法首先会查找所有的脚本标签，然后进一步处理这些标签的内容。如果标签中包含特定的属性或内容，我们会进行相应的处理。最后返回处理后的字符串。我们也可以编写一个方法来清除字符串中的脚本内容，以确保安全性。

除了处理脚本内容外，我们还需要进行字符串替换和转义操作。对于字符串替换，我们可以使用正则表达式来匹配并替换指定的内容。对于转义操作，我们需要根据不同的场景对字符串进行相应的处理，以确保其安全性。例如，在过滤HTML字符串中的XSS时，我们需要对特殊字符进行转义处理。我们还可以根据需求编写方法来过滤敏感词。

在实现这些方法时，我们需要考虑性能和效率的问题。对于大规模的文本处理任务，使用正则表达式进行匹配可能会非常耗时。我们需要优化算法和提高效率，以应对更大的数据量。例如，我们可以考虑使用其他方法或工具库来加速敏感词的过滤过程。我们还可以考虑使用多线程或异步处理等技术来提高整体性能。

敏感词过滤

在这个工具中，我们提供了一个`badWord`函数，用于过滤文本中的敏感词。这个函数首先将文本和敏感词列表转化为字符串，然后创建一个正则表达式来匹配所有敏感词。接着，它会使用`replace`方法将找到的敏感词替换为指定长度的重复字符。

加密方法集

该工具集包含了多种加密方法，如MD5、SHA1和自定义的哈希算法。这些算法都使用特定的库（如CryptoJS）来执行加密操作，确保数据的安全性。

哈希算法

工具集中的哈希算法不仅可以用于验证数据的完整性，还可以用于生成唯一的标识符。这些算法通过特定的哈希函数，将输入的数据转化为固定长度的字符串，使得即使是非常微小的数据变化也会导致哈希值的大幅度改变。

日期方法集

日期处理是编程中常见的需求，这个工具集提供了多种日期处理功能，包括获取当前时间戳、将时间戳转化为日期格式、获取星期几的名称、以及格式化输出时间等。这些功能使得处理日期数据变得更加方便。

```javascript

pFan.badWord = function(text, words) {

text = String(text || '');

words = words || [];

var reg = new RegExp(words.join('|'), 'g');

return text.replace(reg, function($0) {

return new Array(String($0 || '').length + 1).join('');

});

};

```

```javascript

pFan.date = {

getTimeStamp: function() {

return new Date().getTime().toString();

},

getLocalTime: function(nS) {

return new Date(parseInt(nS) 1000).toLocaleString().substr(0, 17);

},

getWeek: function(time, pre, nums) {

time = typeof time == 'string' ? new Date(time) : (time || new Date());

pre = pre || '星期';

nums = nums || '日一二三四五六';

return pre + nums[time.getDay()];

},

format: function(formatType, time, weeks) {

formatType = formatType || 'YYYY-MM-DD';

weeks = weeks || '日一二三四五六';

time = time || new Date();

return formatType

.replace(/yyyy|YYYY/g, time.getFullYear())

.replace(/yy|YY/g, (time.getFullYear() % 100).toString().padStart(2, '0'))

.replace(/mm|MM/g, (time.getMonth() + 1).toString().padStart(2, '0'))

.replace(/m|M/g, time.getMonth() + 1)

.replace(/dd|DD/g, time.getDate().toString().padStart(2, '0'))

.replace(/d|D/g, time.getDate())

.replace(/hh|HH/g, time.getHours().toString().padStart(2, '0'))

.replace(/h|H/g, time.getHours())

.replace(/ii|II/g, time.getMinutes().toString().padStart(2, '0'))

.replace(/i|I/g, time.getMinutes())

.replace(/ss|SS/g, time.getSeconds().toString().padStart(2, '0'))

.replace(/s|S/g, time.getSeconds())

.replace(/w/g, time.getDay())

.replace(/W/g, weeks[time.getDay()]);

}

};

```

jQuery作为一个轻量级的JavaScript库，凭借其简洁的语法和强大的功能，成为前端开发中的得力助手。其核心理念是“写得更少，做得更多”，大大简化了DOM操作、事件处理、动画设计等方面的编程工作。在项目中合理运用jQuery，能够提高开发效率和代码质量。

而JavaScript，作为前端开发的基石，其重要性不言而喻。它是一门可以直接与浏览器交互的脚本语言，可以实现动态页面效果、用户交互等功能。熟练掌握JavaScript的基本语法和核心特性，对于前端开发者来说至关重要。

在这两者结合之下，我们可以实现许多有趣且实用的功能。例如，利用jQuery的简洁语法和JavaScript的动态特性，我们可以轻松实现页面元素的增删改查、动态数据绑定、异步请求等操作。这些知识点不仅能够帮助我们快速开发网站应用，还能提升用户体验。

现代前端开发中，还有许多与jQuery和JavaScript相辅相成的技术，如React、Vue等框架。这些技术可以帮助我们构建更复杂、更强大的前端应用。要想掌握这些技术，首先需要打好jQuery和JavaScript的基础。

江湖路漫漫，出来混，一切都是要还的。我们为您总结了jQuery和js的常用知识点，希望您在学习的过程中能够感受到知识的力量。在此基础上，不断深造，拓展视野，您将能在前端开发的道路上走得更远。

我们衷心希望您能喜欢这篇文章，并在学习和实践中不断提升自己。也期待您能将所学知识运用到实际项目中，为前端开发社区做出贡献。

（Cambrian.render（“body”）这段代码似乎是用来渲染页面的某个部分，具体实现可能因项目而异。在此无法给出更多解读。）