JavaScript与JavaQuery

SSOA6

已于 2022-06-06 10:01:28 修改

阅读量1.8k

点赞数 3

分类专栏： JavaScript 后端 HTML 文章标签：开发语言后端 javascript html5

于 2022-03-30 17:19:45 首次发布

本文链接：https://blog.csdn.net/SSOA6/article/details/123848922

版权

后端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

JavaScript与JavaQuery

js 基础

变量与基本数据类型

CPU 内存硬盘

在这里插入图片描述

JavaScript历史

在这里插入图片描述

js 的作用

在这里插入图片描述

JS的功效（地位）

在这里插入图片描述

游览器中的js

在这里插入图片描述

JS的组成

在这里插入图片描述

体验 JS

行内式

在这里插入图片描述

<div onclick="alert('123')">行内式</div>

内嵌式

在这里插入图片描述

    <script>
        alert('你好')
    </script>

外链式

在这里插入图片描述

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

输出

在这里插入图片描述

变量

在这里插入图片描述

声明变量

在这里插入图片描述

先声明后赋值

var a;
a = 1;
a

边声明变赋值

var a = 1;
a

特性

在这里插入图片描述

变量命名规范

在这里插入图片描述

数据类型

在这里插入图片描述

js 中的进制

在这里插入图片描述

前面加个0就是八进制
前面加个0x就是十进制
前面加个0b就是二进制

十六进制

在这里插入图片描述

二进制

在这里插入图片描述

数字的取值范围

在这里插入图片描述

字符串数据类型

在这里插入图片描述
验证数据类型

typeof

返回一个数据类型

字符串的嵌套

在这里插入图片描述
使用转义符号消掉引号的作用

字符串的长度获取

在这里插入图片描述

字符串的拼接

在这里插入图片描述

布尔类型

ture
false

Undefined 和 Null

在这里插入图片描述

数据类型转换

转字符串

在这里插入图片描述

转数字类型

在这里插入图片描述

布尔数据类型

在这里插入图片描述
JS 特点和 python 不同的是 Boolean() 里放空列表返回 false ； JS里返回true

编译与解释

Python JS 就是解释形 , Java 就是编译形
在这里插入图片描述

标识符

标记实体的符号
计算机中，数据都是实体，一切皆为对象，对象都是实体
标识符包括，变量名，方法名，
在这里插入图片描述

在这里插入图片描述

运算符

基本概念

在这里插入图片描述

浮点数进度问题

在这里插入图片描述

递增的递减运算符概念

运算符

在这里插入图片描述
a = 1;
b = “1”;

双等号比较值
三等号比较值也比较数据类型

逻辑运算符

在这里插入图片描述

短路运算（逻辑中断）

在这里插入图片描述

逻辑与 &&
在这里插入图片描述
逻辑或 ||
现象

在这里插入图片描述

赋值运算符

在这里插入图片描述

运算符优先级

在这里插入图片描述

JS 分支

JS 分支结构

在这里插入图片描述

单路分支

在这里插入图片描述

二路分支

在这里插入图片描述

多路分支

在这里插入图片描述

演练

在这里插入图片描述
注意接受用户数据是:prompt(“请输入”)

prompt("请输入")

在这里插入图片描述

三元运算符

在这里插入图片描述

演练定时器补零

这里没有学到定时器这里就演示补零操作

要求
在这里插入图片描述

在这里插入图片描述

switch 的用法

在这里插入图片描述

循环

三种循环
for while do-while
在这里插入图片描述

循环嵌套

在这里插入图片描述

演练三角形

在这里插入图片描述

游览器断点调试

F12
打开控制台
在这里插入图片描述
点击Sources

在这里插入图片描述
有的游览器要点击源代码
游览器不同要看游览器

打断点打完后记得刷新
在这里插入图片描述

在这里插入图片描述
F8 字节跳到下一行
点这个也可以

在这里插入图片描述

小结

在这里插入图片描述

JS 数组

在这里插入图片描述

数组的定义

注意的是JS里的数组和java的不一样，JS数组和Java的集合非常相似
在这里插入图片描述
输出结果

JS是弱类型语言，所以JS没有泛型集合，JS的集合是可以存储不同的数据类型的

数组获取数据的方法

数组数据获取方法
在这里插入图片描述

数组的遍历

在这里插入图片描述

实例求最大值

在这里插入图片描述

join数组方法字符串数组的拼接

字符串.join(字符串列表)

在这里插入图片描述

数组添加数据

有规矩添加

注意不规则添加时
在这里插入图片描述

输出三号下标时

创建0-100的数组

在这里插入图片描述

小结

在这里插入图片描述

遍历演练

演练有三种，可以自己试一试

在这里插入图片描述

JS 函数

在这里插入图片描述

函数的定义与调用

在这里插入图片描述

带参函数与返回值

在这里插入图片描述

形参与实参

在这里插入图片描述

实参大于形参

需注意多出来的实参就丢弃
在这里插入图片描述

在这里插入图片描述

形参大于实参

在这里插入图片描述

演练

在这里插入图片描述

arguments (函数可以不要参数)

在这里插入图片描述

arguments 演示求总和

在这里插入图片描述

注意函数返回多个值会出现问题

在这里插入图片描述

不定长参数

在这里插入图片描述

函数嵌套

在这里插入图片描述

匿名函数

在这里插入图片描述

没有名字
在这里插入图片描述

作用域

在这里插入图片描述

n 结果为 200

再开开下面的代码

