JavaScript笔记

最新推荐文章于 2023-04-15 21:59:55 发布

_sunShine女孩

最新推荐文章于 2023-04-15 21:59:55 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/MYgirlHHH/article/details/121138878

版权

这篇博客详细介绍了JavaScript的基础，包括脚本语言特性、Math和Date对象、全局对象及字符串操作。深入讲解了DOM和BOM，涵盖节点操作、事件处理、窗口对象属性和移动端特性。还探讨了网页特效实现，如轮播图，以及移动端的触屏事件和点击延迟解决方案。最后提到了Bootstrap框架和本地存储机制。

摘要由CSDN通过智能技术生成

基础部分

JavaScript脚本语言

嵌入式脚本语言：为了应用程序的拓展而开发，如Lua语言、Python语言；
非嵌入式脚本语言：无需嵌入其他程序中，如JavaScript语言。

JavaScript是一门运行在客户端的脚本语言，编程类语言，典型的弱类型语言，没有如C++语言的类型机制，也没有const修饰符将变量定义为常量的能力。脚本语言：不需要编译，运行过程中由JS解释器逐行解释并执行。

Basic

<html></html> // 文档结束
<h1> </h1> // 标题
<body id = "admin" style = "font-size:12px; background: #ccccff"> </body> // 文档体结束 // 页面普通字体大小为12px 
// var a = document.getElementById("admin"); if(a == null) 获取失败；else 获取成功；
<div style = "width: 100px; height: 50px; text-align: center; background-color:#666666;"  onclick = "return function()"/* 按钮 */></div> 
<script language = "javascript"></script> // 脚本程序结束

var let const// 各数据类型的父类，区别
<li> // 小点 ·
<br> // 换行
<b></b> // 字体加粗

a.prompt("请输入："); // 输入框弹窗显示
alert(); // 输出提示
document.write("<font color = red><br>");
document.write("<br></font>"); // 网页显示

/*传入任何类型的数据，这些数据最终都被自动转换为数值型*/ 
for(n in poets) // for循环逐个输出, n∈(0, poets.length)为整数
== // '1' == 1，数据类型可不等
=== // 1 === 1，全等于，数据类型必须相等

Math常用不熟悉属性

SQRT2：2的平方根；
Tan：正切值；
round：该数最接近的整数；

Date对象方法

getDate()；
getYear(); 
getMonth(); 
getDay();
 // 日期、年、月、日；
getHours(); 
getSeconds(); 
getMinutes(); 
// 时、秒、分；
setDate(dateVal); 
setYeat(yearVal); 
setMonth(monthVal); 
// 设置对象中的日期、年、月值；

全局对象 Global

该对象不能使用new运算符创建对象实例，所有方法可直接调用。

prompt(); // 输入提示
isNaN(); // 判断value是否是NaN，返回一个布尔值
parseInt(); parseFloat(); 
// 数值转换，不解析非数字字符开头的字符串，数字字符后的字符被忽略

字符串对象

substring(0, 3); // 取出
bold(); // 字符加粗
slice(); // 字符分割
fontcolor("red"); // 设置为红色字体
charAt(n); // 取第n个字符

常用对象

Object：所有对象的基础对象；
Array：数组对象，封装数组的操作和属性；
ActiveXObject：活动控件对象；
arguments：参数对象，正在调用的函数的参数；
Boolean：布尔对象，提供同布尔类型等价的功能；
Date：日期对象，封装日期相关的操作和属性的对象；
Error：错误对象，保存错误信息；
Function：函数对象，用于创建函数；
Globa：全局对象，所有的全局函数和全局常量归该对象所有；
Math：数学对象，提供基本的数学函数和常量；
Number：数学对象，代表数值数据类型和提供数值常数的对象；
RegExp：正则表达式对象，保存正则表达式信息的对象；
String：字符串对象，提供串操作和属性的对象；

var cur = new Object();
var date = new Date(y, m, d [, h [, min [, sec [, ms]]]] ); // 指定年月日分秒的创建
var poets = new Array(10, 20, "string", 30);
var a = new Array(4);
var a = [10, 20, "string", 30];
var str = "javascript"; str = 'javascript';
function fc() {
    var na = 20; }

