JavaScrip————更适合后端宝宝们学习的前端

本期是最后一期啦，前端的内容就完结了，也不一定，后面我们可能会继续扩展，下期我们就继续学习网络和Spring啦；

1，JavaScrip是啥

JavaScrip简称js，JavaScrip和java本身是没啥关系的，但是java太火了，就碰瓷一下名字了；

我们之前讲过html，css，那么这个JavaScrip和html还有css有关系吗，答案是有的，Html就相当于网络的骨头，css就相当于给Html包上了一层皮，这就变成了人了，那JavaScrip就是灵魂，能让这个人动起来；

现在我们来快速上手使用，我们使用JavaScrip和css选择器是有点相似的，我们css使用style标签，JavaScrip很相似，使用Script，我们在Script标签中写内容，并且Script的引入方式和style标签是一样的，分为行内样式，内部样式和外部样式，我们还是使用内部样式；

---

2，基础语法

如果学过java的语法的js的语法就会感觉很简单了；

1，变量

关键字	解释	实例
var	声明变量关键字，作用域在该语句的函数内（旧的）	var name='张三'
let	声明变量关键字，作用域为该语句所在代码块内	let name='张三'
const	声明常量关键字，不可修改	const name='张三'

js是一门动态弱类型语言，变量可以存放不同类型的语言，

<script>
    let a = '张三';
    console.log(a);
    a = 20;
    console.log(a);
    a = true;
    console.log(a);
</script>

 console.log有点像打印日志，我们看看效果，我们运行html文件后打开开发者工具，

变量命名规则，所有语言都挺像的：

1，组成字符可以是任意字母，数字，下划线，或美元符号

2，数字不能作为开头

3，建议使用驼峰命名

4，+表示字符串拼接 

2，数据类型

js的数据类型分为原始类型和引用类型，

数据类型	描述
number	数字，不区分整数和小数
String	字符串类型，单引号和双引号都可以
boolean	布尔类型
undefined	表示变量未初始化，只有唯一的undefined

我们能使用typeof来打印变量的类型：

    let a = 12;
    console.log(typeof a);
    let b = '张三';
    console.log(typeof b);
    let c = true;
    console.log(typeof c);
    let d = undefined;
    console.log(typeof d);
    let e = null;
    console.log(typeof e);

 

3，运算符

运算符类型	运算符
算数运算符	+，-，*，/，%
自增自减运算符	++，--
赋值运算符	=，+=，-=，/=，*=，%=
比较运算符	>，<，>=，<=，==，!=，!==， ==（比较相等，会进行隐式类型转换） ===  (简单来说上面比的是数值，下面比的是数值和类型)
逻辑运算符	&&，||，！
位运算符	& 按位取余 | 按位或 ^按位异或 ~按位取反
位移运算符	<<左移 >>算数右移（有符号右移） <<逻辑右移（无符号右移）
三元运算符	？：

---

3，JavaScrip对象

1，数组

数组的创建方式有两种：

a，直接new

let arr = new Array();

b，使用字面量方式创建

    let arr2 = [];
    let arr3 = [1,'张三',true];

js的数组是不要求，数组中的每个元素类型是相同的； 

 数组操作

1，增 使用push来向数组后面添加，或者直接通过下标添加

2，删 使用splice方式指定下标，并且指定偏移个数删除

3，改 直接通过下标赋值

4，查 通过下标方式访问

    
    let arr4 = [1,2,3];
    //读取数组
    console.log(arr4[1]);
    //添加元素
    arr4[3] = '李四';
    arr4.push('5');
    for(let i=0;i<arr4.length;i++){
        console.log(arr4[i]);
    }
    //修改下标
    arr4[0]='王五';
    console.log(arr4[0]);
    //删除元素
    arr4.splice(0,2);
    for(let i=0;i<arr4.length;i++){
        console.log(arr4[i]);
    }

注意事项：

1，不要直接给数组名赋值，因为是动态弱类型语言，所以数组会直接变成赋值的那个；

2，如果下标超出元素范围，就会读取到undefined；

2，函数

语法格式

function 函数名（形参列表）{

        函数体

        return 返回值；

}

//函数调用

函数名（实参列表）//不考虑返回值

返回值 = 函数名（实参列表）//考虑返回值

关于参数个数

形参和实参可以不匹配，

a）如果实参多余形参，那么多出的参数不参与运算

b）如果形参多余实参，那么少的那个参数类型就是undefined

来定义一个加法函数：
 

    function add (a,b){
        return a+b;
    }
    let a1 =12;
    let b1 = 3;
    let num = add(a1,b1);
    console.log(num);

 

函数表达式：

    let add2 = function(){
        let num=0;
        for(let i=0;i<arguments.length;i++){
            num+=arguments[i];
        }
        return num;
    }
    console.log(add2(10,230));
    console.log(add2(2,2,3,4,5));

3，对象

