小仙女是不喝酒的

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

js中的报错

xxx is not defined

表示xxx未定义       没有var   var是定义声明
undefined

声明了但是没有赋值

检测数据的基本类型

    #### typeof

console.log(typeof NaN) //number ​ var a = []; ​ var b = {}; ​ var c = null; ​ console.log(typeof c); //object ​ console.log(typeof b); //object ​ console.log(typeof a); //object

object.p rototype.tostring.call()

var a = []; ​ var b = {}; ​ var c = null; ​ console.log(Object.prototype.toString.call(a)); //[object array] ​ console.log(Object.prototype.toString.call(b)); //[object object] ​ console.log(Object.prototype.toString.call(c)); //[object null]

运算符

    #### 算数运算符
  ##### 双目运算符:运算的时候必须要有两个数据才能进行计算

+ - * / %
          注:1.当两边的数据全是纯数字的时候全部双目运算符进行正常的运算
      2.只要出现了一个数据是字符串则只有+会进行拼接,(例 ‘1’+ 1 == 11)其他的运算会把字符串转换成数字进行计算,例:(“1”- 1 == 0)
    2》单目运算符:运算的时候只需有一个数据
++ --
        1.var nu = 10;
    var res = nu++;   //先赋值再运算
    console.log(nu);   //11
console.log(res); //10

2.var nu = 10; var res = ++nu; //先运算再赋值 console.log(nu); //11 console.log(res); //11 关系运算符 == 和 ===的区别:但关系运算符是==的时候判断只判断数值,当是===的时候判断的时候是数值加数据类型 var a = "1"; var b = 1; if(a == b){ console.log(true); }else{ console.log(false); } //true var a = "1"; var b = 1; if(a === b){ console.log(true); }else{ console.log(false); } //false 数据类型的转换:强制类型转换最终都转成了纯数字,强制转换成数值型的时候不能将纯数字之外的字符转换,只要出现非纯数字则显示NaN,其他都可以 console.log(Number("112")); //112 console.log(Number("11a")); //NaN console.log(Number(111)); //111 console.log(parseInt("12.222")); //12 console.log(parseInt("12.22a")); //12 console.log(parseInt("12aaa")); //12 console.log(parseInt(12)); //12 console.log(parseFloat("12.222")); //12.222 console.log(parseFloat("12.22a")); //12.22 console.log(parseFloat("12aaa")); //12 console.log(parseFloat(12)); //12

函数

重复引用

选择性应用

影藏内部细节

函数定义的方法

function a (){

}

var a = function(){

}

构造函数的写法

var 函数名 = new Function("参数",“执行的代码”);

函数的特点

不能自执行需要调用 可以重复使用

函数的调用方法

事件驱动 :用事件调用这个函数

 

自调用 :自己调用一次

参数

形参

实参

function fn( x ,y){         //形参

document.write("<table>")

for(var i = 0;i < x;i++){

•    document.write("<tr>");

•    for(var j = 0;j < y;j++){

•        document.write("<td></td>")

•   }

•        document.write("</tr>")

}

•    document.write("</table>")

}

fn(2,4)               //实参

// 1.形参和实参是一一对应的,当形参的数值多余实参,则对应到一一对应到最后,剩余的那个形参则会显示undefined

//2.当实参的数值多余形参,则一一对应,程序会运行,没有影响

函数的返回值

1,函数一般有一个返回值

2,return只能出现在函数中

3,有return则直接返回

4,当一个函数没有返回值得时候则为undefined

// 编写一个函数,生成4位数的验证码

function yanzh(){

•    var str = "";

•    for(var i = 0; i < 4;i++){

•        str += parseInt(Math.random() * 10);

•   }

•    return str;

}

console.log(yanzh());

// 函数功能:求整数num从右边开始第k为的值,如果没有则返回0

function digit(num, k){



•    for(i = 1;i<k;i++){

•        num = num / 10;

•   }

•    if(parseInt(num) == 0){

•        return 0;

•   }else{

•        num = parseInt (num % 10);

•        return num;

•   }

}

 

arguments

存放函数内部所有的参数

通过下标取出里面存放的数据

作用

1,可以取出很多个数字中 某个下标的数字

function fn(){

•    return arguments[5];

}

2,可以计算出好几个数字的和

function fn(){

•    var sum = 0;

•    for(var i= 0;i < arguments.length;i++){

•        sum +=arguments[i];

•   }

•    return sum;

}