DOM文档对象模型

文档对象模型 (DOM) ，是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

节点操作

父节点：parentNode；
子节点：children；
兄弟节点：nextSibling 下一个节点
（nextElementSibling 下一个元素节点），不兼容
previousSibling 上一个节点
（previousElementSibling 上一个元素节点）。
创造元素节点：

createElement(''); // 只创建，但不清楚位置，需进行下一步添加节点，效率比innerHTML()数组拼接稍低
innerHTML(); // 采用数组拼接最省时，字符串拼接最耗时
document.write(); // 文档流执行完毕，导致页面全部重绘

添加节点：

node.appendChild(child);  // node父级 child子级，已有元素后添加`
node.insertBefore(child, node.children[n]); // 指定某节点下的第n个元素节点前添加新子元素节点`

改DOM（文档对象模型）的元素属性：
元素属性：src、href、title；
普通元素内容：inner HTML、innerText；
表单元素：value、type、disabled；
元素样式：style、className；

删除节点：node.removeChild(node.children[n]); // node下第n个孩子
复制节点：

let txt = this.parentNode.cloneNode(true); // true复制整个节点, 为空或为false只复制元素节点
ul.appendChild(txt);

查：
DOM提供的API方法：getELementById、getElementsByTagName（不推荐）
H5提供的新方法：querySelector、querySelectorAll（推荐使用）
利用节点操作获取元素：父parentNode、子children、兄弟（推荐使用）

属性操作：设置、获取、移除属性
setAttribute、getAttribute、removeAttribute

事件操作：
pink老师
mouseover和mouseenter区别：
mouseover 经过自身盒子会触发，经过子盒子还会触发，会冒泡；
mouseenter 只经过自身盒子会触发，不会重复触发子盒子。

禁止鼠标右键菜单：

document.addEventLinsterner('contextmenu', function(e) {
   
	e.preventDefault();
});

禁止鼠标选中文字

//同上，'contextmenu'改为'selectstart'

键盘事件对象属性：keyCode，返回该键的ASCII值，能区分大小写，返回不同的ASXCII值。
pink老师

<html><!-- 留言发布与删除 -->
<head>
<style>
    li {
   
        width: 400px;
        height: 20px;
    }
    li button {
   
        float: right;
    }
    li a {
   
        float: right;
        color: rgb(163, 39, 212);
        text-decoration: none;
    }
    .ac {
   
        color: deeppink;
    }
</style>
</head>
<body>
    <textarea></textarea>
    <button>回复</button>
    <ul>
    </ul>
    <button>删除</button>
    <script>
        let body = document.querySelector('body');
        let ul = document.querySelector('ul');
        let text = document.querySelector('textarea');
        let button = document.querySelector('button');
        let delete_ = ul.nextElementSibling; // ul后的兄弟元素节点
        button.onclick = function() {
   
            if(text.value == '') alert('输入为空！');
            else {
   
                let li = document.createElement('li'); // 创建元素节点
                // 方法一：末尾添加元素节点
                //li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a><button>+1</button>"; // 先获值，后添加
                //ul.appendChild(li);
                // 方法二：顶部添加元素节点
                let sentence = ul.insertBefore(li, ul.children[0]); // ul的第一个子节点前插入新节点li
                sentence.innerHTML = text.value + "<a href = 'javascript:;'>删除</a><button>+1</button>";
                // 清空文本框value
                text.value = "";
            }
            let allDelete = document.querySelectorAll('a'); // ul->li->a
            for(let j in allDelete) {
   
                allDelete[j].onclick = function() {
   
                    ul.removeChild(this.parentNode); // 删除ul的子节点li，即a的父节点
                }
            } // 上下此种循环须在点击按钮内部，否则无法实现
            for(let i in ul.children) {
   
                ul.children[i].onmouseover = function() {
   
                    this.className = 'ac';
                }
                ul.children[i].onmouseout = function() {
   
                    this.className = '';
                }
            }
            let addOneButton = ul.querySelectorAll('button');
            for(let k in addOneButton) {
   
                addOneButton[k].onclick = function() {
   
                    let txt = this.parentNode.cloneNode(true);
                    ul.appendChild(txt);
                }
            } // 克隆后+1按钮和删除无法实现
        }
        delete_.onclick = function() {
   
            if(ul.children.length == 0) this.disabled = true; // 无元素节点可删除时禁用按钮
            else ul.removeChild(ul.children[0]); // 删除元素节点
        }
    </script>
