Js

最新推荐文章于 2023-10-21 22:07:07 发布

DuanD多吃点

最新推荐文章于 2023-10-21 22:07:07 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/duanduan339/article/details/98482009

版权

一、js简介

什么是js

JS：全拼JavaScript。是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。这“寄生”在HTML体内，随网络传输到客户端，在浏览器内存里运行。
js的作用

实现页面动态效果

可以操作浏览器
可以操作网页

JS的组成

netscape livescript 网景浏览器 Firefox JScript IE ECMA

ECMAScript：基本语法规范
BOM: Browser Object Model，浏览器对象模型。js代码操作bom对象的属性和方法，可以操作浏览器了
DOM：Document Object Model，文档对象模型。js代码操作dom对象的属性和方法，可以操作网页了

在HTML里引入JS

4.1 内部js

<script>
    alert();
</script>

4.2 外部js

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

4.3 注意：

一个script标签作用应该是单一的：
- 不能既引入外部js、又在标签体里写内部js
js代码在HTML里任何位置都可以运行，但原则是：
- js越晚加载越好，建议写在body结束标签之前

二、JS基本语法

基本语法

1.1 变量定义

js里所有变量定义都使用：var
js是弱类型语言：定义变量之前，不需要声明变量类型
js是动态类型语言：变量的类型不固定，值是什么类型，变量就是什么类型

1.2 数据类型

基本数据类型
- number：数字类型
- boolean：布尔类型
- string：字符串类型
- undefined：未定义类型，只有一个值：undefined
- object：对象类型
  - js里提供了9个内置对象（下节详细说）
  - 使用关键字：new 创建对象。比如：var date = new Date();

1.3 运算符

js的运算符和Java非常相似，也有：+, -, *, /, +=, -=, *=, /=, =, !=, &&, ||, !, >, >=, <, <=, ==。而且用法也基本一样。

不同的有：

== 和===：
- ==：只比较值。只要值一样，就是true
- ===：（全等）比较值和类型。只有值和类型都一样，才是true
±*/：
- +：和Java的是一样的。如果有字符串的+，是字符串的拼接
- -*/：如果有字符串，js会转换成数字之后再运算
  - 如果转换数字失败，结果是NaN （Not a Number）
  - 如果除法时，除以0，结果是Infinity（表示数字无穷大）

1.4 流程控制语句

js的流程控制语句和Java非常相似，也有：if, else, else if, for, switch, while,…。而且用法也一样.

不同的有：

if判断：
- 判断条件可以是任何类型的数据
- false, 0, “”, null, undefined 是false；其它都是true

函数（重点）

2.1 命名函数/普通函数

定义

function 函数名(形参1, 形参2,…){
//函数体的代码
return 结果;
}
调用

var result = 函数名(实参1,实参2,…)

2.2 匿名函数

没有名称的函数，叫匿名函数

把匿名函数赋值给一个变量，通过变量名调用函数

var fn = function(a, b){
return a+b;
}

var result = fn(1, 2);
把匿名函数作为另外一个函数的实参传递进去

//让浏览器每间隔2秒，执行一次函数：弹窗一次
setInterval(function(){
alert();
}, 2000);

2.3 js的函数没有重载

js函数没有重载
通过函数隐含变量arguments得到所有实参数组

事件（重点）

3.1 事件相关的概念

事件源：被监听的对象。一般是标签或者是js对象
事件(监听器)：被监听的对象上发生的动作或者状态变化
响应行为：监听到事件源上动作/状态，要执行的代码。要编写的代码

比如：页面上一个按钮，按钮上边发生一件事：被点击了，弹出一个窗口

事件源是按钮，事件是能够监听单击动作的一个监听器，响应行为是弹窗

3.2 js提供的常见事件

事件(监听器) 事件描述
onclick 监听用户在某标签上单击的动作
ondblclick 监听用户在某标签上双击的动作
onsubmit 监听用户在某表单上提交表单的动作
onchange 监听用户在某表单项上更改表单项的值的动作，通常用于监听下拉框被改变的动作
onload 监听浏览器把页面加载完成的状态变化
onfocus 监听用户把光标点进了某标签
onblur 监听用户把光标移走了

3.3 js注册/绑定事件到事件源

监听器事件，必须要绑定到事件源上，才能够监听到事件源上发生的动作或者状态变化。

普通函数方式

三、操作浏览器：JS的bom对象

bom对象简介

BOM：Browser Object Model，浏览器对象模型。js提供的一些对象，可以调用这些对象的方法和属性，来操作浏览器，完成js的第一大功能。

window：浏览器窗口封装成的对象
location：浏览器地址信息封装成的对象：页面跳转
history：浏览器历史记录对象：历史记录切换
navigator：浏览器信息对象：可以获取浏览器内核、版本等信息
screen：浏览器屏幕显示信息对象：浏览器的位置大小等

bom对象的使用

2.1 window对象

2.1.1 让浏览器弹窗

普通弹窗：alert(string)
- 没有返回值
确认弹窗：confim(string)
- 确定返回true；取消返回false
输入弹窗：prompt(string)
- 确定返回输入的内容；取消返回null

2.1.2 让浏览器开启定时器

执行多次的定时器
- 开启定时器：
  var timer = setInterval(函数对象, 间隔毫秒值)
  让浏览器，每间隔指定的毫秒值，执行一次函数对象的内容
- 取消定时器：
  clearInterval(timer);