console.log(fn(7,8,8,7,2,3,7,43,3))

 

作用域

起作用的一个范围,

函数的运行是从外到内的运行

var a = 10;
function fn(){
   console.log(v);
}
console.log(a);
fn()
//浏览器会先打印出10然后再打印出v is not defined

 

function fn(){
   var a = 10;
   console.log(a);
}
console.log(a);
fn()
//浏览器直接打印 a is not defined

作用域链

函数内部访问函数外部的这种机制是当前作用域链,父级作用域链,全局作用链这个过程叫做作用域链。

数组

遍历数组中的所有值

1.for循环
var arr = [1,3,4,5,6,2,2,6,7];
for(var i = 0;i < arr.length;i++){
  console.log(arr[i]);
}
2,一个简单的点名函数
var arr = ["原卫强","原卫强3","原卫强6","原卫强4","原卫强9","原卫强0"];
console.log( arr[parseInt(Math.random()*arr.length)] );

数组的api

1,push:在数组的最后面添加元素

var arr = [1,3,4,5,6,2,2,6,7];
arr.push(23,34,34)
console.log(arr);

2.pop:取出数组的最后一个元素

3.unshift:从数组的头部(下标为0的地方开始)添加元素

4.shift:取出数组第一个(下标为0的元素)元素

5,sort

1,当数组里面的元素都是个位没有十位的时候就可以直接用arr.sort()这种方法可以排序,但是出现十位的时候就必须得用函数的方法如2
var arr = [1,3,4,5,6,0,2,2,6,7];
arr.sort();
2.arr.sort(function(val1,val2){
          val1-val2 //当前的顺序是从小到大
          val2-val1 //当前的顺序的从大到小
          })

6.reverse:数组可以反转

把你自己写的数组里面的元素全部反转过来

7.concat:数组的拼接

