JavaScript_初级

最新推荐文章于 2024-10-18 11:12:30 发布

bigcupwater

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量93

点赞数

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/bigcupwater/article/details/117253517

版权

JavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JavaScript书写位置

<!-- 直接写在HTML标签里 -->
<button οnclick="alert('点击弹出一句话')"></button>
<a href="javascript:alert('弹出一句话，不跳转')">
<a href="javascript:;">

<!-- 写在<script>标签里 -->
<script type="text/javascript">
    alert("弹出对话框");
</script>

<!-- 写在外部文件，并链接进来 -->
<!-- 这个script标签内部不能写js，会被忽略 -->
<script type="text/javascript" src="js文件位置"></script>

数据类型(6种)
- 基本数据类型
  1. String 字符串
  2. Number 数字(整数和浮点数)
    - Number.MAX_VALUE 最大值
    - Number.MIN_VALUE 最小值
    - Infinity 正无穷计算结果超过最大值就是 Infinity
    - NaN 不是一个数字计算结果不是数字就会返回NaN
  3. Boolean 布尔值
  4. Null 空对象(typeof null 返回的是object)
  5. Undefined 未定义
- 引用数据类型
  1. Object
- typeof 变量可以查看变量的类型

类型转换

其他转字符串

// 1. 调用toString方法
var a = 10;
var b = a.toString()
// 2. 调用String()方法
var a;
var b = String(a); // b的结果就是undifined

其他转数字

// 1. 调用Number()方法
//     不是数字就返回NaN
//     空串或者全是空格的字符串转为0
//     布尔true 1, false 0
//     null 0
//     undefined NaN
var a = “123”;
var b = Number(a); 
// 2. parseInt()、parseFloat()
var a;
var b = parseInt(a);

其他转布尔

// 调用Boolean()方法
//     1. 除了0和NaN，其余数字都是true
//     2. 除了空串，其余字符串都是false
//     3. null false
//     4. undefined false
//     5. 对象也会转换为true
var a = 123;
var b = Boolean(a);

运算符
- == 和 != 会自动转换类型并比较
- === 和 !== 不会自动转换类型比较
- NaN和任何值都不相等，包括本身。所以使用isNaN来判断

对象

内建对象
1. 由ES标准中定义的对象，在任何ES的实现中都可以使用
2. Math String Number Boolean Function Object
宿主对象
1. 由JS的运行环境提供的对象(比如：document，console)
2. BOM DOM

自定义对象，自己创建的对象

// 使用构造器创建对象
var obj = new Object();
// 添加属性
obj.name = "tom";
// 这种方式更加灵活
obj["str"] = 99;
// 删除属性
delete obj.name;
// in 检查对象中是否包含指定的属性
// 在原型对象中的属性也会返回true
// 只检查本身有没有，用hasOwnProperty("属性名")
"age" in obj;

// 使用字面量创建对象
var obj1 = {name:"tom", age:12}

函数

函数也是一个对象

// 可以将要封装的代码传给函数的构造函数
// 这种方式不常用
var fun = new Function("console.log('print')");
fun();

// 常用方法
funtion fun1();
fun1();

// 立即执行函数
(function(a,b){
    alert(a+b);
})(10,20);

this
- 解析器在调用函数时会传递一个隐含参数(this)，this指向一个对象
- this称为函数执行的上下文对象
- 根据函数的调用方式不用，this会指向不同的对象
  1. 以函数调用，this就是window
  2. 以方法调用，this就是调用方法的那个对象

构造方法

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = fun;
}

// 将构造函数中的方法定义放在构造函数外部
// 这样可以避免，每次创建的对象都有一个函数实例，10000个对象有10000个函数对象实例
// 但这样会污染全局作用域，因为是定义在全局作用域中的
function fun() {
    alert(this.name);
}

原型对象prototype
- 我们创建的每一个函数，解析器都会向函数中添加一个属性prototype(函数也是对象，可以添加属性)
- 如果作为普通函数调用，原型对象没有任何作用
- 当函数以构造函数的形式调用时，它所创建的每一个对象中都会有一个隐含的属性指向这个原型对象
```
function MyClass(){}
var mc = new MyClass();
console.log(mc.__proto__);
```
- __proto__相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容，放到原型对象中
```
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

Person.prototype.sayName = function() {
    alert(this.name);
};

// 添加toString() 方法就可以直接打印对象
Person.prototype.toString = function() {
    return "name: " + this.name + ", age: " + this.age + ", gender: " + this.gender;
}
```
- 寻找一个属性或者方法时
  1. 自身有，直接使用
  2. 自身没有去原型对象中寻找
  3. 2没有再去原型对象中的原型对象中寻找，直到直到Object对象的原型
  4. Object对象的原型没有原型，如果在Object原型中没有找到，则返回undefined
