JavaScript入门

helloworld

直接写

<script>
    alert('hello,world');
</script>

引入

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

类型默认

<script type="text/javascript"></script>

浏览器控制台使用----尽量使用JS6

数据类型

number

----整数，浮点数，科学计数法，复数，NAN（not a number），Infinity（无限大）

字符串

----‘abc’，"abc"

布尔值

----true，false

逻辑运算

----&&，||，！

比较运算符

---- =，==（值相等），===（类型相等，值相等）

null和undefined

----null空，undefined未定义

数组

----var arr =[1,"wsadf",null,true]

var person = {name:"asd", age: 34, tags: ['sa','js','ds'],...}

严格检查模式

写在js第一行----‘use strict’

字符串类型详解

1.正常字符串 单字符，双字符

2.注意转义字符

----\sd

3.多行字符串编写

----var msg = 'hello

world

你好ya'

4.模板字符串

----let name ="sdf"

5.字符串长度

----str.length()

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

----更换字符串内元素

7.大小写转换

----student.toUpperCase()  大写    student.toLowerCase()    小写

8.arr.indexOf(4)

     var arr = [1,2,3,4,5,6,7,8,9]  通过元素确定下标

9.substring

----通过下标截取数据

数组类型详解

长度 arr.length   下标arr.indexOf()    截取返回新数组slice(下标)

push() 尾插   pop()  弹出尾部元素

unshift() 头插  shift()  弹出头部元素

排序----sort()

元素反转----reverse()

arr.concat(插入元素)----插入，但并不改变数组arr

连接符join----arr.join('-')将arr元素用符号-连接起来

多维数组----

var arr =[['a','c'],[1,2,4,5,6,3]];
alert(arr[1][1])

对象类型详解

创建对象--创建属性，赋值，修改属性值，删除。。。

var person = {

        name: "sd",

        age : 12,

        email: "12315@qq.com"

}

分支和循环详解

if判断

var a = 3;

if(a > 4){

        alert("asd");

}else if(){}...

while循环

while(age < 100){

age = age + 1;

console.log(age)

}

for循环

for(let i = 0; i < 100; i++){

console.log(i)

}

forEach循环----依次遍历数组内元素

var arr =[['a','c'],[1,2,4,5,6,3]];
arr.forEach(function (value) {
    console.log(value)
})

for...in

 'use strict';
var arr =[1,2,4,5,6,3];
for (var num in arr){
    if(arr.hasOwnProperty(num)){
        console.log("存在")
        console.log(arr[num])
    }
}

Map和Set集合

Map

 'use strict';
var map = new Map([['mike',12],['jack',21],['jerry',15]]);
var name = map.get('mike');//获取值
map.set('admin',123456);//添加数组
map.delete('jack');
alert(name)

Set

var set = new Set([1,2,3,3,3,3,3])//只打印不重复的值
  set.add(5)
  console.log(set.has(5))//判断set是都含有5

Iterator迭代

遍历

let arr = [1,2,3,4,5,6];
for (let i of arr){
    console.log(i)
}

函数的定义和参数获取

绝对值函数

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

匿名函数----将匿名函数结果赋值给arr

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

定义异常

var arr = function (x) {
    if(typeof x!=='number'){
        throw 'Not a number!';
    }
    if(x>0){
        return x;
    }
    else{
        return -x;
    }
}

arguments----代表传递进来的数组

for(var i = 0;i < arguments.length;i++){
    console.log(i);
}

ES新特性----只获取已定义的参数

function aaa(a,b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log("rest=>"+rest);
}

变量的作用域，let，const详解

var,let,const作用域

方法的定义和调用

获取当前年份

var now = new Date().getFullYear();

Date日期对象

typeof----获取当前变量类型

 JSON对象

json字符串

var jsonUser = JSON.stringify(user);//打印-- '{"name":"zhengzhongjian","age":21,"sex":"男"}'

json对象

var user = {
    name: "zhengzhongjian",
    age: 21,
    sex : '男'
}//打印--   {name: 'zhengzhongjian', age: 21, sex: '男'}

面向对象原型继承

xiaoming.__proto__ = student;

var student = {
    study: function () {
        console.log("努力，奋斗")
    }
}

可通过xiaoming.study()调用函数

面向对象class继承

class A extends B{} ----类A继承类B

 操作BOM对象（重点）

 

 

 

 

 获得DOM节点

删除DOM节点

 创建和插入DOM节点

 获得和设置表单值

 初识jQuery及公式

在线引用：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

选择器：

<a href="" id="test-jQuery">点我</a>
<script>
   'use strict';
   $('#test-jQuery').click(function () {
       alert('hello world')
   })
</script>

jQuery选择器

document.getElementsByTagName();
document.getElementById();
document.getElementsByClassName();

$('p').click()
$('#id1').click()
$('.class1').click()

$('selector').action()//公式

jQuery事件

 

 jQuery操作元素