JavaScript基础

组件官网
Element
Ant

1.基础

1. script标签必须成对出现，尤其是在引入js文件：

<script src="js/first.js"></script>

2. 常见方法：

• alter():弹窗
• console.log():控制台输出
• ECMA6标准：“use strict”

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

3. 数据类型：

• String
• Number：数字类型
• NAN:不是数字
• undefined:未定义

4. ECMA6新特性：

• 可以使用el表达式取值${}
• 定义局部变量let

5. 字符串的常用方法：

• str.length：长度
• str.toUpperCase():大写
• str.toLowerCase()：小写
• str.indexOf(char):指定字符下标
• str[index]:通过下标取字符
• str.substring(1):第一个字符到最后一个
• str.substring(1,3):截取[1,3)字符

6. 数组常用方法：

• arr.length:长度
• arr.indexOf(e);通过元素获得下标索引
• arr.slice():截取数组一部分，返回新数组，类似substring
• arr.push(str…):压入数组尾部
• arr.pop(""):将元素从数组尾部弹出
• arr.unshift©:压入数组头部
• arr.shift©:从数组头部移除
• arr.sort():排序
• arr.reverse():反转
• arr.concat(arr[]):数组与数组拼接，返回新数组
• arr.join(str):打印输出数组，使用指定字符串拼接

2.对象

1.定义：

var 对象名={
属性名：属性值，
属性名：属性值
}

var person={
name:"wu",
age:17
}

2.操作对象

• 添加属性：person.id=1
• 删除属性：delete person.id
• 判断属性存在：id in person
• 判断属性是否是对象拥有：person.hasOwnProperty(“name”)

3.Map,Set

ES6新特性:
1.Map

var map=new Map([["name","wu"],["age",18]])//定义
map.get("name")//获取
map.set("id",1)//添加
map.delete("id")//删除

2.Set:无序不重复集合

var set=new Set([1,2,3,4,5])//定义
set.add(6)//添加
set.delete(6)//删除
set.has(6)//判断元素是否存在

3.使用iterator遍历
ES6新特性

//遍历数组
var arr=[1,2,3,4];
for(let x of arr){
console.log(x);
}
//遍历Map
var map=new Map([["name","wu"],["age",18]])//定义
for(let x of map){
console.log(x);
}
//遍历Set
var set=new Set([1,2,3,4,5])//定义
for(let x of set){
console.log(x);
}

4.函数及面向对象

1.函数定义和变量作用域

//方式1
var fun=function (x) {
    console.log(x)
   }
//方式二：
function (x) {
 console.log(x)
 }

arguments.length;获取所有参数

reset：可变参数，es6新特性，定义在参数最后面

fun=function (a,b,...reset) {
  console.log(a,b);
       console.log("reset:"+reset)
   }

变量作用域：

• 函数里面的变量只在函数体范围有效
• 默全局变量都会绑定在window对象下

规范：

• 由于我们的全局变量都会绑定window,如果不同的js文件使用了相同的全局变量就会冲突。
• 解决方法：将代码放在自定义的唯一命名空间

var Wu={}//定义唯一全局变量
//定义全局变量
Wu.name="lisi"//
Wu.add=function(){
}

es6:

• let：修饰局部变量
• const：修饰常量

2.方法

function getAge(){
return this.age+1;
}
var person={
name:"wu",
age:16,
add:getAge
}
person.name//调用属性
person.add();//调用方法
getAge.apply(person,[])//调用方法

3.闭包（难）

4.箭头函数（新特性）

5.创建对象

new Person（）；

6.class继承（新特性）

extends

7.原型链继承（难）

prototype:每一个javascript函数都有原型链属性

5.常用对象

1.Date

var date=new Date();
date.getYear();
date.getMonth();
date.getDay();
date.toLocaleDateString()//获取本地时间

2.JSON

JSON.stringify(person)//对象转化为jsoon字符串
JSON.parse('{"name":"wu","age":16}')//json转化为对象

6.操作DOM

1.插入dom

<div id="name">父标签</div>
<script>
    let p = document.createElement("p");//创建标签
    p.id="pp";
    p.innerText="段落标签";
    let pom = document.getElementById("name");
    pom.appendChild(p);//插入标签
    let span = document.createElement("div");
    span.setAttribute("style","color:red");
    p.innerText="java基础"
    pom.appendChild(span);
    //第二
    pom.insertBefore(span,p)//将span结点插入到p结点前面
</script>

2.更新dom

var pom=document.getElementById("name")
pom.innerText="hello";//纯文本
pom.innerHTML="<h3>hello</h3>"//内部html文本
pom.style.color="red"//css样式

3.删除dom

先获取父节点，通过父节点删除子节点

var pom=document.getElementById("name")
var father=var father=pom.parentNode;
father.remove(pom);

7.操作BOM：浏览器对象模型

1.window：浏览器窗口

window.innerHeight//浏览器窗口内部高度
window.outerHeight//浏览器窗口外部高度

2.navigator：封装浏览器信息

3.screen：屏幕

screen.height
screen.width

4.location:当前页面的url信息

location.reload()//刷新页面
location.assign("https:www.baidu.com")//页面跳转

5.document：当前页面，获取具体的文档数结点

document.cookie；//获取浏览器cookie信息
var doc=document.getElementById(str):id选择器
document.getElementsByClassName（str）;//类选择器
document.getElementsByTagName("div");//标签元素选择器
doc.children//结点的所有子节点
doc.firstChild;//结点的第一个子节点
doc.lastChild;//结点的最后一个子节点

服务器设置cookie:httpOnly:保护cookie安全信息

6.history:浏览器历史记录

history.forward()//浏览器前进
history.back()//浏览器后退

7.操作表单

• 文本框：text

<span>用户名：</span><input type="text" name="username"><br>

• 下拉框：
• 单选框：radio,通过checked属性判断是否被选中

<input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="girl" id="girl">女
       

• 前端对密码进行md5加密

<!--引入md5库-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!--onsubmit:表单绑定提交事件，将函数返回值返回给表单，进行密码验证-->
    <form method="get" action="https://www.baidu.com/" onsubmit="return butt()">
        <span>用户名：</span><input type="text" name="username" id="name"><br>
        <span>密码：</span><input type="password" id="input-password">
<!--        隐藏加密后的密码-->
        <input type="hidden" id="md5-pwd" name="password">
        <button type="submit">提交</button>


    </form>
<script>
    function butt() {
        let username=document.getElementById("name").value;
        let inputPwd=document.getElementById("input-password").value;
        let md5Pwd=document.getElementById("md5-pwd")
        md5Pwd.value=md5(inputPwd);
        return true;
    }
</script>

• 多选框：checkbox
• 隐藏域：hidden
• 密码框：password

8.Jquery

<div id="name">父标签
<li name="lisi"></>
</div>
$("#id")//选择器
//表示文档加载完之后执行
 $(function () {
        
    })
 $('#name li[name=lisi]']).text().css({'color':'red'});//绑定div标签下name属性为lisi的li标签  ,text()设置文本信息
 ,css()设置css样式