在这里插入图片描述

全局和局部变量的介绍

在这里插入图片描述
注意要留意 JS 里可以这样

在这里插入图片描述
用java 的思想来的话，建议这样用

作用域链

在这里插入图片描述

练一练

在这里插入图片描述
注意 js 可以先调用后定义

预解析

在这里插入图片描述

变量

第一种情况

在这里插入图片描述

第二种情况

在这里插入图片描述

函数

注意：函数可以先调用后定义
在这里插入图片描述

在这里插入图片描述

下面是python
注意：同样是弱类型语音 python 就不行， js 就可以
在这里插入图片描述

预解析规则

在这里插入图片描述

函数预解析

在这里插入图片描述

注意匿名函数不可以先调用后定义
注意看下面的代码，结果为
在这里插入图片描述
预解析的时候应该是这个样子的

练一练

案例1

在这里插入图片描述
最后结果为 undefined

在这里插入图片描述

案例2

在这里插入图片描述

案例3

在这里插入图片描述

a = undefined
b = 9

案例4

在这里插入图片描述

JS 对象

对象是什么

在这里插入图片描述

我们为什么要使用对象

在这里插入图片描述

创建对象方式一

在这里插入图片描述

这就是对象，在 java 中是双列集合,在 python 中是字典,在 js 中就是对象

演示

在这里插入图片描述

 var obj1 = {
            "name":"小明",
            "age":16,
            "showinfo":function (){
                alert("大家好，我叫"+this.name+"，我今年"+this.age+"岁")
            }

        }
        obj1.showinfo()

获取属性的值

在这里插入图片描述

这里小明没有截图，小明和年龄都可以输出来的

在这里插入图片描述

创建对象方式二

在这里插入图片描述

// 利用 new Object 创建对象
        var obj = new Object();

        obj.name = "小明";
        obj.age = 16;

        obj.showInfo = function () {
            alert("大家好，我叫" + this.name + "，我今年" + this.age + "岁")
        }
        obj.showInfo()

创建对象方式三构造函数

在这里插入图片描述

// 方式三
        // 定义函数
        function Student(name,age){
            this.name = name;
            this.age = age;

            this.showInfo = function (){
                alert("大家好，我叫" + this.name + "，我今年" + this.age + "岁")
            }
        }
        var xm = new Student("小明",16)
        xm.showInfo()
        var xh = new Student("小红",14)
        xh.showInfo()

遍历对象属性

在这里插入图片描述

演示

遍历对象得到所有属性和值

对象练一练

在这里插入图片描述

小结

在这里插入图片描述

内置对象

在这里插入图片描述

数学类 Math

在这里插入图片描述

Math 常用类

在这里插入图片描述

向上取整和向下取整

向上取整和向下取整
在这里插入图片描述

round 和 abs

在这里插入图片描述

生成随机数

在这里插入图片描述

获取最小值 a到最大值 b之间的随机整数

左边可能为零所以后面要加上一个最小值
在这里插入图片描述

演练猜数字小游戏

在这里插入图片描述

日期对象 data

在这里插入图片描述

练一练倒计时

在这里插入图片描述

计算还有多久到51劳动节

时间戳

在这里插入图片描述
获得时间戳有两种方法可以拿的

构造时间

在这里插入图片描述

五一的时间戳减去现在的时间戳就获取时间戳的差了

除以1000 就获的了秒了

在除于60就是分钟了

在除以60 就获的了小时了，在除以24就获得了天数了

在这里插入图片描述

小结

在这里插入图片描述

数组对象

在这里插入图片描述

遍历

利用 forEach 进行遍历
在这里插入图片描述
也可以这样写
值，下标，本身

数组的增删改查操作

在这里插入图片描述

增末尾添加 push

数组名.push(你要添加的值);

在这里插入图片描述

删末尾删除

pop 方法返回被移除的数据

数组名.pop();

在这里插入图片描述

增首位添加

unshift
在这里插入图片描述

删首位删除

shift
在这里插入图片描述

增删方法

在这里插入图片描述

数组排序

在这里插入图片描述
升序

降序
在这里插入图片描述
结合

在这里插入图片描述

数组索引

在这里插入图片描述

如果值存在就返回下标，如果不存在就返回-1
在这里插入图片描述
从右侧往前找

练一练

在这里插入图片描述

数组转字符串

在这里插入图片描述
注意python 里面字符串数组才可以用join 方法，在js里什么数据类型的数组都可以连接
有返回值，不会影响自身

在这里插入图片描述

数组切片

在这里插入图片描述
slice

在这里插入图片描述

splice 在这里插入图片描述
注意：在2的后面添加7,8,9 的话就会在被删除的数据那里添加 7,8,9 （1是从哪开始删，2是删除个数）

小结

在这里插入图片描述

字符串对象

基本

在这里插入图片描述

查找位置

在这里插入图片描述

演练

在这里插入图片描述

根据下标拿内容

在这里插入图片描述

演练统计

在这里插入图片描述

字符串方法

在这里插入图片描述

字符串分割

在这里插入图片描述

值的引用传递和值传递

在这里插入图片描述

演练

结果为三
在这里插入图片描述
注意下面结果为 [9,2,3]

在这里插入图片描述

传参情况

下面结果为 11 10
在这里插入图片描述

注意

我们上面的学的是第一个部分（语法）
在这里插入图片描述

wed APIs

api 与 web api

在这里插入图片描述

什么是web api

在这里插入图片描述

什么是 dom