数组(内建对象)
1. 创建方式
```
var arr = new Array();
var arr1 = new Array(5);
var arr2 = new Array(5, 6, 7);
var arr3 = [];
var arr4 = [1, "abc", true];
```
2. 常用方法
  - push() 向末尾添加元素，返回新数组长度
  - pop() 删除末尾元素，返回被删除的元素
  - unshift() 向头部添加元素，返回新数组长度
  - shift() 删除第一个元素，返回被删除的元素
  - forEach(function(self, index, arr){}, this)
    1. self 遍历的值
    2. index 遍历的索引
    3. arr 被遍历的整个数组
    4. 不会改变原数组
    5. break、continue没有作用
    6. return 返回值不能返回出去
  - slice(start, end) 截取指定位置的数组(不包含end索引的元素)，返回截取结果不会影响数组本身
  - splice(start, count, newProperty) 删除数组中指定位置的元素，并替换。返回被删除的元素，会直接影响数组
  - concat() 连接两个或更多的数组，并返回结果，不会对影响数组本身
  - join(seperate) 把数组的所有元素放入一个字符串，元素通过指定的分隔符分隔。不会对影响数组本身
  - reverse() 反转数组中的元素，会直接影响数组
  - sort(function(a,b)) 对数组的元素进行排序(可以传入函数自定义排序规则)，会直接影响数组
函数的方法(函数也是对象)
- call()和apply()，这两个方法时函数对象的方法，需要通过函数对象调用
- 调用这两个方法，都会使得函数执行
- 调用这两个方法可以将一个对象指定为第一个参数，此时这个对象会成为函数执行时的this
```
var obj = {};
function fun() {
    alert(this);
}

// alert(this) this就变成obj
// fun() 这样调用 this 是window
fun.call(obj);
fun.apply(obj);
```
- 传递参数的时候
```
var obj = {};
function fun(a, b) {
    alert(a + " " + b);
}

// call直接传
fun.call(obj, 2, 3);
// apply需要封装到数组里再传
fun.apply(obj, [2, 3]);
```
- this的情况
  1. 以函数形式调用时，this永远是window
  2. 以方法形式调用时，this是调用方法的对象
  3. 以构造函数的形式调用，this是新创建的对象
  4. 使用call和apply调用时，this是指定的那个对象

arguments 函数的参数列表
- 调用函数时，浏览器每次都会传递两个隐含的参数
  1. 函数的上下文 this
  2. 封装实参的对象 arguments
- arguments是一个类数组对象，但是不是数组
- 调用函数时，传递的实参都会在arguments中保存
- 它有一个属性 callee 这个属性对应一个函数对象，就是当前正在指向的函数对象

Date对象
- 创建方式
```
var d = new Date();
// 月/日/年 创建指定日期的日期对象
var d1 = new Date("12/31/2021 11:11:11");
```
- 常用方法
  1. getDate() 获取哪一号
  2. getDay() 获取星期几(0-6，0是星期天)
  3. getMonth() 获取月(0-11,0是1月份)
  4. getFullYear() 获取年份
  5. getTime() 返回197011到日期的毫秒数
  6. Date.now() 现在的时间戳，毫秒
Math对象(工具类，不用new出来)
- 常用方法
  1. ceil() 向上取整，小数位有值就自动进1
  2. floor() 向下取整，不管小数位有没有值，保留整数部分原值
  3. round() 四舍五入取整
  4. random() 生成0-1之间的任意小数，不包含0-1
包装类
- String() Number() Boolean();
- String 常用方法
  1. charAt(index) 返回指定位置的字符
  2. concat() 连接两个或多个字符串
  3. indexOf(str, index) 返回指定字符串第一次出现的位置，可以指定查找位置
  4. lastIndexOf(str, index) 返回指定字符串最后一次出现的位置，可以指定查找位置
  5. slice(start, end) 截取字符串，不包括end
  6. substring(start, end) 截取字符串，不包括end，这个方法不接受负值
  7. subStr(strat, count) 截取字符串
  8. split(seperate) 将字符串拆分成数组
    - 可以传递正则去拆
  9. search(regex) 检索字符串中正则匹配的值，返回第一次出现的索引
  10. match(regex) 提取正则匹配的字符串，默认情况下只会返回第一个，开启全局匹配就能返回所有结果。返回结果放在数组中
  11. replace(regex, newStr) 替换，设成全局匹配模式才会替换所有，默认只替换第一个

正则表达式

基本使用

var reg = new RegExp("正则表达式", "匹配模式");
// 字面量创建正则表达式对象
var reg1 = /a/i;
// 匹配模式
//     i 忽略大小写
//     g 全局匹配模式
reg.test(str); 测试str是否满足定义的正则

基本规则

