JavaScript
Posted 戈达尔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript相关的知识,希望对你有一定的参考价值。
javascript
JavaScript与Java的关系
不要误会,可能有许多人会猜测 JavaScript 和 Java 是同一批人出的吧。但实际是两者没有任何关联,实际上是当时 Java 很火,然后 JavaScript 去蹭了波热点。
JavaScript的引入方式
在 Script 标签里写
<script> 在这里写你的JS代码 </script>
引入额外的JS文件
<script?src="myscript.js"></script>
声明变量
- avaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
- 声明变量使用 var 变量名; 的格式来进行声明
- ES6新增了let命令,用于声明变量。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。
- 使用 const 来声明常亮
JavaScript数据类型
JavaScript 是弱类型语言 声明变量时不需要特定声明他的数据类型
数值类型(Number)
JavaScript不区分整型和浮点型,就只有一种数字类型。
var a = 12.34;
var b = 20;
将字符串类型数值转为数值类型
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。
parseFloat("123.456") // 返回123.456
字符串(String)
var a = "Hello"
var b = "world;
var c = a + b;
常用方法:
方法 | 说明 |
---|---|
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt() | 返回指定位置字符 |
.concat() | 字符串拼接 |
.indexOf() | 子序列位置 |
.substring() | 根据索引获取子序列 |
.slice() | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split() | 分割 |
布尔值(Boolean)
var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false
对象(Object)
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是:使用单独的变量名来存储一系列的值。
var a = [123, "ABC"];
常用方法:
方法 | 说明 |
---|---|
.length | 数组的大小 |
.push() | 尾部追加元素 |
.pop() | 获取尾部的元素,并删除 |
.unshift() | 头部插入元素 |
.shift() | 头部移除元素 |
.slice() | 切片 |
.reverse() | 反转 |
.join() | 将数组元素以字符串间隔连接成字符串 |
.concat() | 数组拼接 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
运算符
算数运算符
+(加)、-(减)、*(乘)、/(除)、%(取余)、++(自增)、--(自减)
比较运算符
>(大于)、>=(大于等于)、<(小于)、<=(小于等于)、!=(不等于)、==(等于)、===(全等)、!==(不全等)
逻辑运算符
&&(与)、||(或)、!(非)
赋值运算符
=、+=、-=、*=、/=
流程控制
if-else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
if-else if-else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5){
console.log("a < 5");
}else {
console.log("a = 5");
}
switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...") }
for
for (var i=0; i<10; i++) {
console.log(i);
}
while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b /* a > b成立执行?后的语句,不成立执行:后的语句 */
var a = 10, b = 20;
var x = a > b?a:(b=="20")?a:b;
函数
使用 function 关键字定义
function func(){
函数体
};
// 带参函数
function func1(a, b){ // 调用函数时按照必须参数传递,多余参数舍弃
console.log(a, b);
return [a, b]; // 多个参数使用数组的形式返回
};
// 接收对于的参数
function func2(a, ...b){ // 使用三个点可以用来接收多余的参数
console.log(a, b);
console.log(a, arguments[0]) // 类似于Array并接收所有的参数只能查看有几个元素和使用位置取值
}
// 匿名函数
(function (a, b){
console.log(a, b);
})(1, 2); // 立即执行函数内容
// ES6还可以使用 => 的形式定义函数
var func3 = (a, b) => a + b;
// 等同于
function func3(a, b){
return a+b;
}
内置对象
Date对象
// 方法1:不指定参数
var d1 = new Date();
// 方法2:参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
// 方法3:参数为毫秒数
var d3 = new Date(5000);
// 方法4:参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
Date对象方法
方法 | 描述 |
---|---|
getDate | 获取日 |
getDay | 获取星期几(从0~6代表从周日(0)到周六(6)) |
getMonth | 获取月份,月份从0开始 |
getFullYear | 获取年份 |
getYear | 获取从1900年到现在的年数 |
getHours | 获取小时 |
getMinutes | 获取分钟 |
getSeconds | 获取秒 |
getMilliseconds | 获取毫秒 |
getTime | 获取从1970年到现在的毫秒数 |
JSON对象
var str1 = '{"name": "Gredae", "age": 18}';
var obj1 = {"name": "Gredae", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
RegExp对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 注意事项,正则表达式中不能有空格
// 正则校验数据
reg1.test('json666')
// 全局匹配
var s1 = 'asdjfa';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('asdjfa');
reg2.test('asdjfa');
reg2.lastIndex;
/*第二个注意事项,全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test(); // 不传递时默认传递一个undefined
Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数(底为e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
函数 | 描述 |
---|---|
abs() | 绝对值 |
exp() | 返回e的指数 |
floor() | 向下取整 |
log() | 返回自然数的对数 |
max() | 返回最大值 |
min() | 返回最小值 |
pow(x, y) | 返回x的y次幂 |
random() | 返回0~1的随机数 |
round() | 四舍五入最接近的数 |
sqrt() | 平方根 |
sin() | 正弦值 |
tan() | 正切值 |
BOM
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。
windows对象
所有浏览器都支持 window 对象。
- window.innerHeight:浏览器窗口高度
- window.innerWidth:浏览器窗口宽度
- window.open():打开新窗口
- window.close():关闭当前窗口
window的子对象
navigator
- navigator.appName:Web浏览器全称
- navigator.appVersion:Web浏览器版本
- navigator.userAgent:Web浏览器的信息(一般防爬措施需要验证userAgent信息)
- navigator.platform:操作系统信息(信息不准确)
history对象
- history.forward():前进
- history.back():后退
location对象
- location.href:获取地址栏URL,设定值可以实现跳转功能
- location.reload:重新加载页面
弹出框
可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
- 警告框:alert(123)
- 确认框:confirm("是否退出?")
- 提示框:prompt("请输入你的名字:")
计时器
setTimeout()
在一定时间间隔之后来执行代码或者函数
清除使用clearTimeout,需要指定计时器对象
setInterval()
在一定时间间隔之后反复来执行代码或者函数
清除使用clearInterval,需要指定计时器对象
DOM
DOM (Document Object Model)是指文档对象模型,通过它,可以访问html文档的所有元素。
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element 对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
- 注释是注释节点(comment对象)
获取节点对象
- getElementById 根据ID获取标签
- getElementsByClassName 根据class属性获取标签对象
- getElementsByTagName 根据标签名称合集
间接获取节点对象
- parentElement 父节点标签元素
- children 所有子标签
- firstElementChild 第一个子标签元素
- lastElementChild 最后一个标签元素
- nextElementSibling 下一个兄弟标签元素
- previousElementSibling 上一个兄弟标签元素
创建节点对象:createElement
var divEle = document.createElement("div");
添加子节点
为节点添加子节点
var imgEle = document.createElement("img");
imgEle.setAttribute("src", "1.jpg"); // 为节点添加属性
var divEle = document.getElementById("div");
divEle.appendChild(imgEle); // 添加为其后代节点
divEle.insertBefore(imgEle, divEle.childNodes[0]) // 在子节点前面添加子节点
删除子节点
为节点删除子节点
var divEle = document.getElementById("div");
divEle.removeChild(divEle.childNodes[2]); // 删除节点下的子节点
替换子节点
为节点替换子节点
var new_text = document.createTextNode("这是新的标签!");
var divEle = document.getElementById("div");
divEle.replaceChild(new_text, divEle.childNodes[2]);
属性节点
获取文本节点的值
var divEle = document.getElementById("div"); var Text = divEle.innerText; var Html = divEle.innerHTML;
设置文本节点的值
var divEle = document.getElementById("div"); divEle.innerText="1"; divEle.innerHTML="<p>2</p>";
属性
var divEle = document.getElementById("div");
divEle.setAttribute("age","18"); // 设置属性
divEle.getAttribute("age"); // 获取属性
divEle.removeAttribute("age"); // 删除属性
取值
适用于以下标签:
input
select
textarea
var lEle = document.getElementById("li");
console.log(lEle.value);
var sEle = document.getElementById("op");
console.log(sEle.value);
var tEle = document.getElementById("text");
console.log(tEle.value);
class操作
className // 获取所有样式类名(字符串)
classList.remove(cls) // 删除指定类 classList.add(cls) 添加类
classList.contains(cls) // 存在返回true,否则返回false
classList.toggle(cls) // 存在就删除,否则添加
样式操作
var pEle = document.getElementById("p");
pEle.style.backgroundColor="red";
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript
常用事件 | 描述 |
---|---|
onclick() | 当元素被单击触发 |
ondblclick() | 当元素被双击触发 |
onfocus() | 当元素获取焦点 |
onblur() | 当元素失去焦点 |
onchange() | 当域内容被改变 |
onload() | 当页面内容加载完毕 |
onkeydown() | 当键盘按下 |
onkeyup() | 当键盘松开 |
onkeypress() | 当键盘按下并松开 |
onmouserdown() | 当鼠标按下 |
onmousemove() | 当鼠标被移动 |
onmouseout() | 当鼠标从元素移开 |
onmouseover() | 当鼠标移动到元素上 |
onselect() | 当用户选中文本 |
onsubmit() | 当表单被提交 |
绑定方式
方式一:
<script> function changeColor(his){ his.style.backgroundColor="green"; } </script> <div id="d1" onclick="changeColor(this);">点我</div>
方式二:
<div id="div">点我</div> <script> var divEle = document.getElementById("div"); divEle.onclick=function () { divEle.innerText="呵呵"; } </script>
以上是关于JavaScript的主要内容,如果未能解决你的问题,请参考以下文章