JavaScript笔记

JavaScript

数据类型概览

1. number
2. 字符串
3. 布尔值
4. 逻辑运算符
5. 比较运算符（等于，类型不同值相同也会返回true；=绝对等于，类型和值都相同才会返回true）
6. 尽量避免使用浮点数进行运算，存在精度问题！

/*使用Math的abs绝对值进行相近计算*/
<script>
Math.abs((1/3)-(1-2/3))<0.00000001
</script>

7. null和undefined（未定义）
8. 数组（可以放任何对象）

var arr = [1,5,"dd",null,true];

9. 对象

var person = {
   name:"xxx",
   age:3,
   tage:['js','java']
}
//取值
person.name

严格检查模式

### 数据类型

#### 字符串

1. 正常字符串使用单引号或双引号包裹。

2. 注意转义字符。

3. 多行字符串编写。

   ``` html
   var msg = `
              HELLO 
              你好
               `;

4. 模板字符串

   let name = 'xxx';
   let msg = '你好啊,${name}';
   

5. 字符串长度

   str.length
   

6. 字符串不可变

7. 大小写转换

   //这里是方法
   student.toUpperCase()
   student.toLowerCase()
   

8. 获取指定字符的下标

   student.indexOf('t')
   

9. 获取指定位置的字符串

   //截取范围[)
   student.substring(x,y)//[x,y)如果y不写就是x到最后
   

数组

Array可以包含任意的数据类型

var arr = [1,2,5,2,1]  //通过下标取值赋值
arr[0]=1

1. 长度

   arr.length
   

   注意：假如给arr.length赋值，数组大小会变，赋值过小，元素会丢失。

2. 获取指定字符的下标

   arr.indexOf(2)
   

3. slice()截取Array的一部分，返回一个新的数组，类似substring

4. push()、pop()往数组尾部压入弹出数据

   arr.push("1",2);//在数组最后添加元素
   arr.pop();//弹出（删除）数组最后一个元素
   

5. unshift()、shift() 头部

   arr.unshift("1",2);//在数组头部添加元素
   arr.shift();//弹出（删除）数组头部一个元素
   

6. 排序

   arr.short();
   

7. 元素反转

   arr.reverse();
   

8. 数组拼接

   arr.concat([1,54,9]);
   

   注意：该方法并没有修改数组，只是返回一个新的数组。

9. 连接符打印拼接数组，使用特定的字符链接

   arr.join('-')
   

10. 多维数组

    arr = [["a","b"],[1,2]];
    

对象

var person = {          //  var 对象名 = { 
   name:"xxx",          //     属性名:属性值,
   age:3,               //     属性名:属性值,
   tage:['js','java']   //     属性名:属性值
}                       //     }

Js对象用{...}表示一个对象，键值对描述xxx:xxx，多个属性之间用,隔开,最后不加,

1. 对象赋值

   person.name = "yyy";  //赋值
   person.name;          //取值
   

2. 使用一个不存在的对象属性不会报错，显示未定义undefined

   person.xxx;
   undefined
   

3. 动态删减属性，通过delete删除对象属性

   delete person.name;
   

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

   person.haha = "haha";
   

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

   'age' in person;
   //in也可以用来寻找父类的方法
   

6. 判断属性是否是自身定义的（非父类继承）hasOwnProperty()

   'age' hasOwnProperty();
   

流程控制

1. if判断

2. while循环

3. do while循环

4. for循环

   //类似java forEach遍历数组 类型尽量选择let
   //forIn打印数组下标
   for(let num in age){
       console.log(num)
   }
   //forof遍历数组
   for(let num of age){
       console.log(num)
   }
   

5. forEach循环

   //js的forEach和java不同，需要用函数进行遍历
   var age = [1,,54,5,515,1,51,5]
   age.forEach(function(value){
       console.log(value)
   })
   

Map和Set

Map和Set是ES6新增功能

var map = new Map([['tom',100],['jack',90],['join',80]]);
var name = map.get('tom'); //通过key获得value
map.set('admin',666);  //添加
map.delete('tom');  //删除
console.log(name);

Set：无序不重复集合

var set = new Set([3,1,1,1])
console.log(set);
set.add(2);  //添加
set.delete(1);  //删除
set.log(set.has(3));  //是否包含某个元素
//输出结果只有3和1

遍历数组

//遍历map
var map = new Map([['tom',100],['jack',90],['join',80]]);
for(let x of map){
    console.log(x)
}

var set = new Set([3,2,6,1])
for(let x of set){
    console.log(x)
}

函数

定义函数

//绝对值函数，写法一
function abs(x){
  if(x>=0){
      return x;
  }else{
      return -x;
  }
}

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

//绝对值函数，写法二
var abs = function (x){
  if(x>=0){
      return x;
  }else{
      return -x;
  }
}

调用函数

abs(10)

参数问题：js可传任意个参数，也可以不传参数。可在函数中加入判断手动抛出异常。

function abs(x){
    if(typeof x!=='number'){  //通过typeof判断传入的类型是否为想要的
        throw 'Not a Number';  //通过throw来抛出异常
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

当传入函数的参数大于函数定义的参数时，js不会报错，而且也可以使用在函数括号的最后加入...rest就能在函数中使用其余参数了。

function zxc(a,b,...rest){
    console.log(rest);  //这里可以收到除a,b所有传入的参数
}

变量的作用域

在js中，var定义的变量是有作用域的。在函数体中声明的变量在函数体外是无法调用的。

function a(x){
    x = x + 1;
}
x = x + 2;  //这里js会主动报错

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

• 内部函数可以访问外部定义的变量，反之不行。

• 内外函数变量重名，优先使用自己函数内的变量。

• js定义变量同一提到最前面。

<script>
    //函数外定义的变量，所有函数都可以调用
    var x = 1;
    function a(x){
    x;
    }
    function b(x){
    x;
    }
</script>

规范——由于所有全局变量都绑定在window上。如果不同的js文件使用了相同的全局变量，会发生冲突！

//定义唯一全局变量
var a = {};
a.name = 'xxx';
a.add = function(a,b){
    xxx
}

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

作用域let

ES6新特性 let关键字，解决局部作用域冲突问题

function a(){
    for(let i=0;i<100;i++){
        console.log(i)
    }
    console.log(i)  //使用了let定义i，在循环外就无法访问到了
}

常量const

ES6之前，约定全部用大写字母定义的变量就是常量，建议不要修改（hhhh...

在ES6引入了常量关键字

const PI = '3.14';  //使用const定义就不会改变了

方法

写在对象中的函数

var sx = {
    name : 'aa',
    birth: 2000,
    age : function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
//调用方法：sx.age()

内部对象

• Date

  var now = new Date();
  now.getFullYear();//年
  now.getMonth();//月
  now.getDate();//日
  now.getTime;//时间戳
  

• JSON

  • json是一种轻量级的数据交换格式。

  • 层次结构清晰。

  • 易于阅读和编写，也易于机器解析和生成，可有效提高网络传输效率。

  • 对象用 {}

  • 数组用 []

  • 键值对用 key:value

  • 对象转化为json

    var user = {
        name:'xxx',
        age:3,
        gender:'male'
    }
    var jsonUser JSON.stringify(user);
    //jsonUser即为JSON字符串
    

  • json转化为对象

    var obj = JSON.parse('{"name":"xxx","age":3,"gender":"male"}')
    //即可将json字符串转化为对象
    

    在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示。

    JSON和JS对象的区别

    var obj = {a:'hello',b:'hellob'};
    var ison = '{"a":"hello","b":"hellob"}'
    

面向对象编程

class继承(ES6引入)

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

   class Student{
       //constructor代表构造器
       constructor(name){
           this.name = name;
       }
       hello(){
           alert('hello')
       }  
   }
   var xx = new Student('xxx');
   

2. 继承

   class XiaoStudent extends Student{
       constructor(name,grade){  
           super(name); //实现父类
           this.grade;
       }
       mygrade(){
            alert('xiaoStu')
       }
   }
   //本质还是查看对象原型
   

操作BOM对象

location

location代表当前页面的URL信息

host
href
reload()
...

document

document代表当前的页面

<dl id="app">
    <dt>java</dt>
    <dt>web</dt>
    <dt>spring</dt>
</dl>
<script>
var dl = document.getElementById('app');
</script>

document可以获取本地cookie,服务器端可以设置cookie:httpOnly

操作DOM对象

DOM:文档对象模型。浏览器网页就是一个DOM树形结构！

• 更新Dom节点
• 遍历Dom节点（得到）
• 删除一个Dom节点
• 添加一个新的Dom节点

如果要操作一个Dom节点，首先要获得一个Dom节点。

1. 获得DOM节点

<div id="father">
   <h1>标题</h1>
   <p id="p1">p1</p>
   <p class="p2">p2</p> 
</div>
<script>
var i = document.getElementsByTagName()  //标签选择器
var y = document.getElementsById()  //ID选择器
var z = document.getElementsByClassName()  //class选择器

var f = document.getElementsById('father');
var c = f.children;  //获取父节点下的所有子节点
</script>

2. 更新节点

<div id="id1">
</div>
<script>
var id1 = document.getElementsById('id1');  //根据id获取节点
id1.innerText="xxx";  //可以修改文本值
id1.innerHTML="<strong>123</strong>";  //可以解析html文本标签
id1.style.color='red';  //改变样式
id1.style.fontSize='200px';  //驼峰命名
</script>

3. 删除节点

   步骤：先删除父节点，再通过父节点删除自己

<div id="father">
   <h1>标题</h1>
   <p id="p1">p1</p>
   <p class="p2">p2</p> 
</div>
<script>
var s = document.getElementsById('father');//获取自己节点
var f = p1.parentElement;  //获取父节点
    f.removeChild(p1);  //通过父节点删除自己
</script>

4. 插入节点

   ​ 我们获得了某个Dom节点，假设这个Dom节点是空的，可以通过innerText()添加元素，但如果这个Dom节点存在元素，就会产生覆盖。可以使用追加append()操作。

<p id="js">js</p>
<div id="list">
    <p id="se">java se</p>
    <p id="ee">java ee</p>
    <p id="me">java me</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(ks); //追加到后面
</script>

5. 创建新节点

var newP = document.createElement('p'); //新建一个p标签
newP.id='np'; //为新的p标签添加id
newP.innerText = 'xxx'; //为新的p标签添加文本

6. 创建一个标签节点

var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');

操作表单

• 表单：from，也是dom树的一个节点

• 获取表单值

<form>
    <span>username:</span><input type="text" id="username">
    <p>
       <span>sex:</span>
    <input type="radio" name="sex" value="man" id="boy">man
    <input type="radio" name="sex" value="woman" id="boy">woman  
    </p>
</form>

<script>
var input_text = document.getElementById('username');//得到输入框的值
input_text.value = '123';//修改输入框的值
var boy = document.getElementById('boy');
    boy.checked; //判断选择框，如果被选中则返回true;
    boy.checked = true;  //使用js选中
</script>

• 使用js验证表单

<form>
   <span>username:</span><input type="text" id="username">
   <span>username:</span><input type="password" id="password">
    <!--绑定onclick点击事件-->
    <button type="button" onclick="aaa()">提交</button>
</form>

<script>
function aaa(){
 var uname =  document.getElementById('username');
 var pwd =  document.getElementById('password');
}
</script>

• 使用表单进行加密验证

<!--表单提交事件，加入return当aaa()返回false时不会提交-->
		<form id="f" method="post" onsubmit="return aaa()">
			<span>username:</span><input type="text" id="username" name="username">
			<!--用户输入的密码框-->
			<span>username:</span><input type="password" id="input_password" name="input_password">
			<!--提交请求的密码框-->
			<input type="hidden" id="md5_pass" name="password" />
			<!--绑定onclick点击事件-->
			<button type="button">提交</button>
		</form>

		<script>
			function aaa() {
				var uname = document.getElementById('username'); //获取表单用户名
				var pwd = document.getElementById('password');  //获取表单密码
				var md5pwd = document.getElementById('md5_pass');  //获取加密表单
				md5pwd.value = md5(pwd.value);  //内容添加至隐藏密码框（需引入md5文件）
				return true;
			}
		</script>

jQuery库

jQuery中存在大量的JavaScript函数

jQuery公式：$(selector).action() ：$符号(js同款选择器).事件

<a href="" id="test_jquery">test</a>
		<script>
			//选择器就是js的选择器
			$('#test_jquery').click(function() {
				alert('hello,jQuery')
			})
		</script>

• jQuery选择器

       <script>
			$('p').click(这里写函数)  //标签选择器
			$('#id').click(这里写函数)  //id选择器
			$('.class').click(这里写函数)  //class选择器
		</script>

文档工具站：http://jquery.cuishifeng.cn/index.html

• 操作DOM

$('#test_jquery').text();  //获取值
$('#test_jquery').text('XXXX');  //修改值为xxxx
$('#test_jquery').html();  //获取值
$('#test_jquery').html('<strong>123</strong>');  //设置值
$('#test_jquery').css("color","red");  //设置样式