javascript笔记

于 2021-07-18 19:41:44 发布
阅读量516 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44711936/article/details/118881852
版权

快速入门

  1. 引用方式

    1. 标签内部

      1.     行内，js代码
    <script>
        // 网页弹窗
        alert("hello,world!!!!!!!!!!")
    </script>

    2. 外部连入

      1. <!--    外部引入：script标签成对出现-->
<!--    不用定义type，默认javascript-->
    <script src="js.js" type="text/javascript"></script>

  2. 控制台

    1. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  区分大小写-->
  <script>
    // 定义变量：变量类型 变量名=变量值；js只有var一种类型
    var score=71;
    // 条件控制
    if(score>60&&score<70){
      alert("60-70")
    }else if(score>70&&score<80){
      alert("80-70")
    }else {
      alert("other")
    }
  </script>
</head>
<body>

</body>
</html>

    2. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEIW4L8J-1626608466523)(C:\Users\surface\Desktop\学习\截图\控制台.JPG)]

  3. 数据类型：数值，文本，图像。。。

    1. 变量

      var 王荣="青铜"；

    2. number:js不区分小数和分数

      123 //整数
12.1 //浮点数
1.22e3 //科学计算激活
-33//复数
nan//not anember
infinity//表示无限大

    3. 字符串：“aaa” ‘aaa’

    4. 布尔值：true，false

    5. 逻辑运算

      && 两个都为真，结果为真
||一个为真，结果为真
！取反

    6. 比较运算符

      =
==等于（类型不一样，值一样，为真）
===绝对等于（只有类型和值都一样为真）

      建议不使用==

      注意：

      nan===nan，这个与所有的数值都不想等，包括自己

      只有通过isnan（nan）来判断这个数是不是nan

      浮点数问题：

      console.log(1/3)===(1-2/3)

      尽量避免使用浮点数进行运算，存在精度问题

      Math.abs(1/3-(1-2/3))<0.000000001

    7. null和undenfined

      1. null空
      2. undefined 未定义

    8. 数组

      1. java的数值必须是相同类型的对象，js中不需要这样

      2. //保证代码的可读性，尽量使用[]
var arr=[1,23,24ddssf]
new array(1,23,44)

      3. 取数组下标：如果越界了，就会

        undefined

    9. 对象

      1. 对象是大括号，数组是中括号

      2. 每个属性之间使用逗号隔开，最后一个不需要添加

        var person={name:"dfds",age:3,tags:["js","java"]}
//取值
undefined
person.name
"dfds"

    10. 严格检查格式

      1. <script>
  "use strict";
  i=1;
  let b=2;
</script>

      2. 前提：idea需要支持es6语法

      3. “use strict”;严格检查格式，预防js的随意性导致产生的一些问题

      4. 必须写在js第一行

      5. 局部变量建议使用let定义

数据类型

字符串

  1. 正常字符串我们使用，单引号或者双引号包裹

  2. 注意转义字符\

    1. \`
\n
\t
\u4e2d unicode字符
\x41 ascil字符

    2. 多行字符串编写

      1. var s=`
sasafsac
sfa
sfa
`



 3. 模板字符串
 
    	1. ```
    let name="ssds"

let age=3;
let msg=ss,$(name)

   ```
    
    ```

4. 字符串都

   	1. ```

str.length

    ```
    
    ```
 
 6. 字符串的可变性，不可变

6. 大小写转换

   	1. ```