在这里插入图片描述

dom 树

在这里插入图片描述

获取元素

在这里插入图片描述

输出的结果为null

下面代码会输出

<div id = "three">03</div>

在这里插入图片描述

根据标签来获取

在这里插入图片描述

演练

在这里插入图片描述

遍历

通过HTML5 新增方法获取（根据类来拿）

在这里插入图片描述传一个 css 选择器就可以了

在这里插入图片描述

演练 (通过 class 类来拿)

在这里插入图片描述

演练 (通过css 选择器来拿)

在这里插入图片描述

在这里插入图片描述

下面的加一个 All 就可以获取全部了

在这里插入图片描述

小结

在这里插入图片描述

获取box

在这里插入图片描述

事件基础

在这里插入图片描述

常见的鼠标事件

在这里插入图片描述

演练点击事件

在这里插入图片描述

演练行内式

在这里插入图片描述

操作元素

在这里插入图片描述

改变元素标签

在这里插入图片描述

演练

演示1
在这里插入图片描述
演示2

演示3

区别 innerText 与 innerHtml

在这里插入图片描述

innerHtml 添加值

在这里插入图片描述

修改属性值

在这里插入图片描述

演练

在这里插入图片描述

演练分时显示不同的图片

在这里插入图片描述

操作表单属性

在这里插入图片描述
示例

控制内容

演练修改值

在这里插入代码片`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>小明</h1>

<button >打他</button>



<input type="text" placeholder="你想让他干什么">



<script>
    // 获取对象
    var btn_wuyingmeng = document.querySelector("button")
    var input_text = document.querySelector("input")

    // 点击事件
    btn_wuyingmeng.onclick = function () {
        // 修改values
        input_text.placeholder = "小明收到了一点伤害";

    }

</script>

</body>
</html>`

演练密码显隐

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="password" placeholder="请输入密码" id="pwd">
<button id="btn">显示密码</button>


<script>
    // 获取对象
    var btn_wuyingmeng = document.querySelector("#btn");
    var input_text = document.querySelector("#pwd");
    var isHide = true;

    // 点击事件
    btn_wuyingmeng.onclick = function () {

        if (isHide) {
            // 修改
            input_text.type = "text";
            btn_wuyingmeng.innerText = "关闭显示";
            isHide = false;
        } else {


            input_text.type = "password";
            btn_wuyingmeng.innerText = "显示密码";
            isHide = true;
        }
    }

</script>

</body>
</html>

修改样式

在这里插入图片描述

演练开关灯

在这里插入图片描述

如果要改变文字的话但这样要一一换样式麻烦
注意这里的如果要写改样式的话要使用小驼峰比如在css 你写 background-color:— 在JS 就得写成 backgroundColor= ----;

在这里插入图片描述

先写样式

在这里插入图片描述

效果

在这里插入图片描述

显示隐藏

在这里插入图片描述

获得焦点案例

在这里插入图片描述

trim 是去掉左右空格
在这里插入图片描述

表单验证验证密码长度

在这里插入图片描述

小结

在这里插入图片描述

演练

在这里插入图片描述
效果

在这里插入图片描述

案例排查按钮点击

在这里插入图片描述

先让按钮默认变成绿色

在这里插入图片描述

鼠标进入与鼠标移除事件

在这里插入图片描述

在这里插入图片描述
这里建议写 this

最后效果
在这里插入图片描述

演练全选与取消

在这里插入图片描述

获取属性的值

在这里插入图片描述

自义定属性

在这里插入图片描述
注意
getAttribute 是获取自定义的属性值

在这里插入图片描述
这样就拿到自定义属性了

在这里插入图片描述

这个也可以拿系统属性
在这里插入图片描述

移除属性

在这里插入图片描述

演练 table 切换栏

在这里插入图片描述

自义定属性规范

在这里插入图片描述

节点

在这里插入图片描述

节点层级

在这里插入图片描述

父节点

在这里插入图片描述

演练

两个之前的区别是一个是拿节点一个是拿元素

在这里插入图片描述

子节点 1

在这里插入图片描述

演示

拿子节点
在这里插入图片描述

子节点 2

在这里插入图片描述

演示

在这里插入图片描述

案例下拉菜单

在这里插入图片描述

兄弟节点

在这里插入图片描述

第一个 .nextSibing

拿的是用不着的节点
在这里插入图片描述

第二个 .previousSibling

拿上一个元素的兄弟节点（元素节点）
在这里插入图片描述

创建节点

在这里插入图片描述

末尾添加

在这里插入图片描述

演练留言板

在这里插入图片描述

演示

在这里插入图片描述

首位添加

在这里插入图片描述

演示

在这里插入图片描述

事件进阶

传统事件注册

在这里插入图片描述

这样写时间会被覆盖

在这里插入图片描述

防止我的事件被覆盖
在这里插入图片描述

事件解绑

在这里插入图片描述

示例

在这里插入图片描述

最好是写函数名
在这里插入图片描述

dom 事件流

在这里插入图片描述

示例

这里 son and father 都会输出

在这里插入图片描述

捕获阶段

在这里插入图片描述

冒泡阶段

在这里插入图片描述

dom 事件流的方向

在这里插入图片描述

设置事件为冒泡方向

在这里插入图片描述

阻止冒泡

在这里插入图片描述

示例

先添加形参
然后形参掉一个方法

在这里插入图片描述

补充事件绑定

在这里插入图片描述

时间对象

在这里插入图片描述

事件常用对象