1，使用字面量创建对象，

    let stu = {};

    let student = {
        name : '姚宇',
        age : 60,
        SayHello : function(){
            console.log('汪汪');
        }
    }
    student.SayHello();

第一个是创建了一个空对象，第二个是创建了一个学生对象，还是我朋友嗷，我们让我好朋友发出声音， 

2，使用new Object创建对象

    let student2 = new Object();
    student2.name = '姚宇';
    student2.weight = 80;
    student2['height'] = 90;
    student2.SayHello = function(){
        console.log('wangwang');
    }
    student2.SayHello();

3，使用构造函数创建对象

    function student3(name,age){
        this.name = name;
        this.age = age;
        this.SayHello = function(){
            console.log('wang');
        }
    }
    let student4 = new student3('yao',18)
    student4.SayHello();

---

4，JQuery

JQuery是一个快速，简洁的JavaScrip框架，

我们使用它需要使用依赖，jQuery Core – All Versions | jQuery CDN

进入这个地址

选第二个，复制依赖，复制到html上； 

1，语法

jQuery的语法是选取HTML元素，并对选取的元素进行某些操作；

因为是js的东西所以我们还是写在Script中，

$(selector).action()

<$()是一个函数，jQuery提供的全局函数，用来操作HTML元素

<Selector选择器，用来查找HTML元素

<操作对元素进行操作

这个selector和action我们马上就学具体的，现在只是告诉一下；

2，选择器

有很多啊，博主这里给大家简单列举几个比较常用的，多了我也不会哈哈哈；

语法	描述
$("*")	选取所有元素
$(this)	选取当前HTML元素
$("p")	选取所有p标签元素
$("p:first")	选取p标签第一个元素
$("p:last")	选取p标签最后一个元素
$(".box")	选取class="box"的元素
$("#box")	选取id="box"的元素
$(".class1 .class2")	选取同时拥有class1和class2的元素
$("p.class1")	选取p中class='class1'的元素
$("ul li:first")	选取所有ul标签的第一个li元素
$(":input")	选取所有表单元素
$(":text")	选取所有type=''text"的input元素
$(":checkbox")	选取所有type="checkbox"的input元素

3，事件

什么是事件，用户进行单击，双击，选择，修改就是一个一个事件，浏览器会时刻监听这些行为，之后再由js进行操作，实现更复杂的交互；

事件由三部分构成

1，事件源：哪个元素触发的

2，事假类型：点击？选中？修改？

3，事件处理程序，进一步如何处理，用回调函数；

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <p>我是一个段落</p>
    <Script>
        $(p).click(function(){
            你点我干嘛
        })
    </Script>
</body>
</html>

 

有意思吧；

弹框是alert('')嗷；

常见事件：

 

事件	代码
文档就绪事件（完成加载）	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dbclick(function)
元素的值发生改变	&(selector).change(function)
鼠标悬停事件	&(selector).mouseover(function)

4，操作元素 

1，获取设置元素的内容

三个简单获取元素内容的JQuery方法

JQuery方法	说明
text()	设置或返回所选元素的文本内容
htm()	设置或返回所选元素的内容
val()	设置或返回表单字段的值

这三个方法既可以获取元素内容，又可以设置元素内容；

有参数，就会进行元素值的设置，没有参数就对元素内容进行获取； 

先来获取元素内容：

    <div id="div1"><span>你好</span></div>
    <input type="text" value="你好">

        var html = $("#div1").html();
        console.log("html内容为"+html)

        var text = $("#div1").text();
        console.log("文本内容为"+text)

        var inputval = $("#text").val();
        console.log("表单内容为"+inputval)

 

再来设置元素内容：

    <div id="div2"></div>
    <div id="div3"></div>
    <input type="text" value="">

        $("#div2").html('<h1>设置html</h1>')
        $("#div3").text('设置为text')
        $("#text").val('表单')

2，获取设置元素的属性

attr()方法用来获取元素的属性：

先来获取：

    <p><a href="https://www.sogou.com/">搜狗</a></p>

        var href = $("p a").attr("href")
        console.log(href)

 

再来设置

        $("p a").attr("href","baidu.com")
        console.log($("p a").attr("href"))
        var href2 = $("p a").attr("href")
        console.log(href2)

 

3，获取，返回css属性

获取属性

        console.log($("#div2").css("font-size"))

 

设置属性

        $("div").css("font-size","16px")

 

 

4，添加元素

1，append：在所选元素的结尾插入内容

2，prepend：在所选元素的开头插入内容

3，after：在所选元素的末尾插入内容

4，before：在所选元素之前插入内容

    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>

        $("ol").append("append");
        $("ol").prepend("prepend");
        $("ol").after("after");
        $("ol").before("before");

 

5，删除元素

remove：删除所选元素和子元素

empty：删除子元素

                $("ol").remove();

                $("ol").empty();

 这个第一个效果

第二个