东方求败、-CSDN博客

原创 JS事件对象

JS事件对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onl

2021-09-06 11:22:57 1000

原创事件类型的种类

事件类型的种类一、鼠标事件 click 单击 dbclick 双击 mousemove 鼠标移动(会不停的触发) mousedown 鼠标按下 mouseup 鼠标抬起【注】经过子节点会重复触发 mouseover 鼠标移入 mouseout 鼠标移出【注】经过子节点不会重复触发 IE8以后才有 mouseenter 鼠标移入 mouseleave 鼠标移出二、

2021-09-06 11:19:29 607

文档碎片/* 创建10万个节点，添加到页面上*/window.onload = function(){ //test1：82 毫秒 - 倒计时结束 console.time("test1"); for(var i=0;i<100000;i++) { var newDiv= document.createElement("div"); document.body.appendChild(newDiv); } c

2021-09-06 10:55:33 122

原创 offest系列方法

offest系列方法offsetWidth (height + padding + margin + border)offsetHeightoffsetLeft 眼睛能看到实际距离第一个有定位的父节点的距离offsetTop<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

2021-09-06 10:25:11 625

原创用JS写一个选项卡

用JS写一个选项卡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 bu

2021-09-06 10:11:59 398

原创 JS节点操作

JS节点操作document.write()【注】会覆盖页面上原有的内容createElement() 格式：document.createElement() 参数：标签名返回值：创建好的这个节点appendChild() 格式：node1.appendChild(node2) 功能：将node2节点插入到node1节点子节点的末尾createTextNode() 格式：document.createTextNode(文本)；功能：

2021-08-31 11:29:13 125

原创 JS属性节点

JS属性节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /*

2021-08-31 10:03:28 149

原创 JS获取子节点

JS获取子节点childNodes 访问当前节点下所有的子节点firstChild 访问子节点中的首位lastChild 访问子节点中的最后一位parentNode 访问当前节点的父节点nextSibling 访问当前节点兄弟节点中的下个节点perviousSibling 访问当前节点兄弟节点中的上个节点【注】上述这些属性都包含文本节点【注】下述这些方法值获取字节点中的元素节点childrenfirstElementChildlastElementChildnextElemen

2021-08-31 09:57:15 1158

原创 JS元素节点的属性之修改元素内容

JS元素节点的属性之修改元素内容1.innerHTML 获取标签间内容，会解析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>

2021-08-27 16:26:30 611

原创了解attribute

了解attribute都是操作当前元素节点中某个属性的1.setAttribute()作用：设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。参数：name：表示属性名称的字符串; value: 属性的值/新值。例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view

2021-08-27 15:51:37 378

原创 JS获取当前有效样式

JS获取当前有效样式方法一【注】通过这种方式，只能找到行间的css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l

2021-08-26 16:54:35 265

原创自定义byClassName

自定义byClassName<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /*

2021-08-26 16:36:25 371

原创 JS获取元素节点的方法

JS获取元素节点的方法document.getElementById(id);node.getElementsByTagName(标签名)；功能：从node节点开始，通过标签名获取符合条件的元素节点返回值：伪数组/类数组node.getElementsByClassName(class节点) (IE8一下不兼容)功能：通过class名字获取符合条件的元素节点document.getElementsByName(name属性的值)功能：通过Name属性的值获取符合条件的元素节点【注】一

2021-08-26 16:29:38 715

原创认识BOM

认识BOM所谓 BOM 指的就是浏览器对象模型 Browser Object Model，它的核心就是浏览器。系统对话框 window方法(一般情况下window可以省略) alert() 弹出警告框 confirm() 弹出一个带确定和取消的提示框返回值：如果点击确定，返回true 如果点击取消，返回false prompt() 弹出一个带输入框的提示框参数：第一个参数：面板上显示的内容第二个参数：

2021-08-26 15:24:34 1364

原创 location对象的属性

location对象的属性url:统一资源定位符完整的url:中文版本：协议：//IP(域名)：端口号/路径?查询字符串#锚点例子： http://www.baidu.com:8080/code/xxx.html?username=xxx&age=18#1`英文版本 :protocol://hostname:port/pathname/?search#hashlocation.protocol file:本地磁盘文件访问 http:

2021-08-26 15:12:36 206

原创 JS histroy对象

histroy对象 history 对象 window.history 掌管的是，当前窗口(注意不是浏览器)历史纪录(只要加载url不一样就会产生历史纪录) 属性： history.length 输出当前窗口历史纪录的条数方法： history.back() 返回上一条历史纪录 history.forward() 前进到下一条历史纪录 history.go() 参数：0 刷新当前页面正整数前

2021-08-26 15:06:02 255

原创 JS open方法

JS open方法open()第一个参数：跳转的url，打开一个新窗口，加在url第二个参数：字符串，给打开的窗口起一个名字第三个参数：一串特殊含义的字符串【注】如果只有一个参数，调用open方法会打开新窗口，加载url【注】如果已经起好名字，则会在已经起好名字的窗口加载url<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="

2021-08-20 10:42:41 4376

原创秒表功能优化

秒表功能优化<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

2021-08-20 10:14:49 137

原创用JS实现一个秒表功能

用JS实现一个秒表功能<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl

2021-08-20 10:06:53 852

原创 JS实现实时显示时间

JS实现实时显示时间JS代码：function showTime(){ var d = new Date(); var year = d.getFullYear(); var month = d.getMonth() + 1;//0~11 var date = d.getDate(); var week = d.getDay();//0~6 0是周日 week = numOfChinese(week); var hour = doubleNum

2021-08-20 09:53:52 1365

原创 JS定时器

定时器格式：var timer = setInterval(函数，毫秒数); 功能：每隔对应的毫秒数，执行一次传入的函数返回值：启动定时器的，系统分配的编号、 clearInterval(timer); 取消定时器格式：var timer = setTimeout(函数,毫秒数); 功能：使一段代码在指定时间后运行 clearTimeout(timer);取消定时器var i = 0;function show(){ if(i == 5) ..

2021-08-20 09:42:37 351

原创 Date对象

Date对象 https://www.w3school.com.cn/js/js_obj_date.asp Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法

2021-08-19 10:42:47 623

原创 Math对象

Math对象在JS中一切皆对象【注】：在JS，很多数学运算的函数，直接一个Math对象提供 abs(x) 返回数的绝对值。 acos(x) 返回数的反余弦值。 asin(x) 返回数的反正弦值。 atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 ceil(x) 对数进行上舍入。 cos(x) 返回数的余弦。 exp(x) 返回 e 的指

2021-08-19 10:24:27 471

原创 DOM练习之表单验证

表单验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1{width:

2021-08-19 10:02:18 164

原创 DOM练习之敏感词过滤

敏感词过滤表单元素获取其中内容，通过.value属性双标签节点 innerHTML属性，获取标签间内容要求: 1.敏感词过滤 2.将敏感词替换成*<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g

2021-08-19 09:40:59 195

原创基本的DOM操作

基本的DOM操作事件驱动函数【注】通过id获取页面上对应的标签document.getElementById(id);node.innerHTML 标签间的内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g

2021-08-18 10:42:54 650

原创 JS写一个验证码

验证码验证码：验证你是否是机器人纯数字字符组成的验证码数字和字符组成的验证码 0-9 a-z 97-122 A-Z 65-90 方法： 1.生成一个数组，装有单个字符，长度位62 随机 0-61的下标 2.随机ASCII码值//n位验证码每个数字的范围：0-9function numTestCod

2021-08-18 10:04:15 383

原创 JS字符串的查找

JS字符串的查找 indexOf() 格式： supStr.indexOf(subStr,start); 参数：第一个参数，查找的字符串 start从哪个下标开始查早，如果不传入，默认从下标0开始查找功能：在supStr中查找subStr第一次出现的位置，从start这个位置开始查找返回值： -1 说明没有查找到例： var supStr = "abcabcabc"; var subStr

2021-08-17 11:21:14 2456

原创 JS字符串中的方法

JS字符串中的方法 charCodeAt() 格式：字符串.charCodeAt(下标) 功能：访问字符串中对应的下标字符的ASCII码值 String.fromCharCode(); 格式： String.fromCharCode(码值1，码值2...); 功能：将传入的ASCII码值转成相对应的字符返回值：组成的字符串 substring() 格式：字符串.substring(start,end); 功能：将字符串中[s

2021-08-17 11:00:58 111

原创 JS字符串声明

JS字符串声明字符串概念：所有带单引号或者双引号的都叫做字符串字符串声明：通过new运算符去声明例： var str1 = new String(100); alert(str1 + 20);// 10020 alert(typeof str1);//object 对象引用数据类型省略new声明字符串例： var str2 = String(100); alert(st

2021-08-17 10:38:44 3078

原创 JS数组新增方法

JS数组新增方法indexOf() 格式：数组.index(item,start); 参数：item 任意的数据 start 下标可以不传入，默认是0 功能：在数据中查找第一次出现item元素下标，从start开始去查找返回值：-1 没有查找到 >=0 查找到的元素的下标 filter() 过滤例： var arr = [10,20,30,40,50]; var newArr = arr.

2021-08-17 10:16:31 986

原创 JS数组的常用的方法

JS数组的常用的方法栈结构：特点：先进后出数组的两个方法形成栈结构： push 格式：数组.push(参数1,参数2,...); 功能：给数组的末尾添加元素返回值：插完元素后的数组长度 pop 格式：数组.pop(); 参数：没有参数返回值：取下一个元素功能：从数组末尾取下一个元素队列结构结构：从末尾进，从头部出特点：先进

2021-08-17 09:50:30 101

原创 javascript严格模式

javascript严格模式严格模式：写在哪个作用域下，在哪个作用域下生效"use strict"【注】尽量注意不要严格模式写在全局用了严格模式，会有什么变量： 1.全局变量声明时，必须加var 2.this无法指向全局变量 3.函数内不能重名 4.arguments对象不允许被动态修改 5.新增保留字：implements,interface,package,private,protected,public,static,yield.例1：function show(){

2021-08-13 11:07:10 93

原创用JS写一个冒泡排序

冒泡排序（升序）function bubbleSortAsc(arr)//升序{ for(var i = 0; i < arr.length-1; i++) { for(var j = 0; j < arr.length - (i + 1); j++) { if(arr[j] > arr[j + 1]) { var tmp; t

2021-08-13 10:57:46 358

原创用JS写一个选择排序

选择排序（升序）function selectSortAsc(arr)//升序{ for(var i = 0; i < arr.length - 1; i++) { for(var j = i +1; j < arr.length; j++) { if(arr[i] > arr[j]) { var tmp; tmp =

2021-08-13 10:53:55 127

原创省略var声明变量

省略var声明变量/* 省略var,直接去强制给一个变量赋值，这个变量会被JS强制声明为全局变量【注】不建议，这属于语法错误。*/function show(){ //var num = 10; num = 10;//去掉var alert(num);}show();alert(num);运行结果：...

2021-08-13 10:36:17 270

原创 JS声明提升

声明提升/* 预编译：在所有代码运行之前，计算机将代码从头到尾看一遍。将这个程序需要运行的空间一次性分配好。函数也会声明提升声明提升：在当前作用域，声明变量和函数，会直接提升在整个代码的最前面运行。*/num = 10;alert(num);var numshow();function show(){ document.write("hello world");}运行结果：...

2021-08-12 17:02:12 692

原创了解arguments

了解arguments/* 【注】每一个函数内部都有一个arguments,系统内置的【注】arguments是用来存储实际传入的参数属性： arguments.length 输出当前里面存储的参数个数访问某一个数据： arguments[下标]；【注】下标是从0开始的。*//* 应用：求任意个数字的和 */function sum(){ var res = 0

2021-08-12 16:11:17 870

原创 JS认识函数

JS函数的语法/* 函数的语法：函数声明(无参无返回值）： function 函数名(){ 函数体(具体要执行的代码) } 【注】见名思意函数调用：格式：函数名();*/function print(){ for(var i = 0; i < 10; i++){ document.write("Hello World<br/>"); }}print();有参数无返回值的函

2021-08-12 11:25:53 360

原创强制数据类型转换

强制数据类型转换Boolean() 将其他的数据类型强制转换成布尔值口诀：非0即真非空即真Number() 将其他的数据类型强制转换成数字【注】只有纯数字字符组成的字符串转数字，其他都为NaNparseInt()1.取整2.将其他进制转成十进制必须传入字符串(第一个参数传字符串，第二个参数传字符串是什么进制，不传默认10进制)/* 52 二进制：110100 八进制：64 十六进制：34*/var str1="110100";alert(parseInt(

2021-08-12 11:07:33 184

空空如也

空空如也