在这里插入图片描述

this 与事件的 target 属性

在这里插入图片描述

示例

在这里插入图片描述
注意看下面图片

点的是 ul

在这里插入图片描述

点的是01 (li)
在这里插入图片描述
点的05(li)

在这里插入图片描述

他们在特定的场合是一样的，但是他们不一样

事件类型

在这里插入图片描述

阻止默认事件

在这里插入图片描述

示例取消 a 标签默认事件

现象

在这里插入图片描述

取消 submit 按钮默认事件

在这里插入图片描述

在这里插入图片描述
给 text 设置一个 class = u

提交验证

在这里插入图片描述

这样写也可以，这两个是等价的

在这里插入图片描述

事件委托

在这里插入图片描述

bug 只获取了老的前六个，新添加的获取不了

在这里插入图片描述

事件委托2

上面代码不变
在这里插入图片描述

在这里插入图片描述

禁止复制

在这里插入图片描述



<script>
    // 阻止右击
    document.addEventListener("contextmenu",function (e){
        e.preventDefault();
    })

    // 禁止选中
    document.addEventListener("selectstart",function (e){
        e.preventDefault();
    })
</script>

节点操作

首位添加子节点

演练

添加第一个列

在这里插入图片描述

添加二个列

在这里插入图片描述

设置a 标签 herf

在这里插入图片描述

让a 标签有删除功能

在这里插入图片描述

定时器

在这里插入图片描述

示例

在这里插入图片描述

倒计时器

在这里插入图片描述

倒计时器让盒子消失

在这里插入图片描述

阻止定时器

在这里插入图片描述

案例重新发验证码

在这里插入图片描述

js 执行机制

在这里插入图片描述

location 对象

在这里插入图片描述

跳转百度

在这里插入图片描述

页面跳转显示用户名

第一个页面

在这里插入图片描述

获取参数

在这里插入图片描述

第二个页面

在这里插入图片描述

location 的方法

在这里插入图片描述

navigator

在这里插入图片描述

history 对象

在这里插入图片描述

回退示例

在这里插入图片描述

前进示例

在这里插入图片描述

JQ

Jquery 入门

关于Jquery

在这里插入图片描述

下载 jquery

在这里插入图片描述

两个模式

在这里插入图片描述

Jquery 用法

在这里插入图片描述

隐藏

在这里插入图片描述

设置css

在这里插入图片描述

窗体加载

在这里插入图片描述

元素加载

$(函数);

在这里插入图片描述
两个都可以

在这里插入图片描述

加载事后执行

在这里插入图片描述

Jquery 基础

dom 对象

在这里插入图片描述

jquery

在这里插入图片描述

jquery 对象的命名规则

用 jqyery 拿对象，前面最好加上 $ 符号

在这里插入图片描述

jquery 对象与 dom 对象的显示

在这里插入图片描述

不同对象用不同的方法

在这里插入图片描述

dom 对象转换为 jquery 对象

在这里插入图片描述

使用这个方法可以让文字不见

在这里插入图片描述

案例点击按钮让他消失

在这里插入图片描述

使用 dom 方式让他消失

在这里插入图片描述

jQuery 让他消失

在这里插入图片描述

jquery 对象转换为 dom 对象

在这里插入图片描述

播放
$(‘video’)[0].play()
$(‘video’)get(0).play()

转换的例子

jquery 对象 . [0] 就可以获取 dom 对象

在这里插入图片描述

案例窗体一加载让他自动播放视频

在这里插入图片描述

也可以这样写

在这里插入图片描述

两种对象互相转换

在这里插入图片描述

jquery 常用 api

基础选择器

在这里插入图片描述

层级选择器

在这里插入图片描述

样式调试

在这里插入图片描述

下面这个方法无需遍历

在这里插入图片描述

筛选选择器

这个是jquery 特有的选择器

在这里插入图片描述

筛选方法

在这里插入图片描述

找父辈

在这里插入图片描述

找一个类名为 box 的父辈

在这里插入图片描述

找孩子

在这里插入图片描述

找孩子找子孙

在这里插入图片描述

找兄弟

在这里插入图片描述

找兄弟中的 class 为 tom 的 li

在这里插入图片描述

后面的兄弟

在这里插入图片描述

前面的兄弟

在这里插入图片描述

找前面的兄弟其中的一个

在这里插入图片描述

判断是否有这个类

在这里插入图片描述

eq 筛选方法按下标来选

在这里插入图片描述

eq 用筛选器来,不用筛选方法

在这里插入图片描述

演练下拉菜单

在这里插入图片描述

鼠标事件

在这里插入图片描述

hover 传一个参就是鼠标移进去移出来都会发生的事

hover 传二个参第一个就是鼠标移进去事件第二个是鼠标移出来事件

mouseenter（鼠标移入事件）mouseleave（鼠标移出事件）

样式操作

在这里插入图片描述

样式连写

在这里插入图片描述

获取css

在这里插入图片描述

添加样式（类）

在这里插入图片描述

移除样式

jquery对象.removeClass()

在这里插入图片描述

切换样式

在这里插入图片描述

有就移除，没有就添加

在这里插入图片描述

JS 样式 VS JQ 样式

在这里插入图片描述

动画效果

显示隐藏

在这里插入图片描述

效果是点击按钮慢慢消失，再点击慢慢显示出来

在这里插入图片描述

隐藏后执行函数里内容

在这里插入图片描述

滑动

在这里插入图片描述

滑动 Toggle

在这里插入图片描述

