javascript

最新推荐文章于 2024-05-21 15:30:00 发布

原创最新推荐文章于 2024-05-21 15:30:00 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

javascript

浏览器脚本语言

基本数据类型

number 数字类型， 1.0 100
string 字符串类型 "hello" 'world'
null 空值
undefined 未定义比如一个变量还没有赋值
布尔类型 true false

变量是弱类型，值有类型
var a = 10; // var 表示任意的类型，数字，字符串，空值 ...
var b = "hello";

调试基本方法

用F12调出控制台窗口，切换到Console ，可以输入js代码进行调试
console.log(变量); 用来将变量或表达式结果输出到console窗口

复杂类型

数组

var a = new Array(); // 新建一个空数组
var a = []; // 新建一个空数组
var a = [1,2,3,4,5]; // 五个整数元素数组

访问数组元素, 通过数组[下标]来访问
遍历数组：
for(var i = 0; i < a.length; i++) { // 推荐写法
console.log(a[i]);
}
for(var i in a) {
console.log(a[i]);
}

添加元素
.push(元素); // 在数组的尾部新增
.unshift(元素); // 在数组的头部新增
修改元素
直接通过下标修改
删除元素
.pop(); // 删除尾部元素
.shift(); // 从头部删除元素
.splice(要删除的下标, 要删的个数);
排序
.sort();
.sort( (a,b) => b - a );

var a = [1, 21, 12, 2, 3, 31]; // 默认不带参数排序，是把数字当做了字符串进行的排序
a.sort( (a,b) => a - b ); // 减法可以让字符串再变回数字

对象

js对象属性可以动态添加
例如 :
var a = new Object(); //创建一个空对象
a.name = "张三";
a.age = 18;
还可以使用 delete a.age 来删除a对象中的age属性

简化写法：
var a = { }; //创建一个空对象
格式: { 属性名:属性值, 属性名:属性值 ...}
例如 :
var a = {"name":"张三", "age":18}; // 属性名两边的双引号可以省略

函数

function 函数名(a, b) {
	...
}

function sum (a, b) {
return a + b;
}
等价写法
var sum = function (a, b) { // 匿名(没有名字的函数)
return a + b;
}
调用函数 sum(5, 4);

js中实际参数和形参可以不匹配
sum(4,5,6)
sum(4,5,6,7)
sum(4); // 4+undefined = NaN (not a number)

function sum (a, b) {
	return a + b;
}

function sum (a, b, c) {
	return a + b + c;
}

如果定义了两个同名函数，后定义的会覆盖前面定义的。

日期

var date = new Date();
date.getFullYear(); // 获取年份
date.getMonth(); // 获得月份(从0开始)
date.getDate(); // 获取日期

var date = new Date(1535445539597); // 根据毫秒值创建日期

正则表达式

var reg = new RegExp("正则表达式"); // 用new来创建
简化写法
var reg = /正则表达式/;

例如：是否全部是数字
var reg = /[1]+$/;
reg.test("目标字符串");

验证是否是手机号码
var reg = /^1[35789][0-9]{9}$/;
reg.
test("目标字符串");
替换功能
var str = "aaaabbbcccaaa";
str.replace(/a+/, "A"); // 只会替换第一个匹配到的子串
str.replace(/a+/g, "A"); // 会替换所有匹配的子串

js配合html实现网页编程

查找元素

document.getElementById(标签id值); // 在设计id时要避免重复，id的取值应当唯一
document.getElementsByTagName(标签名字); // 根据标签的名字查找多个元素(获得的是数组集合)
父元素.getElementsByTagName(标签名字); // 查找从属于此父元素的所有与标签名称符合的子标签

通过选择器语法查找
document.querySelector("选择器"); // 查找与选择器匹配的标签，匹配第一个
document.querySelectorAll("选择器"); // 查找与选择器匹配的标签, 匹配所有

修改

修改内容
.innerText 在赋值时，把字符串当做普通文本处理，如果字符串中包含了html标签，那么这些标签会照原样输出
.innerHTML 在赋值时，把字符串当做html代码处理，会解析html标签再显示
修改属性
.属性名 = "新值";
修改样式
.className="新class" // 对应访问class属性 (推荐使用class属性修改样式)
.style.具体样式名="新值"; // 注意style 优先级较高，会覆盖其它样式

删除

父元素.removeChild(子元素);

新增

父元素.appendChild(子元素); // 建立父子元素关系
document.createElement("标签"); // 创建新的标签元素

DOM事件

事件类型

鼠标单击事件 onclick
鼠标双击事件 ondblclick
鼠标移入事件 onmouseover
鼠标移出事件 onmouseout
鼠标点击事件 onmousedown

window.event 有一个buttons属性
 取值为1表示 左键被按下
 取值为2表示 右键被按下
 取值为4表示 中间滚轮被按下

光标移入事件(获得焦点) onfocus
失去焦点事件 onblur
值改变事件 onchange
键盘 onkeydown 按下按键时
onkeypress 按下按键时
onkeyup 松开按键时

   keydown先发生    >    onkeypress  再发生 >    onkeyup 最后发生
   			
   keyCode不区分大小写     keyCode区分大小写
   可以识别特殊字符       只能识别可打印字符

事件对象

window.event 事件发生时的所有跟事件相关联的信息
可以简写为event

event.preventDefault(); // 阻止标签的默认行为
设计一个文本框，只能输入数字 (可以利用 event.preventDefault())

event.stopPropagation(); // 停止事件冒泡
事件冒泡就是指：在子标签上触发的一个事件，会沿着标签的包含关系，逐级向上传播

this

在javascript中， this代表触发了事件的标签对象
例如

<input type="button" value="删除" onclick="del(this)">

这里的this就代表当前的input按钮

BOM

Browser object model

window 代表整个浏览器窗口对象
.alert("提示的文字"); // 弹出对话框窗口
.confirm("提示的文字"); // 弹出确认框窗口如果点击了确定，返回true，点击了取消返回false
.setTimeout(函数名称, 毫秒值); // 延时执行一个函数
例如：
function delay() {
console.log("ok");
}
var n = window.setTimeout(delay, 10000); // 执行会返回一个数字
window.clearTimeout(n); // 根据setTimeout返回的数字，可以使用clearTimeout清除延时效果

.setInterval(函数名称, 毫秒值); // 根据时间间隔执行函数
.clearInterval() // 取消间隔执行

location 对浏览器地址栏的抽象
location.href 用来获取或改变地址栏的值
location.reload(); // 刷新页面

history.back(); // 上一个网页
history.forward(); // 下一个网页