js原生小小总结（二）
Day10
DOM
一.设置或访问元素节点中的属性(自定义属性)
1.获取自定义属性 getAttribute()
2.设置自定义属性 setAttribute()
3.删除属性 removeAttribute()
二.outerHTML/innerHTML/textHTML
三.childNodes/children
1.去除空白文本节点
function removeSpace(node){
var childs = node.childNodes;
for(var i = 0;i < childs.length;i ++){
if(childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)){
node.removeChild(childs[i]);
}
}
return node;
}
四.高级选项
parentNode : 父节点
previousSibling : 前一个兄弟节点
nextSibling : 后一个兄弟节点
firstChild: 第一个子节点
lastChild : 最后一个子节点
parentElementNode
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild
五.插入
insertBefore(新节点,指定的旧节点)
Day11
一.什么是事件对象?
当一个对象触发了所绑定的事件，所发生的一切详细信息都将保存在一个临时的地方，这个地方就叫做事件对象(相当于飞机上的黑匣子)。
二.如何获取事件对象?
1.ie : window.event
2.标准浏览器 : 给事件处理函数传递的第一个参数
3.兼容: 形参 || window.event
三.如何获取鼠标的编码值? event.button
1.标准浏览器 : 0 1 2
2.IE : 1 4 2
鼠标按钮兼容:
function getButton(evt){
var e = evt || window.event;
if(evt){
return e.button;
}else if(window.event){
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}
}
}
四.如何获取鼠标的各种坐标值?
1.相对坐标值 : event.offsetX/event.offsetY
2.可视区坐标值: event.clientX/event.clientY
3.绝对坐标值 : event.pageX/event.pageY
滑动轮高度 scrollTop = document.documentElement.scrollTop || document.body.scrollTop
页面高度 event.pageY = event.clentY + scrollTop
document.onscroll = function(evt){
var e = evt || window.event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
}
4.屏幕坐标值: event.screenX/event.screenY
var oDiv = document.querySelector('#box');
oDiv.onclick = function(evt){
var e = evt || window.event;
console.log("offsetX:" + e.offsetX + '\noffsetY:' + e.offsetY);
console.log("clientX:" + e.clientX + '\nclientY:' + e.clientY);
console.log("pageX:" + e.pageX + '\npageY:' + e.pageY);
console.log("screenX:" + e.screenX + '\nscreenY:' + e.screenY);
}
一.clientX/clientY属性介绍
鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,
即是以浏览器滑动条此刻的滑动到的位置为参考点,不随滑动条移动 而变化.
二.offsetX/offsetY属性介绍
鼠标点击位置相对于点击(鼠标所在对象区域)的坐标位置
三.pageX/pageY属性介绍
鼠标在页面上的位置,从页面左上角开始,
即是以页面为参考点,随滑动条移动而变化
四.扩展：screenX和screenY属性
鼠标点击位置到windows屏幕窗口的坐标位置
五.事件流(事件捕获——事件目标——事件冒泡)
兼容阻止冒泡
document.getElementById("btn").onclick = function(evt){
evt = evt || window.event;
alert(this.nodeName);
// evt.stopPropagation();//IE不兼容
// evt.cancelBubble = true;//IE
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
六.键盘事件
onkeydown/onkeyup keyCode
onkeypress
event.keyCode || event.charCode || event.which
### Day12
##### 一.如何阻止事件的默认行为?
###### 1.右键菜单 : oncontextmenu return false
###### 2.超链接:
event.preventDefault? event.preventDefault() : event.returnValue =
false
var oA = document.getElementById("aa");
oA.onclick = function(evt){
evt = evt || window.event;
evt.preventDefault();
evt.returnValue = false;
}
###### 3.拖拽 : ondragstart return false
<<span class="hljs-name" style="margin: 0px; padding: 0px;">style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
img{
width: 100px;
height: 100px;
position: absolute;
left :150px;
}
</<span class="hljs-name" style="margin: 0px; padding: 0px;">style>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">head>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">body style="height: 5000px;">
<<span class="hljs-name" style="margin: 0px; padding: 0px;">div id="box">
</<span class="hljs-name" style="margin: 0px; padding: 0px;">div>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">img src="img/1.jpg" id="img1"/>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
drag('box');
drag('img1')
function drag(id){
var ele = document.getElementById(id);
ele.onmousedown = function(evt){
var e = evt || window.event;
var disX = e.offsetX;
var disY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || window.event;
ele.style.left = e.pageX - disX + 'px';
ele.style.top = e.pageY - disY + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
}
//去掉拖拽的默认行为
document.ondragstart = function(){
return false;
}
}
}
</<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
##### 二.添加事件监听器
function addEventListener(obj,event,fn,boo){
if(obj.addEventListener){
obj.addEventListener(event,fn,boo);
}else{
obj.attachEvent('on' + event,fn);
}
}
##### 三.移除事件监听 器
function removeEventListener(obj,event,fn,boo){
if(obj.removeEventListener){
obj.removeEventListener(event,fn,boo);
}else{
obj.detachEvent('on' + event,fn);
}
}
##### 四.事件委托/事件代理
###### 1.事件委托的优点:==提高性能==
###### 2.原理 : ==事件冒泡==
<<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">ul>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>1</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>2</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>3</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>4</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>5</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">h2>hhhh222</<span class="hljs-name" style="margin: 0px; padding: 0px;">h2>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>6</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>7</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>8</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>9</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">li>10</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">ul>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
var oUl = document.getElementsByTagName_r('ul')[0];
oUl.onmouseover = function(evt){
var e = evt || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toUpperCase() === 'LI'){
target.style.background = 'red';
}
}
</<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
##### 五.事件
onclick
ondblclick
onmousedown
onmouseup
onmouseover : 移入事件
onmouseout :移出事件
onmouseenter : 移入事件(默认阻止事件冒泡)
onmouseleave : 移出事件(默认阻止事件冒泡)
onmousemove
onkeydown
onkeyup
onkeypress
onload
onblur
onfocus
onchange
onscroll
onresize
oncontextmenu
ondragstart
onsubmit
##### 六.拖拽
##### 七. offset
offsetWidth : width + padding + border
offsetHeight : height + padding + border
offsetLeft : 相对于父节点的left值
offsetTop : 相对于父节点的top值
Day13
一.什么是cookie?
存储在浏览器的文档
在本地的客户端的磁盘上以很小的文件 形式保存数据。
二.如何创建cookie?
==document.cookie = "key=value;[expires=日期对象;path='/']"==
三.cookie的特点:
==1.一个cookie的大小不超过4KB
2.一个域中的cookie数量在50条左右
3.cookie存在一定的风险==
Day14
一.什么是正则表达式?
匹配字符的一组规则
二.如何定义正则表达式?
1. /正则表达式/标志位
2. new RegExp("正则表达式",'标志位')
3.元字符 : 三三二三个一
三: {} [] ()
X{} : 表示括号前的一个或一组字符连续出现的次数.
X{m} : 表示括号前的一个或一组字符连续出现m次.
X{m,} : 表示括号前的一个或一组字符连续出现m至无限次.
X{m,n} : 表示括号前的一个或一组字符连续出现m至n次.
[] : 表示范围 (可以把正则的符号放进[]中解析为字符);
[\u4e00-\u9fa5]
() : 表示组
三: * + ?
X* : {0,}
表示*前的一个或一组字符连续出现0至无限次.
X+ : {1,}
表示+前的一个或一组字符连续出现1至无限次.
X? : {0,1}
表示?前的一个或一组字符连续出现0至1次.
二 : ^ $
^ : 用于正则的开头 : 表示定头
用于[]的开头: 表示取反 [^0-9]
$ : 表示定尾
三个一: . |
. : 表示模糊匹配任意一个字符
| : 表示或者
: 转义符 (将正则的符号放在\后,解析为字符串);
\d : 数字
\D : 非数字
\s : 空白符
\S : 非空白符
\w : 字母数字下划线
\W : 非字母数字下划线
\b : 表示边界
三.标志位
g : 表示全局
i : 不区别大小写
四.正则的方法
1.test() 返回boolean
2.exec() :返回数组 null
五.字符串的方法
1.match() :返回数组 null
2.search() : 返回下标值, -1
3.replace()
六.exec与match的区别
exec是正则调用,参数是字符串
match是字符串调用,参数是正则表达式
<<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
var str = 'how do you do';
var re = /o/;
console.log(re.exec(str));
console.log(str.match(re));
var str = 'how do you do';
var re = /o/g;
console.log(re.exec(str));
console.log(str.match(re));
//全局匹配时,exec无效
var str = 'how do you do';
var re = /(o).*(o)/;
console.log(re.exec(str));
console.log(str.match(re));
//()有几个就代表有几个相应的匹配个数，整体也是一个
var str = 'how do you do';
var re = /(o).*(o)/g;
console.log(re.exec(str));
console.log(str.match(re));
Day15
一.ES6
1. bind()/call()/apply()
==bind() : 返回一个函数==
==call()/apply() :返回一个对象==
2. JSON : 网络数据传输格式
JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。
JSON的优点：
- 基于纯文本，跨平台传递极其简单
- JS原生支持，后台语言几乎全部支持
- 轻量级数据格式，占用字符数量极少，特别适合互联网传递
- 可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的
- 容易编写和解析，当然前提是你要知道数据结构
1.==[]==
2. =={"key" : "value","key" : "value"}==
//原生对象 : {key : 'value',"key" : "value",key : "value"}
【注】
==JSON 的健和值必须加双引号，数字可不加，不可加单引号。==
一个JSON中只能有一个JSON数据。[ ]
可以在[ ] 中写多个 { }。
3. JSON.parse()/JSON.stringify() IE8以下不兼容
==JSON.parse()== : 将json字符串转为json对象
==JSON.stringify()== :将json对象转为json字符串
var str = '{"name" : "张志林","age" : 18}';
//转为json对象
//eval_r() : 存在风险
// var json = eval_r('(' + str + ')');
// console.log(json.name);
var json = JSON.parse(str);
json.address = "青岛";
//转为json字符串
str = JSON.stringify(json);
console.log(str);
4.let/const
1> let声明的变量不能做变量提升
2> 同一个作用域中不能重复声明一个变量
3> let声明,会产生块级作用域
注: for循环有两个作用域,for循环本身是一个块级作用域,for循环的{}又是for循环的子级作用域
4> let声明的全局变量不再是window的属性
const 好处: 一改全改
【注】const
使用const命名是为了当有大量重复常量时，方便修改
常量要求全大写，
当常量是数组时，可以修改数组的元素，地址不可修改。
5.变量的解构赋值
[] // 返回一个数组
可以直接对应赋值;
++交换变量的值[x, y] = [y, x];++
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
{} // 返回一个对象
++从函数返回多个值,传参可不按顺序++
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
;
// var a = 3;
//// ;
// let b = 4;
// var a = 5;
// var a = 6;
// b = 8;
// {
// let a = 3;
//
// }
// ;
// for(let i = 1;i < 5;i ++,console.log(i)){
// let i = 8;
// console.log(i);
// }
// const G = 10;
// const ARR = [1,2,3,4];
// ARR[0] = 10;
// console.log(ARR[0]);
// let a = 3;
// ;
// let b = 3 * G;
// let [a,b,c] = [1,2,3];
// let [q,[w,[e],r],t] = [1,[2,[3],4],5];////不写的话显示,undefined
// [a,b] = [b,a];
// console.log(a,b,c);
// let {a,b=9,c} = {c : 8,a : 2};
// console.log(a,b,c);
function fn({a = 1,b = 2,c = 3}){
return [a,b,c];
}
let [x,y,z] = fn({a : 3,c : 5,b : 4});
console.log(x,y,z);
6.字符串的扩展方法
1> includes() :
判断子串是否在父串中包含,如果有,返回true,没有,返回false
2> startsWith():
判断子串是否在父串的开头部分,如果在,返回true,不在,返回false
3> endsWith() : 判断子串是否在父串的结尾部分,如果在,返回true,不在,返回false
4> repeat() :
重复字符串
注: 如果<= -1 报错
如果是小数 : 自动取整
如果是字符串:自动转为数字,如果转不了数字的,转为NaN,NaN按0算
var str = "how do you do";
console.log(str.includes('do',str.length));
console.log(str.startsWith('do',4));
console.log(str.endsWith('do',5));
7.生成器函数:解决异步产生的问题
==异步:同时进行==
==同步:执行完一个,再执行一个==
//生成器函数
*指针函数,按照指针一步一步执行,每次要点一次 fn().next()
function * fn(){
yield setTimeout(()=>{
alert('1');
},3000);
yield setTimeout(()=>{
alert('2');
},2000);
yield setTimeout(()=>{
alert('3');
},1000);
}
var me = fn();
console.log(me.next())
8.箭头函数 =>
++唯一好处: this自动指向所在函数外部的对象++
var fn = ()=>{
// var a = 3;
// var b = 3;
// return a + b;
// }
// ;
// var fn1 = (a,b)=>a + b;
// ;
document.onclick = function(){
//;
// var that = this;
setTimeout(()=>{
alert(this);
},5000)
}
9.set
1>自动去重
let set = new Set([1,2,1,2,3,2,1,1,4]);//构造一个新的set
console.log(set.size);//获取集合长度
console.log([...set]);//转成数组
2>添加元素
set.add('a');
3>删除元素
set.delete(1);
4>判断是否包含某个元素
console.log(set.has(2));
5>清空整个set
// console.log(set.clear());
// console.log(set);
6>遍历
//keys
//values
//entries
//forEach()
for(let key of set.keys()){
console.log(key);
}
for(let key of set.values()){
console.log(key);
}
for(let [key,value] of set.entries()){
console.log(key,value);
}
set.forEach(function(value,key,set){
console.log(key +'=>' + value);
})
10.
数组
set
原生 对象
map
// var a = {x : 2},b = {x : 3},c = {};
// ;
// c[a] = 7;// '[object Object]'
// c[b] = 8; //'[object Object]'
// console.log(c);
// var obj = {};
// obj[[]] = 3;
// obj[[]] = 4;
// console.log(obj);
//原生对象：所有key默认都会自动 转为字符串
//map {name : '张三',[] : '1',[] : '2'}
let map = new Map([
[1,2],
[[],3],
[[],4],
[{},5],
[{},6],
['a',7]
]);
// console.log(map);
// ;
// console.log(map.size);
//1.添加元素
map.set('b',8).set('c',9);
//2.访问元素
// console.log(map.get('b'));
//3.删除元素
// console.log(map.delete('b'));
// console.log(map.delete([]));
//4.清除map中所有的元素
// map.clear();
//5.判断是否包含某个key的value
// console.log(map.has('c'));
// console.log(map);
//6.遍历map
//keys
//values
//entries
//forEach()
for(let key of map.keys()){
console.log(key);
}
for(let value of map.values()){
console.log(value);
}
for(let [key,value] of map.entries()){
console.log(key,value);
}
map.forEach(function(value,key,map){
console.log(key,value);
})
11.Symbol : 保证变量中的值是唯一的.
var str1 = Symbol('hello');
var str2 = Symbol('hello');
// console.log(str1 == str2);
// console.log(typeof str1);
var obj = {};
obj[str1] = 1;
obj[str2] = 2;
console.log(obj);
12.class extends
// Father
class Father{
//默认的方法
//构造器
constructor(name,age){
//属性
this.name = name;
this.age = age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
class Son extends Father{
constructor(name,age){
//调用父类的构造器方法
super(name,age); //超类，基类，父类
}
}
var son = new Son('张三',18);
console.log(son.name);
console.log(son.showName());
class例子,拖拽
html页面
<<span class="hljs-name" style="margin: 0px; padding: 0px;">html>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">head>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">meta charset="UTF-8">
<<span class="hljs-name" style="margin: 0px; padding: 0px;">title></<span class="hljs-name" style="margin: 0px; padding: 0px;">title>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">style type="text/css">
body{
height: 5000px;
}
#fa{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#so{
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 130px;
}
</<span class="hljs-name" style="margin: 0px; padding: 0px;">style>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">head>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">div id="fa">
父类：无边界拖拽
</<span class="hljs-name" style="margin: 0px; padding: 0px;">div>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">div id="so">
子类：有边界拖拽
</<span class="hljs-name" style="margin: 0px; padding: 0px;">div>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/;"></<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/;"></<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
<<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
new Drag('fa');
new Subdrag('so');
</<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">html>
父类
class Drag{
constructor(id){
this.ele = document.getElementById(id);
this.ele.onmousedown = function(evt){
this.fnDown(evt);
}.bind(this);
}
fnDown(evt){
var e = evt || window.event;
this.disX = e.offsetX;
this.disY = e.offsetY;
document.onmousemove = (evt)=>{
this.fnMove(evt);
}
document.onmouseup = this.fnUp;
}
fnMove(evt){
let e = evt || window.event;
this.ele.style.left = e.pageX - this.disX + 'px';
this.ele.style.top = e.pageY - this.disY + 'px';
}
fnUp(){
document.onmousemove = null;
}
}
子类
class Subdrag extends Drag{
constructor(id){
super(id);
}
fnMove(evt){
let e = evt || window.event;
let left = e.pageX - this.disX;
let top = e.pageY - this.disY;
//设置边界
if(left <= 0){
left = 0;
}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
left = document.documentElement.clientWidth - this.ele.offsetWidth;
}
if(top <= 0){
top= 0;
}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
top = document.documentElement.clientHeight - this.ele.offsetHeight;
}
this.ele.style.left = left + 'px';
this.ele.style.top = top + 'px';
}
}