淡入淡出

fadeOut 淡出
fadeIn 淡入

在这里插入图片描述

为了防止用户多次点击，对感观的影像，最好前面加上 stop()

在这里插入图片描述

设置不透明度
在这里插入图片描述

fadeTo
在这里插入图片描述

鼠标移到盒子上显示，移出隐藏
在这里插入图片描述

在这里插入图片描述

两个参数情况

在这里插入图片描述

自定义动画

在这里插入图片描述

jq对象.animate

在这里插入图片描述

案例王者网站

在这里插入图片描述

阻止动画对列

在这里插入图片描述

效果

在这里插入图片描述

属性操作

获取固有属性

只能拿系统属性

在这里插入图片描述

改变属性

在这里插入图片描述

获取勾选的数据

在这里插入图片描述

prop

如果选中显示 true
没有选中显示 false

在这里插入图片描述

获取自义定属性

在这里插入图片描述

获取自义定属性 attr

在这里插入图片描述

可以那系统属性

在这里插入图片描述

那按钮的选中状态不是很直观

在这里插入图片描述

attr 传两个参数

在这里插入图片描述

数据缓存 data

在这里插入图片描述

data 方法缓存数据，不给标签添加属性

在这里插入图片描述

data VS attr

在这里插入图片描述

演练

在这里插入图片描述

获取控件的值（表单）

在这里插入图片描述

设置值和标签（div…）

在这里插入图片描述

设置值

text 方法

在这里插入图片描述

html 方法

在这里插入图片描述

普通标签的内容操作 text html

在这里插入图片描述

节点操作

创建节点

在这里插入图片描述

添加节点

在这里插入图片描述

案例留言板添加

在这里插入图片描述

往后添加

在这里插入图片描述

往前面添加

在这里插入图片描述

删除会员

在这里插入图片描述

移除自己

在这里插入图片描述

移除自己的子级

在这里插入图片描述

节点操作小结

在这里插入图片描述

数据的遍历

原生 js 遍历

在这里插入图片描述

js 遍历for循环

在这里插入图片描述

js forEach 遍历

在这里插入图片描述

jq 遍历

在这里插入图片描述

jq 遍历2 (专门遍历对象)

这里就获得了每一个div

注意这里的 item 是dom 对象

在这里插入图片描述

案例购物车

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        input.num {
            width: 20px;
            text-align: center;
        }

        table {
            margin: 0 auto;
        }


    </style>

    <script src="jquery-1.8.2.min.js"></script>


    <script>
        function select_all() {
            // 获取我的状态
            var checked = $(this).prop("checked")

            // 获取其他的小复选框
            $(".goods").prop("checked", checked);

            // 总计
            count_all()
        }


        function count_all() {
            // 计算 个数
            var total_num = 0;
            // 计算 总结额
            var total_price = 0;

            // 计算个数
            $(".goods:checked").each(function (idx,item){
                var v = $(item).parent().siblings().children("input.num").val();
                total_num += parseFloat(v);

                // 结算总金额
                var price = $(item).parent().siblings().children("span.total").text();
                total_price += parseFloat(price)
            })

            // 数据回填
            $("span.all_Num").text(total_num);
            $("span.all_money").text(total_price.toFixed(2));
        }

        function goods_click() {
            // 拿到被选中的个数
            var checked_num = $(".goods:checked").size();
            // 获取总数
            var all_num = $(".goods").size();

            if (all_num === checked_num) {
                $(".selectAll").prop("checked", true);
            } else {
                $(".selectAll").prop("checked", false);
            }

            // 求总计
            count_all();
        }

        function num_jia() {
            // 获取目标控件 获取上一个兄弟
            var $ipt = $(this).prevAll("input");

            // 获取数量的值，让数量的值加一
            var num = $ipt.val();

            // 数值加一
            num++;

            // 重新赋值
            $ipt.val(num)

            // 调用总和的方法
            count_line_result(this);

            // 总计
            count_all()

        }

        function count_line_result(t) {
            // 找数量
            var num = $(t).parent().children("input").val();

            // 找单价
            var price = $(t).parent().siblings().children("span.price").text();

            // 求总和
            var line_result = num * price

            // 找当前行的价格的标签
            $(t).parent().siblings().children("span.total").text(line_result.toFixed(2));
        }

        function num_jian() {
            var $ipt = $(this).nextAll("input");
            // 获取数值
            var num = $ipt.val();

            // 数值减少
            num--;

            // 判断是否小于1，如果小于1,让新值等于1
            if (num < 1) {
                num = 1
            }

            // 新数据回填给文本控件
            // 重新赋值
            $ipt.val(num)

            // 调用总和的方法
            count_line_result(this);

            // 总计
            count_all()
        }

        function num_blur() {
            // 获取自己的值
            var num = $(this).val();

            // 判断非数值的情况
            if (isNaN(num)) {
                $(this).val(1);
                return
            }

            // 判断小于1的数据情况
            if (num < 1) {
                $(this).val(1);

            }

            // 调用总和的方法
            count_line_result(this);

            // 总计
            count_all()
        }

        function delete_tr() {

            $(this).parent().parent().remove();

            // 总计
            count_all()
        }

        $(function () {
            $(".selectAll").click(select_all);

            // 小复选框点击事件
            $("input.goods").click(goods_click);

            // 给+按钮添加事件
            $("button.jia").click(num_jia);

            // 给-按钮添加事件
            $("button.jian").click(num_jian);

            // 文本框失去焦点后 事件
            $("input.num").blur(num_blur);

            // 删除行
            $("a.delete").click(delete_tr);

        })


    </script>
