jquery-概念

最新推荐文章于 2025-06-26 11:34:08 发布

原创最新推荐文章于 2025-06-26 11:34:08 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

JQUERY 专栏收录该内容

1 篇文章

订阅专栏

手机移动端
安卓和ios的兼容
标签的设置
vue的生命周期、指令、父子兄弟组件传值、vuex、router、路由传值、vue的底层原理、mixin
$nextTick的实现：Promise
MutationObserver
setTimeout

js中有多少种模式
单列模式
**************************************************
数组的操作
shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.shift(); //a:[2,3,4,5] b:1
unshift:将参数添加到原数组开头，并返回数组的长度
var a = [1,2,3,4,5];
var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7
pop:删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.pop(); //a:[1,2,3,4] b:5
push:将参数添加到原数组末尾，并返回数组的长度
var a = [1,2,3,4,5];
var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7
concat:返回一个新数组，是将参数添加到原数组中构成的
var a = [1,2,3,4,5];
var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]
splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...
var a = [1,2,3,4,5];
var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]
var b = a.splice(0,1); //同shift
a.splice(0,0,-2,-1); var b = a.length; //同unshift
var b = a.splice(a.length-1,1); //同pop
a.splice(a.length,0,6,7); var b = a.length; //同push
reverse:将数组反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1]
sort(orderfunction):按指定的参数对数组进行排序
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]
slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5];
var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5]
join(separator):将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
var a = [1,2,3,4,5];
var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5"

indexOf()和 lastIndexOf()
indexOf()：从头开始（匹配值，开始位置）
lastIndexOf：从尾开始（匹配值，开始位置）
forEach()：arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
map():返回操作之后的数组
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
filter:返回过滤的数组
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
every()：是否数组所以项都满足条件
var arr3 = arr.every(function(x) {
return x < 3;
});
some()：某项满足
reduce()和 reduceRight()：迭代数组，返回最终值
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10（初始值）);

var value = obj[key]; > for ( ; ; ) > for ( in )

**************************************************
ajax的状态值
if(ajax.readyState == 4 && ajax.status == 200)
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了

跨域：jsonp、Access-Control-Allow-Origin document.domain（设置二级域名相同）postMessage