/*----------------------------------
{n} 正好n次
{m, n} 正好m~n次，包括中间次
{m, } m次以上，包括m
+ 至少1个
* 0或多个
? 0或1个
^ 开头
$ 结尾
\w 任意字母、数字、下划线 
\W 除了字母、数字、下划线
\d 任意的数字
\D 除了数字以外
\s 空格
\S 除了空格
\b 单词边界
\B 除了单词边界
----------------------------------*/

DOM
- 在加载完文档之后再执行 window.onload = function(){};
- DOM查询
  1. 通过document调用
    - getElementById() 根据ID获取一个元素
    - getElementsByTagName() 根据标签名获取一组元素
    - getElementsByName() 根据name属性获取一组元素
    - getElementsByClassName() 根据class获取一组元素
    - querySelector() 传入一个选择器，返回选择的元素，只会返回第一个
    - querySelectorAll() 传入一个选择器，返回选择的元素，返回全部
  2. 通过元素节点调用，获取元素节点的子节点
    - 获取子节点
      1. getElementsByTagName() 根据标签名获取一组元素包括孙子节点
      2. childNodes 所有子节点不包括孙子节点，小心文本节点
      3. children 所有子节点不包括孙子节点，也不包括文本节点
      4. firstChild 第一个子节点，小心文本节点
      5. lastChild 最后一个子节点，小心文本节点
    - 获取父节点和兄弟节点
      1. parentNode 父节点
      2. previousSibling 前一个兄弟节点，小心文本节点
      3. nextSibling 后一个兄弟节点，小心文本节点
- DOM增删改
  1. appendChild(新节点) 把新的子节点添加到指定节点
  2. removeChild(待删除子节点) 删除子节点
  3. replaceChild(新节点，旧节点) 替换子节点
  4. insertBefore(新节点，指定的子节点) 在指定的子节点前插入新的子节点
  5. createElement(“节点名”) 创建元素节点不是传进一段完整的HTML代码，如createElement(“li”)
  6. createTextNode(“文本内容”) 创建文本节点
- 操作内联样式，用style属性
  1. 修改元素样式元素.style.样式名 = 样式值，直接设置到元素上的内联样式
  2. 读取元素样式元素.style.样式名，直接读取内联样式(带单位)
- 读取元素正在生效的样式(只读，不能修改)
  1. 用currentStyle(只有IE支持)。读取元素样式元素.currentStyle.样式名，获取正在生效的样式
  2. 用getComputedStyle(元素, null)
    - 第一个参数是要获取样式的元素
    - 第二个参数，可以传递一个伪元素，一般传null
    - 这个方法会返回一个封装了元素样式的对象
```
var box = document.getElementById("box");
var obj = getComputedStyle(box, null);
alert(obj.widt);
```
- 节点相关属性
  1. clientWidth 元素可见宽度(不带单位，只读，内容+内边距)
  2. clientHeight 元素可见高度(同上)
  3. offsetWidth 元素宽度(不带单位，只读，内容+内边距+外边距)
  4. offsetHeight 元素高度(同上)
  5. offsetParent 获取当前元素的定位父元素，获取到离当前元素最近的开启了定位的祖先元素，没有就返回body
  6. offsetLeft 当前元素相对于其定位父元素的水平偏移量
  7. offsetTop 当前元素相对于其定位父元素的垂直偏移量
  8. scrollWidth 获取到整个滚动区域的宽度
  9. scrollHeight 获取到整个滚动区域的高度
  10. scrollLeft 获取水平滚动条滚动的距离
  11. scrollTop 获取垂直滚动条滚动的距离
事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递到响应函数中
```
box.onclick = function(event){} // event就是事件对象
```
- 事件对象中封装了当前事件相关一切信息
- 在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
```
var x = window.event.clientX; // 用window获取event对象
```
- 事件对象中的相关属性
  1. clientX 获取鼠标指针的水平坐标
  2. clientY 获取鼠标指针的垂直坐标
  3. target 返回触发事件的目标元素
  4. wheelDelta 滚轮滚动的方向，向上是正，向下是负值(火狐不支持)
    - event.datail 可以解决上述问题，向上是负，向上是负值
  5. keyCode 获取按键的编码
- 基本的一些事件
  1. onblur 元素失去焦点
  2. onclick 当用户点击某个对象时调用的事件句柄
  3. ondblclick 当用户双击某个对象时调用的事件句柄
  4. onfocus 元素获得焦点
  5. onkeydown 某个键盘按键被按下
  6. onkeypress 某个键盘按键被按下并松开
  7. onkeyup 某个键盘按键被松开
  8. onmousedown 鼠标按钮被按下
  9. onmousemove 鼠标被移动
  10. onmouseout 鼠标从某元素移开
  11. onmouseover 鼠标移到某元素之上
  12. onmouseup 鼠标按键被松开