</head>
<body>

<table width="600px" cellpadding="0" cellspacing="0" border="1">
    <caption><h1>购物车</h1></caption>

    <thead>
    <tr>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
    </tr>
    </thead>

    <tbody>
    <tr align="center">
        <td>
            <input type="checkbox" class="goods">
        </td>
        <td>
            十万个为什么
        </td>
        <td>
            ￥<span class="price">12.60</span>
        </td>
        <td>
            <button class="jian">-</button>
            <input type="text" class="num" value="1">
            <button class="jia">+</button>
        </td>
        <td>
            ￥<span class="total">12.60</span>
        </td>
        <td>
            <a href="javascript:;" class="delete">删除</a>
        </td>
    </tr>


    <tr align="center">
        <td>
            <input type="checkbox" class="goods">
        </td>
        <td>
            十万个为什么2
        </td>
        <td>
            ￥<span class="price">10.60</span>
        </td>
        <td>
            <button class="jian">-</button>
            <input type="text" class="num" value="1">
            <button class="jia">+</button>
        </td>
        <td>
            ￥<span class="total">12.60</span>
        </td>
        <td>
            <a href="javascript:;" class="delete">删除</a>
        </td>
    </tr>


    <tr align="center">
        <td>
            <input type="checkbox" class="goods">
        </td>
        <td>
            十万个为什么3
        </td>
        <td>
            ￥<span class="price">40.60</span>
        </td>
        <td>
            <button class="jian">-</button>
            <input type="text" class="num" value="1">
            <button class="jia">+</button>
        </td>
        <td>
            ￥<span class="total">12.60</span>
        </td>
        <td>
            <a href="javascript:;" class="delete">删除</a>
        </td>
    </tr>


    <tr align="center">
        <td>
            <input type="checkbox" class="goods">
        </td>
        <td>
            十万个为什么4
        </td>
        <td>
            ￥<span class="price">14.60</span>
        </td>
        <td>
            <button class="jian">-</button>
            <input type="text" class="num" value="1">
            <button class="jia">+</button>
        </td>
        <td>
            ￥<span class="total">12.60</span>
        </td>
        <td>
            <a href="javascript:;" class="delete">删除</a>
        </td>
    </tr>
    </tbody>


    <tfoot>
    <tr align="right">
        <td align="center">
            <input type="checkbox" class="selectAll">
        </td>

        <td colspan="5">
            已选中 <span class="all_Num">0</span> 个商品
            总金额为 ￥<span class="all_money">0.00</span>元
        </td>
    </tr>
    </tfoot>
</table>

</body>
</html>

正则表达式

获取正则表达式

在这里插入图片描述

可以这样理解
在这里插入图片描述

定义正则表达式兑现

正则对象 = /匹配的数据/

在这里插入图片描述

元字符

\b 匹配数字

在这里插入图片描述

exec 方法可以看到，这个字符串谁被匹配成功了，没有匹配成功返回null
在这里插入图片描述

input 方法可以获得和谁在比较

index 方法可以获得和谁匹配的下标

在这里插入图片描述

\s 验证空格

在这里插入图片描述

\w 验证英文符号

在这里插入图片描述

以某开头

在这里插入图片描述

以某结尾

在这里插入图片描述

数量修饰 +号代表一个或者无限个

在这里插入图片描述

数量修饰 ? 代表0个或者1个

在这里插入图片描述

数量修饰 * 代表0个获取无限个

在这里插入图片描述

数量修饰 {m} 限定有m个

在这里插入图片描述

数量修饰 {m,n} 限定至少出现m次，至多出现n次

在这里插入图片描述

. 匹配一切

ajax

在这里插入图片描述

参数

在这里插入图片描述

使用json 数据格式定义对象

在这里插入图片描述

使用json 数据格式定义对象数组

在这里插入图片描述

complete 参数

在这里插入图片描述

json 数组处理演示

有序包无序操作
这个有点麻烦

在这里插入图片描述

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="common.css">

    <script src="jquery-1.8.2.min.js"></script>

    <script>

        function write_student(class1207) {



            $.each(class1207,function (idx,item){

                // 生成一个tr

                var $tr = $("<tr>");

                // 生成两个td

                var $td1 = $("<td>");

                var name = item.name;

                $td1.text(name);

                var $td2 = $("<td>");

                var age = item["age"];

                $td2.text(age)

                // tr添加td

                $tr.append($td1);

                $tr.append($td2);

                // 让table添加tr

                $("table").append($tr);

            })



        }



        $(function () {

            var class1207 = [

                {"name": "孔明1", "age": 16},

                {"name": "孔明66", "age": 16},

                {"name": "孔明3", "age": 16},

            ];



            // 遍历呈现数据

            write_student(class1207);

        });

    </script>

</head>

<body>



<table width="300" border="1">

    <caption><h1>学生信息列表</h1></caption>

    <tr>

        <td>姓名</td>

        <td>年龄</td>

    </tr>





</table>



</body>

</html>

在这里插入图片描述

实现无刷新

在这里插入图片描述

新建后端接口

注意这里可能会乱码，要设置编码格式

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/student_list")
public class Student extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        [{"name":"张三","age":16},{"name":"李四","age":22}

        String stu_list = "[{\"name\":\"张三\",\"age\":16},{\"name\":\"李四\",\"age\":22}]";
        PrintWriter writer = resp.getWriter();
        writer.write(stu_list);
    }


}