//前端路由
单页面应用：url变化引起UI更新（无需刷新页面）
hash(#及以后部分)：通过hashchange
history:浏览器的前进后退触发popstate事件（但是pushstate/replaceState或<a>改变url不会触发，需要监听这些事件）

node 启服务 node app.js(配置端口号) 链接数据库（const pool = mysql.createPool($util.extend({}, $conf.mysql));）

事件冒泡（blur、focus、load、unload除外）
div -> body -> html -> document
子元素和父元素两者都有点击事件，如果点击子元素，那么父元素也会执行

阻止冒泡
child.onclick = function () {

if(event && event.stopPropagation){
// w3c标准阻止冒泡机制

event.stopPropagation();

}else{
// IE系列 IE 678

event.cancelBubble = true;

}

alert("点击了按钮");

};

事件捕获（冒泡反过来）

<div id="A" style="width:300px; height:300px; background:red;position:relative;">
<div id="B" style="width:200px;height:200px; background:green;position:relative;top:50px;margin:auto;">
<div id="C" style="width:100px;height:100px; background:blue;position:relative;top:50px;margin:auto;"></div>
</div>
</div>
var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");
// 目标（目标阶段的处理函数，先注册先执行）
C.addEventListener('click',function(){alert("Ct");},true);
C.addEventListener('click',function(){alert("Cf");},false);
// 事件冒泡
A.addEventListener('click',function(){alert("Af");},false);
B.addEventListener('click',function(){alert("Bf");},false);
// 事件捕获
A.addEventListener('click',function(){alert("At");},true);
B.addEventListener('click',function(){alert("Bt");},true);
</script>
//当点击C （子元素）时（蓝色），输出At Bt Ct Cf Bf Af

js创建对象
1.json创建
2.工厂模式（不能知道返回的类型）

function createStudent(name,sex,grade){
var o = new Object();
o.name = name;
o.sex = sex;
o.grade = grade;

o.sayName = function(){
console.log(this.name);
}
return o;
}
var s1 = createStudent('Claiyre','famale',1);
工厂模式就是将创建对象的语句放在一个函数里，通过传入参数来创建特定对象，最后返回创建的对象。
3.构造函数
function Student(name,sex,grade){
this.name = name;
this.sex = sex;

Student_1.prototype.name = 'Claiyre';（通过原型赋值避免浪费）
this.grade = grade;
this.sayName = function(){
console.log(this.name);
}
}
var s2 = new Student('孙悟空'，'male',2);

*************************************************
兼容性

*************************************************
JS
1.内置类型
内置类型包含6中基本类型（string、number、null、undefined、symbol(不能new，类似于string，独一的值)、boolean）和对象

*************************************************
箭头函数
1.匿名函数的简写
2.箭头函数中的this对象（根据词法作用域）指向外层的obj（以前的hack写法 var_this=this不需要）
3.箭头函数中的this已经根据词法作用域绑定，所以call()、apply()无法进行绑定（第一个参数this无效）
面向对象中的继承：子类继承父类的方法和属性
通过函数名调用方法将函数中的this指向某个对象
　 ② 使用call/apply/binb.
1：定义父类
funtion Parent(””,””,””){}
2：定义子类
function Son(””,””,””){}
3：在子类中通过call方法/apply/binb方法去调用父类。
function Son(){
Parent.call(this,””,””,””);// Parent.apply(this,[””,””,””]);//Parent.binb(this)(””,””,””);

}

4.使用for循环赋值

4.箭头函数中的this指向定义的那个对象，而不是使用时所在的那个对象
5.不能当做构造函数使用（new一个对象进行实例化，否则会抛出错误）
6、不可以使用arguments对象，该对象在函数体内不存在，如果要用的话，可以用rest参数代替；
7、不可以使用yield命令，箭头函数不能用作Generator函数；

*************************************************

*************************************************
*************************************************
浏览器
1.事件触发阶段
document.getElementById("dddd").addEventListener("tap", function() {

}，false/true);
a.事件捕获阶段：当目标元素触发事件，从顶级对象发出事件流找到目标元素
b.事件目标处理函数：函数的处理
c.事件冒泡:从目标元素往回寻找节点绑定的同名事件的过程

2.跨域
a.jsonp
function jsonp(url, jsonpCallback, success) {
let script = document.createElement('script')
script.src = url
script.async = true
script.type = 'text/javascript'
window[jsonpCallback] = function(data) {
success && success(data)
}
document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
console.log(value)
})
b.CORS
服务端设置Access-Control-Allow-Origin
c.document.domain
适用于父域名相同
打开id.qq.com，f12打开控制台，window.open页面: www.qq.com，同样访问返回的window对象的document属性，
手动设置一下id.qq.com页面的document.domain，设置为qq.com
d.postMessage
// 发送消息端
window.parent.postMessage('message', 'http://test.com')
// 接收消息端
var mc = new MessageChannel()
mc.addEventListener('message', event => {
var origin = event.origin || event.originalEvent.origin
if (origin === 'http://test.com') {
console.log('验证通过')
}
})
3.存储

5.渲染部分
a.处理html创建DOM
b.处理CSS创建CSSOM（会阻塞渲染，保持层级扁平：少目录结构，少模块层次）
c.将DOM和CSSOM合并生成完整的渲染树
d.根据渲染树计算每个节点的位置
e.通过GPU(图形处理器)渲染页面显示在页面上
5-1：load:DOM、CSS、JS全部加载完毕
DOMContentLoaded：初始的HTML加载完毕
5-2：减少重绘（不影响布局：颜色）和回流（改变布局）
a.使用visibility代替display
b.transform: translate(50px,100px); 代替top
c.不要把DO节点的很属性值放在循环当中
d.不要使用table布局
e.不要使用动画
6.性能

*************************************************
*************************************************
*************************************************
*************************************************