是方法不是属性
touppercase
tolowercase

    ```
    
    ```
 
 8. stu.indexof(”t“)
 
 9. substring
 
     	1. ```
    substring（1）//从第一个字符串截取到最后一个字符串
    substring（1，3）//[1,3)
    
    ```
    
    ```

数组

  1. array可以包含任意的数据类型

    1. var arr=[12,23,43,4342,2,324]
undefined

  2. 长度

    arr.length

    注意：加入给arr.length复制，数组大小就会发生变化，如果赋值过小，元素就会丢失

  3. indexOf，通过元素获取下表:字符串和数字不一样

    arr.indexOf(23)
1

  4. slice（）：截取array的一部分，返回一个新数组。

  5. push：压入尾部

  6. pop：弹出尾部的一个元素

  7. unshift，shift（）头部

  8. 排序 sort

  9. 反转reverse（）

    1. 注意：没有修改数据，只是会返回一个新的数组

  10. 连接符

    1. 打印拼接数组，是特定的字符串链接

      undefined
ar.join(`_`)
"231_241_4324"

  11. 多维数组

    1. var r=[[1,2],[2,3,3],[3,3]];
undefined
console.log(r)
VM673:1 (3) [Array(2), Array(3), Array(2)]
console.log(r[1][1])
VM700:1 3

    2. 数组：存储数据

对象

若干键值对

var 对象名={
属性名：属性值,
属性名：属性值,
属性名：属性值
}
var person={name:`hhhh`,age:11,ddd:"dsa"}
undefined
console.log(person)
VM850:1 {name: "hhhh", age: 11, ddd: "dsa"}
undefined
person.age
11

js对象中，{…}表示一对象，键值对描述属性，多个属性用逗号隔开，最后一个不加逗号

js中的所有的键都是字符串，值是任意对象

  1. 对象赋值

    1. person.age=22
22

  2. 使用一个不存在的对象属性，不会报错 undefined

  3. 动态删减属性

    1. delete person.ddd
true

  4. 动态添加，直接给新的属性值添加即可

    1. person.aaa="dsa";
"dsa"
person.aaa
"dsa"

  5. 判断属性值是否在这个对象中 xxx in xxx

    1. `aaa` in person
true
//继承
`toString` in person
true

  6. 判断一个属性是否是这个对象中自身拥有的hasOwnProperty

    1. person.hasOwnProperty(`toString`)
false

流程控制

if判断

var age=3;
if(age>3){alert("haha")
}else if(age<5){alert("www")
}else{
alert("dsa")}

while循环，避免死循环

while(age<100){
    age=age+1;
   console.log(age)
}

do{
    age=age+1;
    console.log(age)
}while(age<100)

for循环

es 5.1

for(let i=0;i<100;i++){console.log(i)}

foreach循环

var a=[12,23,2,231,321,32,13,23,21,31,3,211,2313,213];
a.forEach(function (value){console.log(value)})

for…in

for(var num in age){if(age.hasOwnProperty(num)){console.log("存在") console.log(age[num])}}

map和set

map:

 var map=new map([['tom',10],['tm',10],['om',10],['to',10]]);
    var tom = map.get('tom');//通过key获取value
    map.set('tdd',10);//添加
    map.delete('tom');//删除

set:无需不可重复

var set=new set();
set.add(0);
set.delete(1)
set.has(0);//判断是否包含

iterator

es 6

遍历数组

     //通过for of/for in 下标
     var arr=[3,4,5]
        for (var x of arr){
            console.log(x)
        }

遍历map

//Map需要大写        
var map=new Map([["tom",12],["ww",11]]);
        for (let x of map){
            console.log(x)
        }

遍历set

  var set=new Set([1,23,4,4]);
        for (let x of set){
            console.log(x)
        }

函数

定义函数

定义方式一

绝对值函数

  function abs(x) {
    if (x>=0){
      return x;
    }else {
      return -x;
    }
  }

一旦到执行return代表函数结束，返回结果

如果没有执行return，函数执行完也会返回结果，就是undefined

定义方式二

  var abs =function(x) {
    if (x>=0){
      return x;
    }else {
      return -x;
    }
  }

function这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

调动函数

abs(10)

参数问题：js可以传任意个参数，也可以不传递参数

如何规避不存在的参数

  var abs =function(x) {
  //手动抛出异常来判断
    if(typeof x!== "number"){
      throw "noot a number";
    }
    if (x>=0){
      return x;
    }else {
      return -x;
    }
  }

arguments

js免费关键字，代表，传递进来的所有值，是一个数字

  var abs =function(x) {
  console.log("xx"+x);
    for (var i=0;i< arguments.length;i++) {
      console.log(arguments[i]);
    }
    if (x>=0){
      return x;
    }else {
      return -x;
    }
  }

如果我们想要使用所有多余的参数比较麻烦

rest

获取除了已经定义的参数之外的所有参数

  function aa(a,d,...rest){
    console.log("a"+a);
    console.log("b"+d);
    console.log(rest);

  }

rest参数只能写在最后，前面用…表示

作用域

在js中，var定义变量实际是有作用的。

假设在函数体中声明，则在函数体外不可以使用

  function qj() {
    var x=1;
    x=x+1;

  }
  x=x+2;

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

  function qj() {
    var x=1;
    x=x+1;

  }
  function qj2() {
    var x="a";
    x=x+1;
  }

内部函数可以访问外部函数的成员，反则不行

  function qj() {
    var x=1;
    function qj2() {
      var x="a";
     console.log("iner"+x);
    }
console.log("outer"+x);
    qj2()
  }
qj()

假设在js中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

  function qj() {
    var x="x"+y;
     console.log(x);
     var y="y";
    }

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

  function qj() {
    var y;
    var x="x"+y;
     console.log(x);
     y="y";
    }

这个是在js建立之初就存在特性，养成规范，所有的变量定义都放在函数的头部，便于维护

 function qj() {
    var x=1,
    y=x+1,x,i,a;
    
    }

全局函数

//全局变量
x=1;
 function f() {
   console.log(x);
 }
f();
 console.log(x)

全局变量window

var x="xxx";
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个 window变量；

var x="xxx";
window.alert(x);
var old_alter=window.alert;
//old_alter(x);
window.alert=function (){};
//alter失效
window.alert(122);
window.alert=old_alter;
window.alert(444);

js实际只有一个全局作用域，任何变量，假设没有函数作用范围找到，就会向外查找，如果在全局作用域没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定在我们的window

上，如果不同的js文件，使用了相同的全局变量，冲突—》如果能够减少冲突

//唯一全局变量
var kk={};
kk.name="ssss";
kk.add=function (a,b) {
  return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局名冲突的问题~

jQuery

局部作用域 let

function aaa() {
  
  for ( var i = 0; i <100; i++) {
    console.log(i)
  }
  console.log(i+1)//出了这个作用域还可以使用
}

es6 let关键字，解决局部作用域冲突问题

function aaa() {

  for ( let i = 0; i <100; i++) {
    console.log(i)
  }
  console.log(i+1)//出了这个作用域还可以使用
}

建议大家都是用let去定义局部作用域的定义

常用const

在es6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量：建议不用修改这样的值

var PI="3.114";
console.log(PI);
PI="2222";//可以改变这个值
console.log(PI);

在es6引入了常量关键字const

const PI="3.14";
console.log(PI);
PI="232"//无法改变

方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西，属性和方法

var ks={
  name:"dsds",
  birth:2000,
  age:function (){
    var now=new Date().getFullYear();
    return now-this.birth;
  }
}
ks.name;
ks.age();

this:代表

  function getage(){
    var now=new Date().getFullYear();
    return now-this.birth;
  }
var ks={
  name:"dsds",
  birth:2000,
  age:getage
}
ks.name;
ks.age();

this是无法指向的，默认指向调用它的那个对象

apply

在js中可以控制this指向

  function getage(){
    var now=new Date().getFullYear();
    return now-this.birth;
  }
var ks={
  name:"dsds",
  birth:2000,
  age:getage
}
getage.apply(ks,[]);

内部类

标准对象

typeof 1233
"number"
typeof "123"
"string"
typeof NaN
"number"
typeof true
"boolean"

Date类

基本使用

var now=new Date();//Sun Jul 18 2021 09:45:37 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//天
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳1970 1.1 0：00：0毫秒
console.log(new Date())//时间戳转换
now.toLocaleString();
"2021/7/18上午9:49:53"

JSON

JSON是什么

早期：所有数据传输习惯使用XML文件

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在js一切皆为对象，任何js支持的类型都可以用json表示：number String。。。

格式：

​ 对象都用：{}

​ 数组都用：[]

​ 所有的键值对都用key：value

JSON字符串和js对象的转换

 var user={
    name:"qis",
    age:12,
    sex:"男"
  }
  //对象转化为json字符串{"name":"qis","age":12,"sex":"男"}
  var jsonuser=JSON.stringify(user)
  //json字符串转对象console.log(u)
  // VM61:1
  // {name: "qis", age: 12, sex: "男"}
  // age: 12
  // name: "qis"
  // sex: "男"
  // __proto__: Object
  var u=JSON.parse('{"name":"qis","age":12,"sex":"男"}')

JSON和js对象的区别

 var user={name:"qis",age:12,sex:"男"}
 var user='{"name":"qis","age":12,"sex":"男"}'

面向对象编程

什么是面向对象

面向对象：js有些区别

类：模板

对象：具体实例

原型：

  var stu={
    name:"qq",
    age:19,
    run:function () {
      console.log("缝宽跑。。。。。。。。。。")
    }
  }
  var xm={
    name: "小米"
  };
  //继承原型
  xm._proto_=stu;

  function student(name) {
    this.name=name;
  }
  //给student添加一个方法
  student.prototype.hello=function (){
    alert("hello")
  };

Class继承

class关键字，es6引入的

1.定义一个类，属性，方法

class stu{
  constructor(name) {
    this.name=name;
  }
  helllo(){
    alert("hello")
  }
}
new stu().name
new stu().hell0();

js原型链+java继承

class stu{
  constructor(name) {
    this.name=name;
  }
  helllo(){
    alert("hello")
  }
}
class xiao extends stu{
  constructor(name,age) {
    super(name);
    this.age=age;
  }
  my(){
    alert("销售商")
  }
}
var xm=new stu("xm");
var xh=new xiao("xh");

操作BOM对象

浏览器介绍

js诞生是为能够让他在浏览器中运行

BOM：浏览器对象模型

​ ie，chrome safa，firefox

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
171
window.innerWidth
682
window.outerHeight
878
window.outerWidth
696
//

Navigator(不建议使用)

Navigator，封装了浏览器信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.67"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.67"
navigator.platform
"Win32"

大多数不会使用navigator对象，因为会被修改

不建议使用这些属性来判断和编写代码

Screen

代表电脑屏幕尺寸

screen.width
1368
screen.height
912

location

location代表当前页面的URL信息

host: "ntp.msn.cn"
href: "https://ntp.msn.cn/edge/ntp?locale=zh-CN&title=%E6%96%B0%E5%BB%BA%E6%A0%87%E7%AD%BE%E9%A1%B5&dsp=1&sp=%E5%BF%85%E5%BA%94&prerender=1"
protocol: "https:"
location.reload（）//刷新网页
location.assign("www.baidu.com")

document

document代表当前页面的页面，HTML,DOM文档树

document.title
"百度一下，你就知道"
document.title="lalsld"
"lalsld"

获取具体文档树节点

<dl id="aa">
    <dt>dddd</dt>
    <dd>sds</dd>
</dl>
<script>
    var sss=document.getElementById("aa")
</script>

获取cookie

document.cookie
"BIDUPSID=151B1FE122011727FE2931C5533485A7; PSTM=1616149573; BAIDUID=151B1FE1220117273820F6A56BE3A937:FG=1; BAIDUID_BFESS=ACBB6CE29DA94800A504D7B01CA1CDC8:FG=1; BD_HOME=1; H_PS_PSSID=34268_33764_34222_34004_34073_34106_26350_34241; BD_UPN=12314753; BA_HECTOR=2hag2lal04a0akagbv1gf78nl0r"

劫持cookie原理

<script></script>
恶意人员：获取你的cookie上传到他的服务器

服务器端可以设置 cookie：httponly

history

history浏览器历史记录

history.back()//后退
history.forward//前进

操作DOM对象

核心

浏览器网页就是一个DOM树形结构

  • 更新：更新DOM节点
  • 遍历dom节点：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个新的节点

要操作一个DOM节点，必须先获取这个节点

获取节点

 document.getElementsByTagName("h1");
  document.getElementById("p1");
  document.getElementsByClassName("p2");
  var father=document.getElementById("father");
  father.children;
  father.lastChild;
  father.firstChild;

这是原生代码，之后尽量使用jquery（）；

更新节点

<div id="id1"></div>
<script>
    var id=document.getElementById("id1");
</script>

操作文本

  • id.innerText=“sadsada” 修改文本的值
  • id.innerHTML=“dfdfsffdsf” //解析HTML文本标签

操作css

id.style.color='red'
"red"
id.style.fontSize='222px'
"222px"

删除节点

删除节点的步骤，先获取父节点，再通过父节点删除自己

<div id="father">
  <h1>ssss</h1>
<p id="p1">sss</p>
  <p class="p2"></p>
</div>
<script>
var dic=document.getElementById("p1");
var fath=p1.parentElement;
// fath.removeChild(dic);
//子节点数是一个动态的，会自动更新
fath.removeChild(fath.children[0])
fath.removeChild(fath.children[1])
fath.removeChild(fath.children[2])

插入节点

我们获取得到了某个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，会产生覆盖可以使用

追加：

<p id="js">javas</p>
<div id="list">
    <p id="se"></p>
    <p id="ee"></p>
    <p id="mm"></p>
</div>
<script>
var js=document.getElementById("js");
var list=document.getElementById("list");
//追加
list.appendChild(js);
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RB5y2kZi-1626608466531)(C:\Users\surface\Desktop\学习\截图\7获.JPG)]

创建一个新标签，实现插入

var js=document.getElementById("js");
var list=document.getElementById("list");
//追加
list.appendChild(js);
//通过js创建一个新结点
var newr=document.createElement('p');
newr.id="newp";
newr.innerText="hello";
list.appendChild(newr);
//创建一个标签节点
var ms=document.createElement('script')
ms.setAttribute('type','text/javascript');
//
var head=document.getElementsByTagName("head")[0];
head.appendChild(ms);
//可以创建一个style标签
var style=document.createElement('style');
style.setAttribute('type','text/css');
style.innerHTML='body{backgroound-color:red;}';//设置标签内容
head.appendChild(style)

insertbefore

//要求包含的节点，（now，targe）
list.insertBefore(js,ee)

操作表单（验证）

获取要提交的信息

<form action="post">
  <p>
    <span>用户名：</span><input type="text" id="username">
  </p>
  <p>
    <span>性别：</span>
    <input type="radio" value="man" id="boy" name="sex">男
    <input type="radio" value="girl" id="girl" name="sex">女
  </p>
</form>
<script>
var user=  document.getElementById('username');
var boy=document.getElementById("boy");
var girl=document.getElementById("girl");
//得到输入的值
user.value
//修改输入的值
user.value="dsfssdfsdf"
//对于单选框，多选框等等固定的值，boy.value只能取得当前的值
boy.checked//查询返回结果，是否为true，如果为则选中

提交表单，MD5加密优化，

<form action="#" method="post" onsubmit="return aa()">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
    <span>密码：</span><input type="password" id="pwd">
</p>
    <button type="submit">提交</button>
    <input type="hidden" id="md5-pew" name="password">
<!--    绑定事件-->
</form>
<script>
    function aa(){
      var username= document.getElementById("username");
      var pwd=document.getElementById("pwd");
      var md5pwd=document.getElementById("md5-pew");
     md5pwd.value= md5(pwd.value);
    return true;
    }

jQuery

jQuery库，里面存在大量的js函数

获取jQuery

//库引用
<!--  <script src="库的地址"></script>-->
  //cdn引入
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

公式：$(seletor).action()

<a id="aa" href="">带你我</a>
<script>
  $("#aa").click(function () {
    alert("fdssfdsf");
  })

选择器

//选择器和css一样
$('p').click();//标签选择
$('#id').click();//id选择
$('.class').click();//类选择

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件，其他时间

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <style>
    #dimove{
      width: 500px;
      height: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
mouse:<span id="move"></span>
<div id="dimove"> 移动式是

</div>
<script>
  $(function () {
    $('#dimove').mousemove(function (e) {
      $('#move').text("x:"+e.pageX+"y:"+e.pageY);
    })
  });
</script>

操作DOM

文本节点

  $('#tset li[name=python]').text();//获取值
  $('#tset li[name=python]').text();//设置值
  $('#tset').html();

css操作

  $('#tset li[name=python]').css("color","red")

显示和隐藏：本质display：none

  $('#tset li[name=python]').hidden()
  $('#tset li[name=python]').show()
四哥，喔喔喔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值