var arr1 = [],var arr2 = [

var3 = arr1.concat(arr2) //arr3得到的就是数组arr1和arr2的全部元素

8,join:把数组中的元素以自己想要的符号进行拼接

var arr = [11,3,4,5,6,10,2,2,6,7];
console.log(arr.join(-)); //11-3-4-5-6-10-2-2-6-7          

9.arr.toString:把数组转换成字符串

var arr = [11,3,4,5,6,10,2,2,6,7];
console.log(arr.toString()) //11,3,4,5,6,10,2,2,6,7

10.arr.slice(start,end):从下标为start开始(不包括start)到end结束(包括end)把这之间的元素取出来放到一个新元素中,原数组不改变

11.arr.splice(start,delatecount,arr):把原数组里面的元素从start(包括start)开始删除delatecount个,然后把arr加入到删除的位置上

12.indexof():数组去重,当数组中没有找见想要的元素时输出-1,当找见时输出的是该元素的下标。查找元素是从前往后查。

13.lastIndexof():数组去重,当数组中没有找见时输出的是-1,找见元素输出的是下标,查找元素是从后往前查找。


数组的api,api后面接的是一个返回函数

14.forEach:数组循环遍历,没有返回值,改变的是原数组

arr.api(function(value,index,arr)){

}

15.map:映射,映射到一个新的数组里,不改变原素组,有返回值

arr.api(function(value,index,arr)){

}

16.reduce:累计器,有返回值,不改变原素组,进行一些加减乘除之间的运算

arr.reduce(function(acc,value,index,arr)){

return acc + value //元素全部的相加

return acc - value //元素之间全部相减

return acc * value //元素之间全部相乘

return acc / value //元素之间全部相除

}

17.filter:过滤,有返回值,返回新数组

arr.filter(function(value,index,arr)){

return value > 3 ;

}

es6新增数组

1.find:遍历循环,查找需要的元素,因为foreach没有返回值意思就是不能终止和跳转,find有返回值,可以终止和跳转。

2.findIndex:查找数组返回的是下标

3.some:查找数组中的元素,有一个为真则返回true

4.every:查找数组中的元素,元素都为真时则返回true,有一个为假则返回为假

字符串

1.charAt(下标):通过下标找到相应的元素。例如可以在一段数组中找出小写字母或者大写字母

 var str = "xnfufheifhJOJDODJ"

       //   console.log(str.charAt(5));

•           var dstr = '';

•           for(var i = 0;i < str.length; i ++){

•              if(str.charAt(i) >= "A" && str.charAt(i) <= "Z"){

•                  dstr = str.charAt(i);

•                  console.log(dstr);

            }

          }

2.str.indexof():字符串的去重

3.str.lastindexof()

4.str.substring(start,end):从start开始,包括start到end结束(不包括end),取出里面的元素发到一个新的字符串中,不影响原数组。

5.str.slice(start,end):和str.substring(start,end)用法一样,不一样的是slice可以为负数,当是负数的时候则元素从后往前查找。

6.str.substr(start,length):从start开始(包含start)length个元素。不影响原素组

7.str.split():把数组按一定的形式转换成数组

8.str.replice(old,new):字符串的替换,每次只能替换一次,不改变原字符串

 

对象

对象的遍历

var obj = {
   name:"nijap",
   age:20,
   fom:"yaoshi"
}
for(val in obj){
   console.log(val); //name age fom
   console.log(obj[val]); //nijap 20 yaoshi
}

时间对象

getFullYear() 获取年

getMonth() 获取月

getDate() 获取号

getDay() 获取周

gethours() 获取时

getMinutes() 获取分

getSeconds() 获取秒

封装函数:显示当前的年月日时分秒
function print(d,sign){
   sign == sign ? sign : "/";
   return d.getFullYear() + sign + d.getMonth() + sign + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() ;
}
document.write(print(date,"*"))

定时器 在设定的时间一直干这件事

setInterval(参数1,参数2) 参数1是一个回调函数

clearInterval() 清除定时器

延时器 延迟设定 的时间就干一次

setTimeout(function(){

过一段时间执行里面代码

},1000)

window对象

浏览器上面的方法,例如:alert.....

bom对象

bom是操作浏览器的方法

history对象
location对象

location.href 可以进行页面的跳转

location.reload() 进行页面的刷新

location.reload(true) 清除缓存之后进行刷新

navigator对象

navigator.userAgent 可以查出浏览器的版本,可以检测出是电脑还是手机

当你去搜索一个网址的时候经过哪些过程

1.首先进行dns解析

2.找到响应的服务器

3.tcp的三次握手

4.找到入口文件

5.解析文件

6.tcp的四次挥手

7.返回资源文件

window事件

window.onload = function(){

等待页面资源加载完之后在加载onload里面的代码

}

window.onscroll(){

当滚动条滚动的时候触发里面的代码

}

获取滚动条到顶部的高度

元素.scrolllTop

dom

获取元素

doument,getElementById()

doument.getElementByName() 获取的是节点的集合,获取的是一个伪数组

doument.getElementByTagName() 获取的是一个集合

doument.getElementsByclassName()

doument.queryselector() 取出一个

doument.querySelectAll() 取出全部

parenNode 返回父节点

节点的创建

doument.creatElement()

添加节点

appendChild(需要添加的节点)

复制节点

cloneNode(true) 当括号里面为true时为克隆

删除节点

父节点.removeChild(子节点)

节点.remove 自己删除节点

childNodes 包括元素节点,文本节点

children 只包括元素节点

输入想要的列数和行数,点击打印可以打印出,然后每行后面有删除按钮,点击可以删除本行
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       tr,
       td {
           border: 1px solid red;
           width: 50px;
           height: 20px;
           text-align: center;
      }

       button {
           width: 50px;
           height: 20px;
           border: 1px solid olive;
      }
   </style>
</head>

<body>
   <lable class="val">请输入行数</lable>
   <input type="text" class="put1">
   <lable class="val">请输入列数</lable>
   <input type="text" class="put2">
   <button class="btn">打印</button>
   <script>
       var
           Iput1 = document.querySelector(".put1"),
           Iput2 = document.querySelector(".put2"),
           But = document.querySelector(".btn");
       But.onclick = function () {
           var val1 = Iput1.value;
           var val2 = Iput2.value;
           // console.log(val1,val2)
           var Otable = document.createElement("table");

           for (var i = 0; i < val1; i++) {
               var Otr = document.createElement("tr");
               var Obutton = document.createElement("button");
               //   按钮里面加入删除的字样
               Obutton.innerHTML = '删除';
               Obutton.onclick = function () {
                   //   删除此行tr
                   this.parentNode.remove();

              }
               for (j = 0; j < val2; j++) {
                   var Otd = document.createElement("td");
                   // 把td放到tr中
                   Otr.appendChild(Otd);
                   Otr.appendChild(Obutton);
                   // tr中填满随机数
                   Otd.innerHTML = parseInt(Math.random() * 99 + 1);
                   // Otd.style.background = Math.randomColor();
              }
               // 把tr放到table中
               Otable.appendChild(Otr);
          }
           // 把table放到浏览器窗口中
           document.body.appendChild(Otable);
      }

   </script>
</body>

</html>
选项卡模板
<style>
       * {
           margin: 0;
           padding: 0;
      }

       div {
           width: 500px;
           height: 30px;
           background: #676767;
           margin: 20% auto 0;
      }

       span {
           width: 120px;
           float: left;
           background: #12cccc;
           line-height: 30px;
           margin-right: 20px;
           text-align: center;
           cursor: pointer;
      }

       section {
           width: 500px;
           height: 500px;
           background: #cccccc;
           margin: auto;
           position: relative;

      }

       article {
           width: 500px;
           line-height: 500px;
           text-align: center;
           background: chocolate;
           font-size: larger;
           position: absolute;
           display: none;
      }

      .active {
           background: rgb(81, 81, 105);
      }

      .activeBox {
           width: 500px;
           line-height: 500px;
           text-align: center;
           background: chocolate;
           font-size: larger;
           position: absolute;
           display: block;
      }
   </style>

<body>
   <div>
       <span class="active">one</span>
       <span>two</span>
       <span>three</span>
   </div>
   <section>
       <article class="activeBox">content1</article>
       <article>content2</article>
       <article>content3</article>
   </section>


   <script>
       // 获取每一个span
       //   var Span = document.querySelectorAll("div span");
       var
           Span = document.querySelectorAll("span"),
           Article = document.querySelectorAll("section article");
       //   循环每一个span设置点击事件
       for (var i = 0; i < Span.length; i++) {
           // 记录下标
           Span[i].index = i;
           Span[i].onclick = function () {

               //   清除全部的点击事件
               classname();
               // 给点击事件添加class类名
               this.className = "active";
               Article[this.index].className = "activeBox";
          }
      }
       //   清除事件
       function classname() {
           for (var k = 0; k < Span.length; k++) {
               Span[k].className = '';
               Article[k].className = '';
          }
      }
   </script>
</body>

offsetwidth offetHeight offetLeft offetTop

offetWidth offetHight 计算的值包括padding和border

offetLeft offetTop 计算的值包括margin

clientWidth clinetHeight clientLeft clientTop

clientWidth clinetHeight 包括padding

clientLeft clientTop 包括margin

获取屏幕的宽高
console.log(document.documentElement.clientWidth);

console.log(document.documentElement.clientHeight);
在屏幕中随机显示图片当点击时图片消失
// 获取屏幕的宽高减去放置的图片的大小放置图片跑出屏幕
       var vw = document.documentElement.clientWidth - 30;
       var vh = document.documentElement.clientHeight - 30;
       // 设置一个定时器,每五秒多出一张图片
       setInterval(() => {
           var img = document.createElement('img');
           img.src = "./img/1.jpg";
           img.style.position = 'absolute';
           // 因为获取屏幕的只是数值,所以图片的位置要加上像素
           img.style.left = Math.random() * vw + 'px';
           img.style.top = Math.random() * vh + 'px';
           // 点击使图片移除
           img.onclick = function(){
               this.remove();
          }
           // 要不创建的图片一定放到屏幕body中,不然图片不会显示
           document.body.appendChild(img);
      }, 5000);

在一个元素之前添加节点

父节点.insertbefore(新添加的节点,指定之前添加元素的节点)

<body>
<section>
   <div></div>
   <div></div>
</section>
   <script>
       var
           Se = document.querySelector("section"),
           Div = document.querySelectorAll("div"),
           P = document.createElement("p");
           Se.insertBefore(P,Div[0]);
   </script>
</body>

所得的结果就是
<section>
   <p></p>
   <div></div>
   <div></div>
</section>

文档碎片

var fragment = doument.creatDoumentFragment()

文档碎片就相当于一个盒子,把所写的一些属性暂时放到他里面,当用的时候再同。

为什么有要用文档碎片?

用文档碎片也是为了提高性能,可以减少回流与重绘,减少了回流的次数

回流与重绘

当你写的代码展现在页面的时候发生的步骤:首先浏览器会生成一个dom树,

![](D:\新建文件夹 (桌面)\捕获.PNG)

回流:当布局发生变化,例如:元素的大小,显示与影藏这些都会发生一次回流,页面的生成一定会发生一次回流,页面第一次生成就是回流。

重绘:当元素的颜色发生变化的时候,没有布局发生变化。

回流必定会引起重绘,但重绘不一定会引起回流

事件

鼠标事件

onclick 点击 ondblclick 双击 oncontextmenu 右击 onmouseover onmouseouot onmouseenter onmouseleave 鼠标的移入,移出 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起

事件对象

事件是浏览器里的东西,所以事件是有兼容问题的

事件源.事件 = function(e){

e = e||window.event; 浏览器的兼容问题

//事件处理机制

}

事件类型

e.type获取的事件类型是没有on 的

组件之间的传值(组件通信)

父传子props

子传父$emit

非父子之间的通信eventbus

路由之间的传值

router-link路由导航

父组件传值
<router-link to='/路由跳转的地址/传的参数'>
子组件接收
this.$route.params

调用$router.push实现路由传参

父组件传值
med(传递的参数){
   this.$router.push({
path:'传参的地址/${传递的参数}'
  })
}
子组件接收
this.$route.params

通过路由中的name匹配路由,再根据params传递参数

父组件传递
this.$router.push({
   name:'B',
   params:{
       text:'传递的参数'
  }
})
子组件接收
this.$route.params.text

 

通过query传值

传值的页面
this.$router.push({
path:'跳转的页面'
   query:{
   text:传递的值
}
})
接收的页面
this.$route.query

vuex

vuex是什么

vuex是专门为vue服务,用于管理页面的数据状态,提供统一的数据操作生态系统,就相当于数据库mongoDB,mysql这些,任何组件都可以存取仓库中的数据。

vuex的数据传递流程

当组件中数据进行修改的时候需要调用dispatch触发action里面的方法commit来触发mutation来进行数据的修改,mutation里面有一个state参数,这样就可以state数据修改,修改完毕传给页面,页面随之发生变化。

vuex里面的属性

state getter mutation action module

vuex中state特性

vuex就是一个仓库,仓库里面有很多对象,state就是数据源存放地,就相当于vue对象里面的data

vuex中getter的特性

getter是一个计算属性,对state进行计算操作,getters可以在多个组件之间复用

vuex中的mutation特性

action类似于mutation,但是action提交mutation而并不是直接变更状态,action可以包含任意异步操作

xss攻击

被攻击的网站通常有两个特征;

1.具有表单元素。2.网站有漏洞,也就是说可以往表单元素插入存在js脚本的html元素

黑客攻击网站的过程:

1.黑客在一个博客网站注册并登陆。2,黑客在博客中写入了带有恶意js的html,这段js脚本会把访问博客的用户cooki发至黑客的服务器。3,黑客提交博客,网站存在隐患。4,管理员登陆,网站生成session记录管理员的用户信息,管理员浏览器中存放cooki包含sessionid。4,当管理员查看黑客博客的时候,网站运行黑客脚本脚本将管理员的cooki发送至黑客服务器。5,黑客从cooki中获取sessionid,通过sessionid登陆管理员账户

解决xss攻击:

1.敏感字符的过滤。2,禁止加载外域代码。3,禁止外授权的脚本执行

https和http的区别

html5比html有哪些改变

seo优化

seo优化也就是搜索引擎的优化,1.关键字的选择,要准确。2.网站的架构要完善,不要文件夹套文件夹的。3,内容丰富一点,原创内容多一点。4,细节的优化和完善,比如不要在title中添加过多的关键字,排版要规划。

get和post的区别

get传输一个图片则么办

把图片转成base64后会变成一个字符串,然后把这个字符串拼在url后就传过去了。

display的属性

页面传值,像中文,特殊符号,或者对象传到下一个页面

uni-app跳转页面的方式

1.uni.navigateTo 不关闭当前页面跳转到新的页面,可以用uni.navigateback退回来

2.uni.redirectTo 关闭当前页面跳转到新页面

3.uni.swatchTab 跳转到有tab的页面

4.navigator

一个px等于多少个rpx

es6的新语法

promise有什么用

flex常用的属性

样式的层级关系

 

posted on 2021-04-07 20:08  小仙女是不喝酒的  阅读(63)  评论(0)    收藏  举报