在这里插入图片描述

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/student_list")
public class Student extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        [{"name":"张三","age":16},{"name":"李四","age":22}
//        Content-Type: text/html;charset=utf-8
        // 说到
        resp.setHeader("Content-Type","text/html;charset=utf-8");
        // 做到
        resp.setCharacterEncoding("utf-8");

        String stu_list = "[{\"name\":\"张三\",\"age\":16},{\"name\":\"李四\",\"age\":22}]";
        PrintWriter writer = resp.getWriter();
        writer.write(stu_list);
    }


}

在这里插入图片描述

前端放 ajax 请求接受json数据

在这里插入图片描述

后端

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/student_list")
public class Student extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        [{"name":"张三","age":16},{"name":"李四","age":22}
//        Content-Type: text/html;charset=utf-8
        // 说到
        resp.setHeader("Content-Type","text/html;charset=utf-8");
        // 做到
        resp.setCharacterEncoding("utf-8");

        String stu_list = "[{\"name\":\"张三\",\"age\":16},{\"name\":\"李四\",\"age\":22}]";
        PrintWriter writer = resp.getWriter();
        writer.write(stu_list);
    }


}

前端

<%--
  Created by IntelliJ IDEA.
  User: SSOA
  Date: 2022/5/21
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        function btn_click() {
            $.ajax({
                url: "student_list",
                data: {},
                type: "get",
                dataType: "json",
                success: function (result) {
                    // 遍历这个json 数据，进行相关操作
                    $.each(result, function (idx, item) {
                        // 新建行并添加到 table 中
                        var $tr = $("<tr>");
                        $tr.css("text-align","center")
                        $("table").append($tr);
                        // 新建 td 放到 tr 里面
                      var $td1 = $("<td>");
                      $td1.text(item.name)
                      $tr.append($td1)
                      var $td2 = $("<td>");
                      $td2.text(item.age);
                      $tr.append($td2)
                    })
                }
            })
        }

        $(function () {
            $("button").click(btn_click);
        })
    </script>


</head>
<body>

<button>点我那数据</button>

<table width="600px" border="1" cellpadding="0" cellspacing="0" >
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>

    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

</body>
</html>

fastjson

fastjson 引入

拼json 字符串功能
可以看出是非常累的

package servlet;

import bean.Student;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/student_list")
public class StudentList extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        [{"name":"张三","age":16},{"name":"李四","age":22}
//        Content-Type: text/html;charset=utf-8
        // 说到
        resp.setHeader("Content-Type","text/html;charset=utf-8");
        // 做到
        resp.setCharacterEncoding("utf-8");

        // 模拟对象集合
        // 模拟业务层拿数据
        List<Student> studentsList = getStringList();
        String jsonStr = "";
        jsonStr += "[";

        // json 字符串
        for (Student s :
                studentsList) {
            String fmt = "{\"name\":\"%s\",\"age\":%s}";
            String d = String.format(fmt,s.getName(),s.getAge());
            jsonStr += d;
            jsonStr += ",";

        }

        jsonStr = jsonStr.substring(0,jsonStr.length() - 1);
        jsonStr += "]";
        System.out.println(jsonStr);

        PrintWriter writer = resp.getWriter();
//        writer.write(stu_list);
    }

    private List<Student> getStringList() {
        /// 模拟返回数据

        // 对象集合
        List<Student> studentList = new ArrayList<>();

        // 新建对象，设置属性
        bean.Student xm = new bean.Student();
        xm.setName("小明");
        xm.setAge(16);
        xm.setDesc("ssssss");


        // 把对象添加到集合中

        return studentList;
    }


}

fastjson 使用

在这里插入图片描述

示例

在这里插入图片描述

bean

package bean;

public class StudentBean {
    // 定义属性
    private String name;
    private int age;
    private String beizhu;

    // 提供字符串显示形态

    @Override
    public String toString() {
        return "StudentBean{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", beizhu='" + beizhu + '\'' +
                '}';
    }

    // 提供功有方法
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getBeizhu() {
        return beizhu;
    }

    public void setBeizhu(String beizhu) {
        this.beizhu = beizhu;
    }
}

新方法拼 json 字符串

package servlet;

import bean.Student;
import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/student_list")
public class StudentList extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        [{"name":"张三","age":16},{"name":"李四","age":22}
//        Content-Type: text/html;charset=utf-8
        // 说到
        resp.setHeader("Content-Type", "text/html;charset=utf-8");
        // 做到
        resp.setCharacterEncoding("utf-8");

        // 模拟对象集合
        // 模拟业务层拿数据
        List<Student> studentsList = getStringList();

        String jsonStr = JSON.toJSONString(studentsList);
        System.out.println(jsonStr);

//        jsonStr += "[";
//        // json 字符串
//        for (Student s :
//                studentsList) {
//            String fmt = "{\"name\":\"%s\",\"age\":%s}";
//            String d = String.format(fmt,s.getName(),s.getAge());
//            jsonStr += d;
//            jsonStr += ",";
//
//        }
//
//        jsonStr += jsonStr.substring(0,jsonStr.length() - 1);
//        jsonStr += "]";
//        System.out.println(jsonStr);
//


        PrintWriter writer = resp.getWriter();
//        writer.write(stu_list);
    }

    private List<Student> getStringList() {
        /// 模拟返回数据

        // 对象集合
        List<Student> studentList = new ArrayList<>();

        // 新建对象，设置属性
        bean.Student xm = new bean.Student();
        xm.setName("小明");
        xm.setAge(16);
        xm.setDesc("ssssss");

        // 新建对象，设置属性
        bean.Student xh = new bean.Student();
        xh.setName("小红");
        xh.setAge(23);
        xh.setDesc("tttttttttt");

        studentList.add(xm);
        studentList.add(xh);
        // 把对象添加到集合中

        return studentList;
    }


}