事件冒泡Bubble
- 后代元素事件被触发时，其祖先元素的相同事件也会触发
- 用事件对象取消冒泡
```
event.cancelBubble = true;
```
事件的委派
- 将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一致冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
- 这样做了之后，所有的子元素都会触发事件，可以通过event.target来进一步约束触发事件的条件解决

事件的绑定

使用对象.事件 = 函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数。绑定多个，后面会覆盖前面的。
通过方法 addEventListener(事件的字符串(没on)，回调函数，是否在捕获阶段触发事件(一般是false))。按绑定顺序执行 IE8不支持

IE8解决 attachEvent(事件的字符串(有on)，回调函数)。后绑定，先执行

function bind(obj, eventStr, callback) {
    // addEventListener的this是绑定事件的对象
    // attachEvent的this是window
    if (obj.addEventListener) {
        obj.addEventListener(eventStr, callback, false);
    } else {
        obj.attachEvent("on" + eventStr, function(){
            // this指向由方法的调用方式来决定
            // call方法可以调整this的指向
            callback.call(obj);
        });
    }
}

事件的传播
- 事件的传播，网景和微软有不同的理解
- 微软
  1. 事件应该是由内向外传播，事件触发时，先触发当前元素上的事件，再是祖先元素的事件
  2. 事件应该在冒泡阶段执行
- 网景
  1. 事件应该是由外向内传播，先祖先，后元素本身
- W3C将事件传播分成了三个阶段
  1. 捕获阶段：在捕获阶段时，从祖先元素向目标元素进行事件捕获，默认此时不会触发事件
  2. 目标阶段：事件捕获到目标元素，捕获结束开始触发事件
  3. 冒泡阶段：事件向祖先元素冒泡，并执行
  4. IE8及以下没有事件捕获阶段
滚轮事件
- onmousewheel鼠标滚轮滚动事件，会在滚轮滚动时触发
  1. 火狐不支持，用DOMMouseScroll解决，需要通过addEventListner绑定
键盘事件
- onkeydown 按键被按下
- onkeyup 按键松开
- 键盘事件一般绑定给可以获取到焦点的对象或者document
BOM 浏览器对象模型
- Window 代表整个浏览器的窗口，同时也是网页中的全局对象
- Navigator 代表当前浏览器的信息，可以通过该对象识别不同的浏览器，不太行，用userAgent
- Location 代表当前浏览器的地址栏信息
- History 代表浏览器的历史记录(隐私问题，只能获取到当次访问前进或后退的历史记录)
- Screen 代表用户的屏幕信息，该对象可以获取到用户的显示器的相关信息、
- 上述内容，都可以通过window获取
定时器 setInterval(function(){}, time)
- 定时调用，可以将一个函数，每隔一段时间(time毫秒)执行一次
- 返回值是一个Number型的数据，这个数字用来标识唯一的定时器
- clearInterval(定时器的返回值) 关闭定时器
延时调用 setTimeout(function(){}, time)
- 延时用，将一个函数在指定时间(time毫秒)后执行一次
- 返回值是一个Number型的数据，这个数字用来标识唯一的延时调用
- clearTimeout(延时调用的返回值)
JSON
- JSON就是一个特殊的字符串，这个字符串可以被任意的语言识别，以及转换
- 用来进行数据传递
- JavaScript用JSON对象来做JS对象和JSON字符串的互相转换
- JSON.parse(jsonStr) JSON字符串转JS对象
- JSON.stringify(jsObject) JS对象转JSON字符串

Tips

取消绑定事件的默认行为。
- 在绑定的回调函数中return false;
- return对addEventListener不好用，用event.preventDefault(); 调用一下就可以(IE8不支持)
通过style属性来修改元素的样式，每修改一个样式，浏览器就重新渲染一次页面，性能差。可以修改class去替换样式
取消输入框按键按下的默认行为，就输入不进去了
获取滚动条
- chrome认为是body的
  1. document.body.scrollTop
  2. document.body.scrollLeft
- 火狐认为是html的
  1. document.documentElement.scrollTop
  2. document.documentElement.scrollLeft
setCaputer() 在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 document.releaseCapture() 被调用。
releaseCapture() 如果该 document 中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。
className 属性获取元素class值
innerHTML获取元素内部的HTML代码
innerText元素内部的文本内容
变量声明提前，使用var声明的变量，会先执行，在声明前输出不会出错，会返回undefined
```
// var a; 提前了，但是赋值10并没有提前
console.log(a); // 会输出undefined
var a = 10;
```
var result = confirm() 确认框，确认和取消。确认返回true，取消返回false
var str = prompt(); 会弹出一个带有文本输入框的提示框，输入后可以取得值