</body>
</html>

注册绑定事件 + 删除解绑事件

<html> <!--注册绑定事件 + 删除解绑事件-->
<body>
    <button onclick="alert('hi~')">传统方式注册事件</button>
    <button>事件监听注册事件</button>
    <script>
        let body = document.querySelector('body');
        let buttonFirst = body.children[0]; // 具有唯一性
        let buttonSecend = body.children[1]; // 同一元素同一事件可注册多个监听器
        buttonFirst.onclick = function() {
   
            alert('hello world! 1');
        }
        buttonFirst.onclick = function() {
   
            alert('hello javascript! 1'); // 传统方式只执行最终处理函数，前面的函数都会被覆盖
            buttonFirst.onclick = null; // 解绑
        }
        // type(事件类型字符串)， listener(事件处理函数，发生时调用监听函数)，useCapture(可选参数，默认false)
        buttonSecend.addEventListener('click', function() {
   
            alert('hello world! 2');// 按注册顺序依次执行
        })
        buttonSecend.addEventListener('click', fun2); 
        function fun2() {
    // 单独写监听函数，并命名
            alert('hello javascript! 2');
            buttonSecend.removeEventListener('click', fun2); // 解绑填监听函数名
        }
    </script>
</body>
</html>

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即为DOM事件流。
1、JS只能执行捕获或冒泡中的一个阶段；
2、实际开发更关注事件冒泡；
3、无冒泡阶段的事件：onblur、onfocus、onmouseenter、onmouseleave

<html> <!--DOM事件流-->
<body>
    <div style="width: 200px; height: 200px; margin: auto; background-color: rgb(204, 228, 155);">
        <div style="width: 100px; height: 100px; margin: auto; background-color: yellowgreen; text-align: center;" >son</div>
    </div>
    <script>
        let body = document.querySelector('body');
        let father = body.children[0];
        let son = father.children[0];
        document.addEventListener('click', function() {
   
            alert('There is document');
        }, false); // 若是true，则为捕捉阶段 document->father->son
        father.addEventListener('click', function() {
   
            alert('There is father');
        }, false); // 若是false或空，则为冒泡阶段 son->father->document
        son.addEventListener('click', function(event) {
    // event为形参，无需传递实参，将被系统自动创建
            alert('There is son');
            event.stopPropagation(); // 阻止冒泡（停止+传播）
        }, false);
    </script>
</body>
</html>

pink老师

事件委托

也称为事件代理、事件委派。
原理：不是每个子节点单独设置监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
作用：只操作一次DOM，提高了程序的性能。

<html>
<body>
    <ul>
        <li>hello</li>
        <li>javascript</li>
        <li>!!!</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        ul.addEventListener("click", function(event) {
   
            if(event.target != ul) {
   
                alert(event.target.innerHTML);
                event.target.style.color = "green";
            }
        })
    </script>
</body>
</html>

请添加图片描述

BOM浏览器对象模型

Browser Object Model 是浏览器对象模型，它提供了独立于内容与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。（缺乏标准，兼容性较差）
window对象是浏览器的顶级对象，它具有双重角色。

它是JS方位浏览器窗口的一个接口；
它是一个全局对象。定义再全局作用域中的变量、函数都会变成window对象的属性和方法。

调整窗口大小事件

// 调整出口库大小加载事件，触发时调用的处理函数
window.addEventLinstener('resize', function() {
   };
window.innerWidth; // 当前屏幕的宽度，用于完成响应式布局

定时器

window.setTimeout(调用函数，延时时间);

// 延时时间到后，调用一次回调函数，结束定时器
let one = setTimeout(function(){
    }, 1000); // 1000ms = 1s
let two = setInterval(function(){
    }, 1000); // 定时反复调用回调函数
clearTimeout(one);
clearInterval(two);