<%--
  Created by IntelliJ IDEA.
  User: SSOA
  Date: 2022/5/21
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        function btn_click() {
            $.ajax({
                url: "student_list",
                data: {},
                type: "get",
                dataType: "json",
                success: function (result) {
                    // 遍历这个json 数据，进行相关操作
                    $.each(result, function (idx, item) {
                        // 新建行并添加到 table 中
                        var $tr = $("<tr>");
                        $tr.css("text-align", "center")
                        $("table").append($tr);
                        // 新建 td 放到 tr 里面
                        var $td1 = $("<td>");
                        $td1.text(item.name)
                        $tr.append($td1)
                        var $td2 = $("<td>");
                        $td2.text(item.age);
                        $tr.append($td2)
                    })
                }
            })
        }

        $(function () {
            $("button").click(btn_click);
        })
    </script>


</head>
<body>

<button>点我那数据</button>

<table width="600px" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>

    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

</body>
</html>

在这里插入图片描述

get 发 ajax 请求

在这里插入图片描述

示例

注意这样既可以处理 get 请求或者是 post 请求

在这里插入图片描述

post 方法也是一样

在这里插入图片描述

json 请求

在这里插入图片描述

JS 面向对象

在这里插入图片描述

构造方法

在这里插入图片描述

构造器实例化传参

在这里插入图片描述

方法的定义与应用

在这里插入图片描述

带参的方法

在这里插入图片描述

继承

在这里插入图片描述

示例

在这里插入图片描述

调用父类的构造方法

在这里插入图片描述

方法中的局部变量和成员变量获取

在这里插入图片描述

明确 this

在这里插入图片描述

JavaScript 类与对象

在这里插入图片描述

老版本创建对象方式

在这里插入图片描述

构造函数 new

在这里插入图片描述

关注构造函数中的this

在这里插入图片描述

这里需要注意

在这里插入图片描述

类属性类方法

js中的静态属性相当于java中的static的属性或方法

在这里插入图片描述

构造方法中定义成员方法存在的问题

在这里插入图片描述

结果是 false

在这里插入图片描述

在构造方法的原型对象上放数据

在这里插入图片描述

获取原型对象的构造函数

在这里插入图片描述

关于 this

在这里插入图片描述

给原型对象写方法

原生的数组没有求和方法，这里我们可以自行添加
在这里插入图片描述

在这里插入图片描述

在经典 JS (es5之前) 怎么实现继承

在这里插入图片描述

可以看都这里两个方式都可以调用此函数

在这里插入图片描述

利用 call 方法进行传参

如果func方法有参数，那么给call方法后面追加参数

在这里插入图片描述

继承

父类

在这里插入图片描述

子类

在这里插入图片描述

改变子类原型对象的指向

在这里插入图片描述

es 6

ES 6 介绍

在这里插入图片描述

let

let 让变量有块级范围

在这里插入图片描述

变量预加载

在这里插入图片描述

let 变量具有暂时性死区特性

在这里插入图片描述

练习

结果是多少

在这里插入图片描述

结果是 2 2

练习二

结果是多少

在这里插入图片描述

结果是 0 1

const 常量

在这里插入图片描述

声明常量一定要给值

在这里插入图片描述

consti声明的常量不可更改值（内存地址）但可以

在这里插入图片描述

比较三个声明方式

在这里插入图片描述

这里和python 很像

下面是python
在这里插入图片描述

如果值对不上

在这里插入图片描述

对象结构

在这里插入图片描述

赋值

自定义一个变量名，解构得到对象属性的值

在这里插入图片描述

箭头函数

在这里插入图片描述

箭头函数一行代码有返回值的情况

在这里插入图片描述

箭头函数如果形参只有一个

在这里插入图片描述

箭头函数的简写

在这里插入图片描述

箭头函数只有一参只返回一行代码的数据

fn m =mm； 
 var res = fn（4）； 
 console.log（res）；

箭头行数的中的 this

在这里插入图片描述

字典对象中的 this

在这里插入图片描述

注意：这个字典中的 this 指向的是window 窗口

在这里插入图片描述

注意看下面的例子

在这里插入图片描述

这个里面的 this.age 输出的是 100

剩余参数（变长参数）

变长的形参可以在它前面加三个点
得到的数据是一个类似于数组的有序容器

在这里插入图片描述

剩余参数配合解构赋值

在这里插入图片描述

扩张运算符

在这里插入图片描述

数组合并

在这里插入图片描述

SSOA6

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript与JavaQuery

JavaScript与JavaQuery目录JavaScript与JavaQueryjs 基础变量与基本数据类型CPU 内存硬盘JavaScript历史js 的作用JS的功效（地位）游览器中的jsJS的组成体验 JS输出变量声明变量特性变量命名规范数据类型js 中的进制数字的取值范围js 基础变量与基本数据类型CPU 内存硬盘JavaScript历史js 的作用JS的功效（地位）游览器中的jsJS的组成体验 JS行内式<div onclick=
复制链接

扫一扫