JavaScript

最新推荐文章于 2020-12-16 13:58:22 发布

Will1997

最新推荐文章于 2020-12-16 13:58:22 发布

阅读量181

点赞数

分类专栏： JavaEE学习总结

本文链接：https://blog.csdn.net/qq_42371269/article/details/82284820

版权

JavaEE学习总结专栏收录该内容

23 篇文章 9 订阅

订阅专栏

JavaScript: 能够操作页面上的标签，即可作为前端语言，也可作为后端语言

javaScript的基础语法：

1）基本类型：

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

javaScript的变量是弱类型，但值有类型

var a = 10 ; // var 可以表示任意类型的变量

var s = "string" ;

2）复杂类型：

（1）数组：

var arr = new Array() ; // 新建一个空数组

var arr = [ ] ; // 新建一个空数组

var arr = [1,2,3,4,5] ; // 新建一个有五个元素的数组

访问数组：通过下标来访问数组

遍历数组： for 循环

方式一： for(var i=0; i<arr.length; i++){

console.log( arr[i] ); // 在控制台打印数组

}

方式二： for(var i in arr){

console.log( arr[i] );

}

添加元素：

.push( 元素 ) : 向数组的尾部添加一个元素

.unshift() : 向数组的头部添加一个元素

删除元素：

.pop() : 从数组的尾部去除一个元素

.shift(): 从数组的头部取出一个元素

.splice(m,n): m: 要删除的下标， n: 删除的个数

排序：

.sort(): 默认排序，按照字符串的排序，单个字符进行比较排序

.sort( (a,b) => { a-b }): 将字符串排序转化为自然排序，从小到大

（2）对象：

var o = new Object() ; // 创建一个空对象

o.name= " chen "; // js的对象属性可动态添加和删除（delete o.name 删除对象的属性）

o.age = 18 ;

简化写法：
var a = {}; //创建一个空对象
格式: { 属性名:属性值, 属性名:属性值 ...}

例： var a = {"name":"张三", "age":18}; // 属性名两边的双引号可以省略

（3）函数：

定义： function 函数名( 参数列表 ) {

函数体；

}

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

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

调用函数 sum(5, 4);

注意：

1. js中的实际参数可以不与形参匹配

sum(4,5,6)
sum(4,5,6,7)
sum(4); // 4+undefined = NaN (not a number)

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

（4）日期：

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

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

（5）正则表达式：

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

例：验证是否是手机号码
var reg = /^1[35789][0-9]{9}$/;

替换功能：字符串对象.replace(reg , "替换内容");
var str = "aaaabbbcccaaa";
str.replace(/a+/, "A"); // 只会替换第一个匹配到的子串
str.replace(/a+/g, "A"); // 会替换所有匹配的子串

匹配功能:

reg.test("目标字符串"); // true, false

操作页面中的标签： <script> js代码 </script>

DOM API ： Document Object Model 文档对象模型

（1）查找元素
document.getElementById( 标签id值 ); // 在设计id时要避免重复，id的取值应当唯一
document.getElementsByTagName( 标签名字 ); // 根据标签的名字查找多个元素
父元素.getElementsByTagName( 标签名字 ); // 查找从属于此父元素的所有与标签名称符合的子标签, 缩小了查找范围

通过选择器语法进行查找
#id， .class值, 元素

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

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

（3）删除
父元素.removeChild( 子元素 );

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

DOM事件：

鼠标：

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

光标：

光标移入事件(获得焦点) onfocus
光标移出事件(失去焦点) onblur
值改变事件 onchange

键盘:

onkeydown 按下按键时 onkeydown捕获的 keyCode 不区分字母大小可以识别特殊字符
onkeypress 按下按键时 onkeypress捕获的 keyCode 区分大小写只能识别可打印字符
onkeyup 松开按键时

keydown先发生 > onkeypress 再发生 > onkeyup 最后发生

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

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

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

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

例： < input type="button" value="添加" οnclick="add(this)" > // this 代表当前的 < input >按钮

BOM : Browser Object Model 浏览器对象模型

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

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

history 浏览历史 history.back(); // 返回上一个网页
history.forward(); // 进入下一个网页