JavaScript笔记

这篇博客详细介绍了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 只经过自身盒子会触发,不会重复触发子盒子。

  1. 禁止鼠标右键菜单:
document.addEventLinsterner('contextmenu', function(e) {
   
	e.preventDefault();
});
  1. 禁止鼠标选中文字
//同上,'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对象是浏览器的顶级对象,它具有双重角色。

  1. 它是JS方位浏览器窗口的一个接口;
  2. 它是一个全局对象。定义再全局作用域中的变量、函数都会变成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);
<html> 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值