执行一次的定时器（延时器）
- 开启定时器：
  var timer = setTimeout(函数对象, 延迟毫秒值)
  让浏览器，延迟指定毫秒值之后，执行函数的内容
- 取消定时器：
  clearTimeout(timer);

2.1.3 提供了一些全局函数

parseInt(string)：转换成整数
parseFloat(string)：转换成小数
eval(string)：把字符串作为js代码执行一次

2.2 location对象(重点)

获取当前网址：var url = location.href;
设置当前网址（网页跳转）：location.href = “http://www.baidu.com”
- 在新窗口打开页面：window.open(“http://www.baidu.com”)
刷新当前页：location.reload()

2.3 history对象(了解)

前进一步：history.forward()
后退一步：history.back()
切换n步：history.go(n)
- n：如果为正整数，表示前进n步
- n：如果是负整数，表示后退n步

四、操作网页：JS的dom对象

dom对象简介
dom对象操作网页

2.1 操作标签

2.1.1 获取标签(重点)

根据id获取一个：document.getElementById("id值 ")
根据name获取一批：document.getElementsByName(“name属性值”)
根据标签名称获取一批：document.getElementsByTagName(“标签名称”)
根据类名获取一批：document.getElementsByClassName(“类名”)
注意：
getElementsByxxx()类的方法
document对象可以使用：表示从整个网页里查找
Element对象也可以使用：表示从某个标签里查找

2.1.2 创建标签

var item = document.createElement(“标签名称”);

注意：创建出来的标签，不会直接显示到页面上。要想显示，就必须要插入到dom树上

2.1.3 插入标签

父标签对象.appendChild(子标签对象)

2.1.4 删除标签

标签对象.remove()

2.1.5 操作标签体(重点)

获取标签体：var html = 标签对象.innerHTML;
设置标签体：标签对象.innerHTML = “
HTML代码会生效
”
设置标签体，是覆盖式设置。

2.2 操作属性(重点)

2.2.1 获取属性

var value = 标签对象.属性名
var value = 标签对象.getAttribute(“属性名”)

2.2.2 设置属性

标签对象.属性名 = 值
标签对象.setAttribute(“属性名”, 属性值)

2.2.3 删除属性

标签对象.removeAttribute(“属性名”)

注意：

通过.属性名的方式操作属性，应用更简单更普遍

如果.属性名的方式不能操作，就使用Attribute相关的方法进行操作

	1. 属性名是关键字的属性，.属性名方式不能操作

	2. 自定义的属性，.属性名的方式不能操作

五、JS的引用数据类型(内置类)

引用数据类型简介

js里总共有9个引用数据类型

名称介绍
Array 数组
Boolean boolean的包装类
Date 日期
Math 数学工具
Number number的包装类
String string的包装类
RegExp 正则表达式
Functions 全局函数
Events 事件

引用数据类型的使用

2.1 Array数组

创建数组对象
var arr1 = new Array();//创建长度为0的空数组
var arr2 = new Array(3);//创建长度为3的空数组
var arr3 = new Array(“a”, “b”);//创建数组，并初始化元素
```
var arr = [];
var arr = ["a","b"];
```
常用属性
- length：
  - 获取数组的长度：var len = arr.length;
  - 设置数组的长度：arr.length = 5;
    - 如果是扩容了，那么新扩容的元素的值是undefined
    - 如果是收缩了，是截取前n个
常用方法：
- cancat()：把多个数组合并成一个
  var arr = arr1.concat(arr2, arr3);
- join()：把数组里的元素拼接成字符串，按照指定的分隔符进行分隔
  var str = arr.join(",");
- reverse()：把数组里的元素顺序进行反转
  注意：方法直接在原数组里颠倒顺序，没有返回值
  arr.reverse();
- sort()：数组里的元素进行排序。
  注意：
  默认是以字符的ASCII进行排序的
  方法直接在原数组里排序，没有返回值
  arr.sort();

2.2 Date日期

创建日期对象
var date = new Date();//当前日期当前时间
var date = new Date(y,M,d);//创建指定日期的时间。y：年； M：月，从0开始；d:日
var date = new Date(y,M,d,H,m,s);//创建指定日期指定时间。H:时；m：分；s：秒
常用方法：
- toLocaleString()：转换成本地日期格式的字符串
- getTime()：获取毫秒值
- setTime(ms)：以毫秒值设置一个日期对象

2.3 Math数学工具

不需要创建对象，直接使用其属性和方法
常用的属性和方法：
var v = Math.PI;//3.14xxx 获取圆周率
v = Math.abs(-3);//3 求绝对值
v = Math.ceil(3.00000000001);//4 向上取整
v = Math.floor(3.999999); //3 向下取整
v = Math.round(3.49); //3 四舍五入
v = Math.random();//随机数：[0, 1)
v = Math.random() * 10 + 90;//90~100的随机数

2.4 RegExp正则表达式

创建正则表达式对象
var reg = new RegExp(“正则表达式字符串”);
var reg = /正则表达式/;
常用的方法
- test(string)：校验字符串的格式是否匹配正则表达式
  - 返回值：boolean。校验通过是true；否则是false

DuanD多吃点

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js

js一、js简介什么是jsJS：全拼JavaScript。是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。这“寄生”在HTML体内，随网络传输到客户端，在浏览器内存里运行。js的作用实现页面动态效果可以操作浏览器可以操作网页JS的组成netscape livescript 网景浏览器 Firefox JScript IE ECMA...
复制链接

扫一扫