js&jq口试笔记，该部份为下部份。
字符串相干
1、定义一个要领，用于将string中的每一个字符之间加一个空格，并输出
如：'hello' -> 'h e l l o'
function joinSpace(str){
return str.split('').join(' ')
}2、JavaScript中怎样检测一个变量是一个String范例？请写出函数完成
要领1
function isString(obj){
return typeof(obj) === "string"? true: false;
// returntypeof obj === "string"? true: false;
}
要领2
function isString(obj){
return obj.constructor === String? true: false;
}
要领3
function isString(obj){
return Object.prototype.toString.call(obj) === "[object String]"?true:false;
}
如：
var isstring = isString('xiaoming');
console.log(isstring); // true3、请用js去除字符串空格？
要领一：运用replace正则婚配的要领
去除一切空格:
str = str.replace(/\s*/g,"");
去除两端空格:
str = str.replace(/^\s*|\s*$/g,"");
去除左空格：
str = str.replace( /^\s*/, “”);
去除右空格：
str = str.replace(/(\s*$)/g, "");
str为要去除空格的字符串，实例以下：
var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323
要领二：运用str.trim()要领
str.trim() //局限性：没法去除中心的空格，实例以下：
var str = " xiao ming ";
var str2 = str.trim();
console.log(str2); //xiao ming
同理:
str.trimLeft()，str.trimRight() //离别用于去除字符串摆布空格。
要领三：运用jquery,$.trim(str)要领
$.trim(str) 局限性：没法去除中心的空格，实例以下：
var str = " xiao ming ";
var str2 = $.trim(str)
console.log(str2); // xiao ming4、你怎样猎取浏览器URL中查询字符串中的参数？
//测试地点为：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23
function showWindowHref(){
var sHref = window.location.href;
var args = sHref.split('?');
if(args[0] == sHref){
return "";
}
var arr = args[1].split('&');
var obj = {};
for(var i = 0;i< arr.length;i++){
var arg = arr[i].split('=');
obj[arg[0]] = arg[1];
}
return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming5、js 字符串支配函数
//这里只是列举了经常使用的字符串函数，详细运用要领，请参考网址。
concat() 将两个或多个字符的文本组合起来，返回一个新的字符串。
indexOf() 返回字符串中一个子串第一处涌现的索引。假如没有婚配项，返回 -1 。
charAt() 返回指定位置的字符。
lastIndexOf() 返回字符串中一个子串末了一处涌现的索引，假如没有婚配项，返回 -1 。
match() 搜检一个字符串是不是婚配一个正则表达式。
substr() 返回从string的startPos位置，长度为length的字符串
substring() 返回字符串的一个子串。传入参数是肇端位置和完毕位置。
slice() 提取字符串的一部份，并返回一个新字符串。
replace() 用来查找婚配一个正则表达式的字符串，然后运用新字符串替换婚配的字符串。
search() 实行一个正则表达式婚配查找。假如查找胜利，返回字符串中婚配的索引值。不然返回 -1 。
split() 经由历程将字符串划分红子串，将一个字符串做成一个字符串数组。
length 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
toLowerCase() 将悉数字符串转成小写字母。
toUpperCase() 将悉数字符串转成大写字母。6、推断一个字符串中涌现次数最多的字符，统计这个次数
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){ //推断json中是不是存在当前str.charAr(i)的值
json[str.charAt(i)] = 1; //假如不存在，则将其存放在json中，而且赋值为1，相当于涌现的次数为1
}else{
json[str.charAt(i)]++; //假如存在，则这个字符的值加1，相当于次数加1
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){ //推断当前json中的键值（相当于当前键地点字符的次数）是不是大于iMax
iMax = json[i];
iIndex = i;
}
}
console.log('涌现次数最多的是:'+iIndex+'涌现'+iMax+'次');数组(Array)对象
1、Array相干的属性和要领
- Array 对象属性
constructor 返回对竖立此对象的数组函数的援用。
var test=new Array();
if (test.constructor==Array){
document.write("This is an Array");
}
length 设置或返回数组中元素的数目。
prototype 使您有才能向对象增添属性和要领。- Array 对象要领
join() 把数组的一切元素放入一个字符串。元素经由历程指定的分开符举行分开。
var arr = ['xiao','lin','qiqi','mingtian'];
var arr2 = arr.join(',');
console.log(arr2); // 依据','离隔返回的字符串为："xiao,lin,qiqi,mingtian"
pop() 删除并返回数组的末了一个元素。
var arr = [2,3,4,5];
var arr2 = arr.pop();
console.log(arr2); // 删除的数组的末了一个元素为：5
console.log(arr); // 删除元素以后的数组为：[2, 3, 4]
shift() 删除并返回数组的第一个元素
var arr = [2,3,4,5];
var arr2 = arr.shift();
console.log(arr2); // 删除的数组的第一个元素为：2
console.log(arr); // 删除元素以后的数组为：[3, 4，5]
push() 向数组的末端增添一个或更多元素，并返回新的长度。
var arr = [2,3,4,5];
var arr2 = arr.push(6);
console.log(arr2); // 返回的数组长度：5
console.log(arr); // [2, 3, 4, 5, 6]
unshift() 向数组的开首增添一个或更多元素，并返回新的长度。
var arr = ['xiao','ming','qiqi','aiming'];
var arr1 = arr.unshift('lang');
console.log(arr1); // 返回的数组的长度： 5
console.log(arr); //向数组开首增添元素返回的结果：["lang", "xiao", "ming", "qiqi", "aiming"]
reverse() 倒置数组中元素的递次。
var arr = [2,3,4,5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2]
slice() 从某个已有的数组返回选定的元素
var arr = [2,3,4,5];
var arr2 = arr.slice(1,3);
console.log(arr2); // 截取区间返回的数组为：[3, 4]
console.log(arr); // [2, 3, 4, 5]
sort() 对数组的元素举行排序
借助排序函数，完成数值由小到大排序
function sortNumber(a,b){
return a - b
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2); // [5, 23, 30, 42]
console.log(arr); // [5, 23, 30, 42]
借助排序函数，完成数值由大到小排序
function sortNumber(a,b){
return b - a
}
var arr = [23,30,42,5];
var arr2 = arr.sort(sortNumber);
console.log(arr2); // [42, 30, 23, 5]
console.log(arr); // [42, 30, 23, 5]
splice() 删除元素，并向数组增添新元素。
语法:arrayObject.splice(index,howmany,item1,.....,itemX)
index:必需。整数，划定增添/删除项目标位置，运用负数可从数组结尾处划定位置。
howmany:必需。要删除的项目数目。假如设置为 0，则不会删除项目。
item1, ..., itemX:可选。向数组增添的新项目。
// 竖立一个新数组，并向其增添一个元素
var arr = [1,2,3,4];
arr.splice(2,0,5);
console.log(arr); // [1, 2, 5, 3, 4]
// 删除位于 index 2 的元素，并增添一个新元素来替换被删除的元素：
var arr = [1,2,3,4];
arr.splice(2,1,5);
console.log(arr); // [1, 2, 5, 4]
toString() 把数组转换为字符串，并返回结果。
var arr = ['xiao','ming','qiqi','aiming'];
arr.toString();
console.log(arr); // ["xiao", "ming", "qiqi", "aiming"]2、编写一个要领 去掉一个数组的反复元素
要领一
var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
if( !obj[arr[i]] ){
obj[arr[i]] = 1;
tmp.push(arr[i]);
}
}
console.log(tmp); //结果以下： [0, 2, 3, 4]
要领二
var arr = [2,3,4,4,5,2,3,6];
var arr2 = [];
for(var i = 0;i< arr.length;i++){
if(arr2.indexOf(arr[i]) < 0){
arr2.push(arr[i]);
}
}
console.log(arr2); //结果为：[2, 3, 4, 5, 6]
要领三
var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2); //结果为：[2, 3, 4, 5, 6]
要领四：（ES6供应了新的数据构造 Set）
let unique= [...new Set(array)];
let unique= [...new Set([2,3,4,4,5,2,3,6])];
console.log(unique)3、求数组的最值？
求数组最大值：Math.max.apply(null,arr);
var arr = [3,43,23,45,65,90];
var max = Math.max.apply(null,arr);
console.log(max);
// 90
求数组最小值：Math.min.apply(null,arr);
var arr = [3,43,23,45,65,90];
var min = Math.min.apply(null,arr);
console.log(min);
// 34、数组排序相干
挑选排序
/**
*以一个角标的元素和其他元素举行比较。
*在内轮回第一次完毕，最值涌现的头角标位置上。
*/
function selectSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
var len = array.length, temp;
for (var i = 0; i < len - 1; i++) { //轮数
var min = array[i];
for (var j = i + 1; j < len; j++) { //第一个与第二个比较
if (array[j] < array[i]) {
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
}
return array;
} else {
return 'array is not an Array!';
}
}
冒泡排序
/**
*比较体式格局：相邻两个元素举行比较,假如后一个比前一个小，换位置。
*道理：内轮回完毕一次，最值涌如今尾角标位置。
*/
function bubbleSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
var len = array.length, temp;
for(var j=0;j<len-1;j++){
//两两比较，假如前一个比后一个大，则交流位置。
for(var i=0;i<len-1-j;i++){ //-i:让每次介入比较的元素削减。-1:防止角标越界。
if(arr[i]>arr[i+1]){
var temp = arr[i];
arr[i] = arr[i+1];
arr[i+1] = temp;
}
}
}
return array;
} else {
return 'array is not an Array!';
}
}
二分插入排序
/**
*为了进步查找效力，可运用折半查找的体式格局，注重：这类查找只对有序的数组有用。这类体式格局也叫二分查找法。
*/
function binaryInsertionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
for (var i = 1; i < array.length; i++) {
var key = array[i], left = 0, right = i - 1;
while (left <= right) {
var middle = parseInt((left + right) / 2);
if (key < array[middle]) {
right = middle - 1;
} else {
left = middle + 1;
}
}
for (var j = i - 1; j >= left; j--) {
array[j + 1] = array[j];
}
array[left] = key;
}
return array;
} else {
return 'array is not an Array!';
}
}5、数组的翻转（非reverse()）
要领一：
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
var num = arr.pop(); //删除数组末了一个元素并返回被删除的元素
arr2.push(num);
}
console.log(arr2);
// [4, 3, 2, 1]
要领二：
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length){
var num = arr.shift(); //删除数组第一个元素并返回被删除的元素
arr2.unshift(num);
}
console.log(arr2);6、在Javascript中什么是伪数组？怎样将伪数组转化为规范数组？
- 伪数组（类数组）：没法直接挪用数组要领或希冀length属性有什么迥殊的行动，但仍可以用真正数组遍历要领来遍历它们。
典范的是函数的argument参数，另有像挪用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。
a.运用Array.prototype.slice.call();
Array.prototype.slice.call({
0:"likeke",
1:12,
2:true,
length:3
});
//["likeke", 12, true]
b.运用[].slice.call()，相识js原型链的都晓得，现实上这类要领和第一中要领是一样的，但上面第一种体式格局相对效力更高。
[].slice.call({
0:"likeke",
1:12,
2:true,
length:3
});
//["likeke", 12, true]
c. 运用ES6中Array.from要领;
Array.from({
0:"lk",
1:12,
2:2013,
3:"长安大学",
length:4
});
//["lk", 12, 2013, "长安大学"]对象相干
1、猎取JavaScript对象键名
var obj = {name: 'wan',age: 20, sex: 'male'};
var objKey = [];
for(var item in obj){
if(obj.hasOwnProperty(item)){
objKey.push(item);
}
}
//for(var item in obj){
// objKey.push(item);
//}
console.log(objKey);//["name", "age", "sex"]2、call和apply的区分
- 语法一：
func.call(thisObj,a,b,c...) || func.apply(thisObj,array)
定义：将函数（要领） func 绑定到对象 thisObj 上去运转，转变了函数func 原有的 this 的指向，this指向了对象thisObj（js中的函数是对象，函数名是对 Function 对象的援用） - 语法二：
obj.call(thisObj,a,b,c...) || obj.apply(thisObj,array)
定义：将对象 obj 的属性和要领增添到对象 thisObj 上，即 thisObj 继承了 obj区分：call的参数个数，从第二个最先 大于即是 0个，为单个变量；apply的参数只要两个，第二个参数为一个数组，即array = [a,b,c…]；
实例一：借调要领，对象sub借调对象add的要领add（函数也是对象）
function add(a,b){return a+b}
function sub(a,b){return a-b}
add.call(sub,3,1)//4
sub.call(add,3,1)//2
add.call(sub,3,1) === add(3,1)
实例二：转变this指向
function a(){console.log(this)}
var obj = {}
a()//window
a.call()//window
a.call(obj)//obj
实例三：完成继承
function Animal(name){this.name=name;this.showName=function(){alert(this.name)}}
function Cat(name){
Animal.call(this,name); //将Animal对象的属性和要领运用到Cat上，因而Cat继承了Animal的一切属性和要领
}
var cat = new Cat(“Black Cat”);
cat.showName(); //Black Cat
实例四：多重继承
function add(a,b){return a+b}
function sub(a,b){return a-b}
function calc(a,b){
add.call(this)
sub.call(this)
}3、js中转变this指向的要领
call、apply、bind，this老是指向挪用它的对象4、为下面的类增添一个要领method1
var A = function(){}
A.prototype.method1 = function(a,b){return a+b}5、完成Parent类和Child类，并竖立Parent和Child的继承关联
- 面向对象的基本特征有：关闭、继承、多态。
function Parent(){
this.surname = 'wan';
this.work = function(){console.log('i like work')}
}
function Child(){}
原型链继承：Child.prototype = new Parent()
实例化：let person = new Child();
console.log(person.surname);//wan
person.work();//i like work
组织函数继承：function Child(){Parent.call(this)}
组合继承：
function Child(){
Parent.call(this);//继承属性
}
Child.prototype = new Parent();//继承要领
原型式继承：
function object(obj){
function Func(){};
Func.prototype = obj;
return new Func();
}
var Child = object(Parent);
寄生式继承：
寄生组合式继承：6、诠释原型和原型链
- 原型：即原型对象，原型对象上定义要领和属性的目标是为了被子类继承和运用。原型链的构成真恰是靠__proto__ 而非prototype
- 原型链：每一个对象都有原型，对象的原型指向原型对象，即子对象的原型指向父对象，父对象的原型指向爷爷对象，这类原型层层连接起来的就构成了原型链。
7、定义一个类的私有属性和公有属性
function Person(){
var sex = 'man';//var 私有
this.surnname = 'wan';//this 公有
}8、完成一个函数clone，可以对JavaScript中的5种重要的数据范例（包含Number、String、Object、Array、Boolean）举行值复制。
（Object.prototype.toString.call()要领及运用）
/**
* 对象克隆
* 支撑基本数据范例及对象
* 递归要领
*/
function clone(obj) {
var o;
switch (typeof obj) {
case "undefined":
break;
case "string":
o = obj + "";
break;
case "number":
o = obj - 0;
break;
case "boolean":
o = obj;
break;
case "object": // object 分为两种状况 对象（Object）或数组（Array）
if (obj === null) {
o = null;
} else {
if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
o = [];
for (var i = 0; i < obj.length; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var k in obj) {
o[k] = clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
//测试
var a=[12,34,'123'];
console.log(clone(a));
var b=null;
console.log(clone(b));
var c={1:'a',2:'b',3:'c'};
console.log(clone(c));
var d=1;
console.log(clone(d));9、竖立对象
- 运用Object组织函数或对象字面量都可以竖立对象，但瑕玷是竖立多个对象时，会发生大批的反复代码，因而下面引见可处置惩罚这个题目的竖立对象的要领
1、工场形式
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.getName = function () {
return this.name;
}
return o;//运用return返回天生的对象实例
}
var person = createPerson('Jack', 19, 'SoftWare Engineer');
竖立对象交给一个工场要领来完成，可以通报参数，但重要瑕玷是没法辨认对象范例，由于竖立对象都是运用Object的原生组织函数来完成的。
2、组织函数形式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engineer');
var person2 = new Person('Liye', 23, 'Mechanical Engineer');
运用自定义的组织函数（与平常函数一样，只是用它来竖立对象），定义对象范例（如：Person）的属性和要领。它与工场要领区分在于：
没有显式地竖立对象,直接将属性和要领赋值给this对象；没有return语句；
别的，要竖立Person的实例，必需运用new关键字，以Person函数为组织函数，通报参数完成对象竖立；现实竖立经由以下4个历程：
竖立一个对象
将函数的作用域赋给新对象（因而this指向这个新对象，如：person1）
实行组织函数的代码
返回该对象
上述由Person组织函数天生的两个对象person1与person2都是Person的实例，因而可以运用instanceof推断，而且由于一切对象都继承Object，因而person1 instanceof Object也返回真：
alert(person1 instanceof Person);//true;
alert(person2 instanceof Person);//true;
alert(person1 instanceof Object);//true;
alert(person1.constructor === person2.constructor);//ture;
虽然组织函数体式格局比较不错，但也存在瑕玷，那就是在竖立对象时，迥殊针对对象的属性指向函数时，会反复的竖立函数实例，以上述代码为基本，可以改写为：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = new Function () {//改写后结果与原代码雷同，不过是为了轻易明白
return this.name;
}
}
上述代码，竖立多个实例时，会反复挪用new Function();竖立多个函数实例，这些函数实例还不是一个作用域中，固然这平常不会有错，但这会形成内存糟蹋。
固然，可以在函数中定义一个getName = getName的援用，而getName函数在Person外定义，如许可以处置惩罚反复竖立函数实例题目，但在结果上并没有起到封装的结果，以下所示：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.getName = getName;
}
function getName() {//到处是代码，看着乱！！
return this.name;
}
3、原型形式
JS每一个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是一切经由历程new支配符运用函数竖立的实例的原型对象。
原型对象最大特征是，一切对象实例同享它所包含的属性和要领，也就是说，一切在原型对象中竖立的属性或要领都直接被一切对象实例同享。
function Person(){}
Person.prototype.name = 'Jack';//运用原型来增添属性
Person.prototype.age = 29;
Person.prototype.getName = function(){
return this.name;
}
var person1 = new Person();
alert(person1.getName());//Jack
var person2 = new Person();
alert(person1.getName === person2.getName);//true;同享一个原型对象的要领
原型是指向原型对象的，这个原型对象与组织函数没有太大关联，唯一的关联是函数的prototype是指向这个原型对象！而基于组织函数竖立的对象实例也包含一个内部指针为：[[prototype]]指向原型对象。
实例属性或要领的接见历程是一次搜刮历程：
首先从对象实例自身最先，假如找到属性就直接返回该属性值；
假如实例自身不存在要查找属性，就继承搜刮指针指向的原型对象，在个中查找给定名字的属性，假如有就返回；
基于以上剖析，原型形式竖立的对象实例，其属性是同享原型对象的；但也可以本身实例中再举行定义，在查找时，就不从原型对象猎取，而是依据搜刮准绳，取得本实例的返回；简朴来讲，就是实例中属性会屏障原型对象中的属性；
原型与in支配符
一句话：不管原型中属性，照样对象实例的属性，都可以运用in支配符接见到；要想推断是不是是实例自身的属性可以运用object.hasOwnProperty(‘attr’)来推断；
原生对象中原型
原生对象中原型与平常对象的原型一样，可以增添/修改属性或要领，如以下代码为一切字符串对象增添去摆布空缺原型要领：
String.prototype.trim = function(){
return this.replace(/^\s+/,'').replace(/\s+$/,'');
}
var str = ' word space ';
alert('!'+str.trim()+'!');//!word space!
原型形式的瑕玷，它省略了为组织函数通报初始化参数，这在肯定顺序带来不方便；别的，最重要是当对象的属性是援用范例时，它的值是稳定的，老是援用同一个外部对象，一切实例对该对象的支配都邑别的实例：
function Person() { }
Person.prototype.name = 'Jack';
Person.prototype.lessons = ['Math','Physics'];
var person1 = new Person();
person1.lessons.push('Biology');
var person2 = new Person();
alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2
4、组合组织函数及原型形式
如今最为经常使用的定义范例体式格局，是组合组织函数形式与原型形式。组织函数形式用于定义实例的属性，而原型形式用于定义要领和同享的属性。结果，每一个实例都邑有本身的一份实例属性的副本，但同时又同享着对方要领的援用，最大限制的勤俭内存。别的，组合形式还支撑向组织函数通报参数，可谓是集两家之所长。
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
constructor: Person,//原型字面量体式格局会将对象的constructor变成Object，别的强迫指回Person
getName: function () {
return this.name;
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//同享原型中定义要领
在所打仗的JS库中，jQuery范例的封装就是运用组合形式来实例的！！！
5、动态原型形式
组合形式中实例属性与同享要领（由原型定义）是星散的，这与纯面向对象言语不太一致；动态原型形式将一切组织信息都封装在组织函数中，又坚持了组合的长处。
其道理就是经由历程推断组织函数的原型中是不是已定义了同享的要领或属性，假如没有则定义，不然不再实行定义历程。该体式格局只原型上要领或属性只定义一次，且将一切组织历程都封装在组织函数中，对原型所做的修改能马上表现一切实例中：
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.lessons = ['Math', 'Physics'];
}
if (typeof this.getName != 'function') {//经由历程推断实例封装
Person.prototype = {
constructor: Person,//原型字面量体式格局会将对象的constructor变成Object，别的强迫指回Person
getName: function () {
return this.name;
}
}
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//同享原型中定义要领jQuery相干
1、jQuery为DOM元素绑定点击事宜的要领和区分
.click(function(){})
.bind({'click mouseleave',function(){}},{'click mouseleave',function(){}}) //在.bind()绑定事宜的时刻，这些元素必需已存在。
.on() //为动态绑定事宜
.one("click", function() {alert("This will be displayed only once.");});//绑定一个事宜，而且只运转一次，然后删除本身，2、jQuery 库中的 $() 是什么？
$() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被许可挪用定义在 jQuery 对象上的多个差别要领。
可以将一个挑选器字符串传入` $()` 函数，它会返回一个包含一切婚配的 DOM 元素数组的 jQuery 对象。
3、怎样找到一切 HTML select 标签的选中项？
$('[name=selectname] :selected')4、$(this) 和 this 关键字在 jQuery 中有何差别？
- $(this) 返回一个 jQuery 对象，你可以对它挪用多个 jQuery 要领，比如用 text() 猎取文本，用val() 猎取值等等。
而 this 代表当前元素，它是 JavaScript 关键词中的一个，示意高低文中的当前 DOM 元素。你不能对它挪用 jQuery 要领，直到它被 $() 函数包裹，比方 $(this)。
5、jquery怎样移除标签onclick属性？
取得a标签的onclick属性: $("a").attr("onclick")
删除onclick属性：$("a").removeAttr("onclick");
设置onclick属性：$("a").attr("onclick","test();");6、jquery中addClass,removeClass,toggleClass的运用。
$(selector).addClass(class)：为每一个婚配的元素增添指定的类名
$(selector).removeClass(class)：从一切婚配的元素中删除悉数或许指定的类，删除class中某个值；
$(selector).toggleClass(class)：假如存在（不存在）就删除（增添）一个类
$(selector).removeAttr(class);删除class这个属性；7、JQuery有几种挑选器?
(1)、基本挑选器：#id，class,element,*;
(2)、条理挑选器：parent > child，prev + next ，prev ~ siblings
(3)、基本过滤器挑选器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
(4)、内容过滤器挑选器： :contains ，:empty ，:has ，:parent
(5)、可见性过滤器挑选器：:hidden ，:visible
(6)、属性过滤器挑选器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
(7)、子元素过滤器挑选器：:nth-child ，:first-child ，:last-child ，:only-child
(8)、表单挑选器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
(9)、表单过滤器挑选器：:enabled ，:disabled ，:checked ，:selected8、jQuery中的Delegate()函数有什么作用？
delegate()会在以下两个状况下运用到：
1、假如你有一个父元素，须要给其下的子元素增添事宜，这时候你可以运用delegate()了，代码以下：
`$("ul").delegate("li", "click", function(){ $(this).hide(); });`2、当元素在当前页面中不可用时，可以运用delegate()
9、$(document).ready()要领和window.onload有什么区分？
(1)、window.onload 要领是在网页中一切的元素(包含元素的一切关联文件)完整加载到浏览器后才实行的。
(2)、$(document).ready() 要领可以在DOM载入停当时就对其举行支配，并挪用实行绑定的函数。10、怎样用jQuery禁用浏览器的行进退却按钮？
$(document).ready(function() {
window.history.forward(1);
//OR window.history.forward(-1);
});11、 jquery中$.get()提交和$.post()提交有区分吗？
- 雷同点：都是异步要求的体式格局来猎取服务端的数据；
- 异同点：
1、要求体式格局差别：$.get() 要领运用GET要领来举行异步要求的。$.post() 要领运用POST要领来举行异步要求的。
2、参数通报体式格局差别：get要求会将参数跟在URL后举行通报，而POST要求则是作为HTTP音讯的实体内容发送给Web服务器的，这类通报是对用户不可见的。
3、数据传输大小差别：get体式格局传输的数据大小不能超过2KB 而POST要大的多
4、安全题目： GET 体式格局要求的数据会被浏览器缓存起来，因而有安全题目。
12、写出一个简朴的$.ajax()的要求体式格局？
$.ajax({
url:'http://www.baidu.com',
type:'POST',
data:data,
cache:true,
headers:{},
beforeSend：function(){},
success:function(){},
error:function(){},
complete:function(){}
}); 13、jQuery的事宜托付要领bind 、live、delegate、on之间有什么区分？
(1)、bind 【jQuery 1.3之前】
定义和用法：重要用于给挑选到的元素上绑定特定事宜范例的监听函数； 语法：bind(type,[data],function(eventObject))； 特征： (1)、适用于页面元素静态绑定。只能给挪用它的时刻已存在的元素绑定事宜，不能给将来新增的元素绑定事宜。 (2)、当页面加载完的时刻，你才可以举行bind()，所以可以发生效力题目。 实例以下：$( "#members li a" ).bind( "click", function( e ) {} );(2)、live 【jQuery 1.3以后】
定义和用法：重要用于给挑选到的元素上绑定特定事宜范例的监听函数； 语法：live(type, [data], fn); 特征： (1)、live要领并没有将监听器绑定到本身(this)身上，而是绑定到了this.context上了。 (2)、live恰是应用了事宜托付机制来完成事宜的监听处置惩罚，把节点的处置惩罚托付给了document，新增添的元素没必要再绑定一次监听器。 (3)、运用live（）要领但却只能放在直接挑选的元素背面，不能在层级比较深，联缀的DOM遍历要领背面运用，即$(“ul”").live...可以，但$("body").find("ul").live...不可； 实例以下：$( document ).live( "click", "#members li a", function( e ) {} );(3)、delegate 【jQuery 1.4.2中引入】
定义和用法：将监听事宜绑定在就近的父级元素上 语法：delegate(selector,type,[data],fn) 特征： (1)、挑选就近的父级元素，由于事宜可以更快的冒泡上去，可以在第一时候举行处置惩罚。 (2)、更准确的小局限运用事宜代办，机能优于.live()。可以用在动态增添的元素上。 实例以下： $("#info_table").delegate("td","click",function(){/*显现更多信息*/}); $("table").find("#info").delegate("td","click",function(){/*显现更多信息*/});(4)、on 【1.7版本整合了之前的三种体式格局的新事宜绑定机制】
定义和用法：将监听事宜绑定到指定元素上。 语法：on(type,[selector],[data],fn) 实例以下：$("#info_table").on("click","td",function(){/*显现更多信息*/});参数的位置写法与delegate不一样。 申明：on要领是当前JQuery引荐运用的事宜绑定要领，附加只运转一次就删除函数的要领是one()。 总结：.bind(), .live(), .delegate(),.on()离别对应的相反事宜为：.unbind(),.die(), .undelegate(),.off()
开辟及机能优化
1、躲避javascript多人开辟函数重名题目
定名空间
关闭空间
js模块化mvc（数据层、表现层、掌握层）
seajs
变量转换成对象的属性
对象化
2、请说出三种减低页面加载时候的要领
紧缩css、js文件
兼并js、css文件，削减http要求
外部js、css文件放在最底下
削减dom支配，只管用变量替换没必要要的dom支配
3、你所相识到的Web进击手艺
- （1）XSS（Cross-Site Scripting，跨站剧本进击）：指经由历程存在安全漏洞的Web网站注册用户的浏览器内运转不法的HTML标签或许JavaScript举行的一种进击。
- （2）SQL注入进击
- （3）CSRF（Cross-Site Request Forgeries，跨站点要求捏造）：指进击者经由历程设置好的圈套，强迫对已完成的认证用户举行非预期的个人信息或设定信息等某些状况更新。
4、web前端开辟，怎样进步页面机能优化？
内容方面：
1.削减 HTTP 要求 (Make Fewer HTTP Requests) 2.削减 DOM 元素数目 (Reduce the Number of DOM Elements) 3.使得 Ajax 可缓存 (Make Ajax Cacheable)针对CSS：
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top) 2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 3.精简 JavaScript 与 CSS (Minify JavaScript and CSS) 4.防止 CSS 表达式 (Avoid CSS Expressions)针对JavaScript ：
1. 剧本放到 HTML 代码页底部 (Put Scripts at the Bottom) 2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 4. 移除反复剧本 (Remove Duplicate Scripts)面向图片(Image)：
1.优化图片 2 不要在 HTML 中运用缩放图片 3 运用适当的图片花样 4 运用 CSS Sprites 技能对图片优化
5、前端开辟中，怎样优化图象？图象花样的区分？
优化图象：
1、不必图片，只管用css3替换。 比如说要完成润饰结果，如半通明、边框、圆角、暗影、渐变等，在当前主流浏览器中都可以用CSS杀青。 2、 运用矢量图SVG替换位图。关于绝大多数图案、图标等，矢量图更小，且可缩放而无需天生多套图。如今主流浏览器都支撑SVG了，所以可放心运用！ 3.、运用适当的图片花样。我们罕见的图片花样有JPEG、GIF、PNG。 基本上，内容图片多为照片之类的，适用于JPEG。 而润饰图片一般更合适用无损紧缩的PNG。 GIF基本上除了GIF动画外不要运用。且动画的话，也更发起用video元素和视频花样，或用SVG动画庖代。 4、根据HTTP协定设置合理的缓存。 5、运用字体图标webfont、CSS Sprites等。 6、用CSS或JavaScript完成预加载。 7、WebP图片花样能给前端带来的优化。WebP支撑无损、有损紧缩，动态、静态图片，紧缩比率优于GIF、JPEG、JPEG2000、PG等花样，异常合适用于收集等图片传输。图象花样的区分：
矢量图：图标字体，如 font-awesome；svg 位图：gif,jpg(jpeg),png区分：
1 、gif:是是一种无损，8位图片花样。具有支撑动画，索引通明，紧缩等特征。适用于做色彩简朴(色彩少)的图片，如logo,种种小图标icons等。 2、JPEG花样是一种大小与质量相平衡的紧缩图片花样。适用于许可细微失真的色彩雄厚的照片，不合适做色彩简朴(色彩少)的图片，如logo,种种小图标icons等。 3、png:PNG可以细分为三种花样:PNG8，PNG24，PNG32。背面的数字代表这类PNG花样最多可以索引和存储的色彩值。 关于通明：PNG8支撑索引通明和alpha通明;PNG24不支撑通明;而PNG32在24位的PNG基本上增添了8位（256阶）的alpha通道通明;优瑕玷：
1、能在保证最不失真的状况下只管紧缩图象文件的大小。 2、关于须要高保真的较庞杂的图象，PNG虽然能无损紧缩，但图片文件较大，不合适运用在Web页面上。
ES5和ES6
1、ES5和ES6的类
ES5的类
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function(){
return 'Hi, I am ' + this.name;
}
ES6的类
class Person {
constructor(name){
this.name = name;
}
sayHello(){
return 'Hi, I am ' + this.name;
}
}
typeof Person; //'function'
挪用的体式格局都是一致的：
var me = new Person('Yecao');2、ES5的继承和ES6的继承有什么区分？
- ES5的继承时经由历程prototype或组织函数机制来完成。ES5的继承实质上是先竖立子类的实例对象，然后再将父类的要领增添到this上（Parent.apply(this)）。
- ES6的继承机制完整差别，实质上是先竖立父类的实例对象this（所以必需先挪用父类的super()要领），然后再用子类的组织函数修改this。
ES6继承
class Father{
constructor(name){
this.name = name;
}
getName(){
console.log(this.name);
}
// 这里是父类的f要领
f(){
console.log('fffffffffffffffffffffff');
}
}
class Son extends Father{
constructor(name,age){
super(name); // HACK: 这里super()要在第一行
this.age = age;
}
getAge(){
console.log(this.age);
}
// 子类的f要领
f(){
console.log('sssssssssssssssssssssss');
}
}
var s1 = new Son('张一',12);
s1.getName();
s1.getAge();
console.log(s1.__proto__); // 为Son，不必修改
s1.f(); // 打印ssssssssssssss
s1.__proto__ = new Father(); // 转变s1的原型指向，改成Father
s1.f(); // 打印ffffffffffffff
console.log(s1.__proto__); // 为Father
ES5继承
function Father(name){
this.name = name;
}
function Son(name,age){
Father.call(this,name);
this.age = age;
}
Father.prototype.getName = function(){
console.log(this.name);
}
// 这里注重原型继承要在，实例化s1变量之前，假如要运用原型链上的要领的话,子类的原型是父类的一个实例
Son.prototype = new Father;
// 修改组织器，这里注重要将Son的组织器指向赋值为Son，不然，打印出来的s1是Father对象
Son.prototype.constructor = Son;
Son.prototype.getAge = function(){
console.log(this.age);
}
var s1 = new Son('李四',22);
console.log(s1); // Son {name:'李四',age:22}
s1.getName(); // 李四
console.log(Son.prototype.constructor); // Son
console.log(s1.constructor); // Son，假如不改正，则为Father
s1.getAge(); // 22
//HACK:这里经由历程__proto__这个s1实例的属性找到了Son的prototype，并为其增添了say的要领
s1.__proto__.say = function(){
console.log('hhhhhhhhhhhhhhhhhhhhhhhh');
}
s1.say() // 打印 hhhhhhhhhhhhhhh
// NOTE: __proto__这个属性是详细到某个实例化后的对象才有的属性，指向他所属的类的原型
console.log(new Son().__proto__); // 为Son对象2、ES6 Set和Map
Map和Set都叫做鸠合，然则他们也有所差别。Set常被用来搜检对象中是不是存在某个键名，Map鸠合常被用来猎取已存的信息。
- 1、set类似于数组，然则成员的值都是唯一的，没有反复的值。
Set 实例的要领分为两大类：支配要领（用于支配数据）和遍历要领（用于遍历成员）。
四个支配要领。
add(value)：增添某个值，返回Set构造自身。
delete(value)：删除某个值，返回一个布尔值，示意删除是不是胜利。
has(value)：返回一个布尔值，示意该值是不是为Set的成员。
clear()：消灭一切成员，没有返回值。
Set 构造的实例有四个遍历要领，可以用于遍历成员。
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：运用回调函数遍历每一个成员- 2、Set类似于数组，而Map就类似于键值对（Key, Value）；
它类似于对象，也是键值对的鸠合，然则“键”的局限不限于字符串，种种范例的值（包含对象）都可以看成键。
Map有size()属性，检察Map对象大小，set(key , value) , get(Key), delete(key) , has(key) ，clear()要领。
Map 构造原生供应三个遍历器天生函数和一个遍历要领。
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回一切成员的遍历器。
forEach()：遍历 Map 的一切成员。