JavaScript
文章平均质量分 51
睿里睿气
全栈工程师
展开
-
前端知识积累
CSSOM即(CSS 对象模型)。CSSOM是一种将 CSS 样式表解析为可被 JavaScript 操作的对象结构的模型。它允许 JavaScript 访问和修改 CSS 样式信息,从而实现动态地更改页面的样式。例如,通过CSSOM,可以使用 JavaScript 来获取某个元素的样式属性值、修改样式属性、添加或删除样式规则等。以下是一个简单的示例,展示如何通过CSSOM#myElementcolor。原创 2024-09-22 15:10:47 · 402 阅读 · 0 评论 -
JavaScript连载38-编写评论界面
一、编写评论页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D38_1_Review</title> <style> *{ margin:0; padding:0; list-style:none; }原创 2021-02-24 00:28:39 · 176 阅读 · 0 评论 -
JavaScript连载37-切换选项卡样式以及搭建一个评论系统
一、选项卡使用函数来动态的显示标签的样式,也可以使用html自带的动画效果来实现下面的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D37_1_OptionCard</title> <style> *{ margin:0; paddi原创 2020-10-13 23:49:55 · 159 阅读 · 0 评论 -
JavaScript连载36-上传文件以及获取input表单焦点
一、表单标签焦点 <input type="text" placeholder="请输入姓名"> <script> window.onload = function (ev) { var input = document.getElementsByTagName("input")[0]; //1.获得焦点,也就是按下鼠标的那个光标 input.onfocus = function原创 2020-10-04 19:34:57 · 145 阅读 · 0 评论 -
JavaScript连载35-全选反选等功能实现、标签内容获取
一、批量选择实现全选、取消全选和反选的功能步骤在于先获取每个按钮的事件,然后绑定按钮的具体逻辑重点在于设置checked属性实现选择复习了querySelectAll()用来获取所有某一个id的标签复习了box-shadow用于指定盒子的阴影的功能复习了addEventListener()用于绑定事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2020-09-28 00:19:41 · 134 阅读 · 0 评论 -
JavaScript连载34-addEventListener函数以及闭包的使用
一、addEventListener<body> <button id="btn">我是一个按钮</button> <script> window.onload = function (ev) { var btn = document.getElementById("btn"); // btn.onclick = function (ev2) { //原创 2020-09-24 00:17:01 · 478 阅读 · 0 评论 -
JavaScript连载33-点击查看大图效果以及闭包初步
一、点击图片显示大图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D33_1_SwitchIcon</title> <style> #box{ border:1px solid #cccccc; width:360px;原创 2020-09-20 00:18:25 · 120 阅读 · 0 评论 -
JavaScript连载32-常用的鼠标事件
一、常用的鼠标事件<body> <img src="img/img_05.png" alt="" width="250px"> <script> window.onload = function (ev) { var logo = document.getElementsByTagName("img")[0]; //1.新的事件 logo.onmouseover =原创 2020-09-16 00:10:21 · 98 阅读 · 0 评论 -
JavaScript连载31-图片动态切换以及关闭图片案例
一、图标切换 <style> #box{ width:1200px; margin:0 auto; } </style></head><body> <div id="box"> <img src="img/img_01.png" alt="" id="icon"> <p></p&g原创 2020-09-04 00:22:18 · 243 阅读 · 0 评论 -
JavaScript连载15-节点属性设置、深浅克隆节点
一、获取元素类型以及按类型挑选<body> <div id = "box"> <p id="word">xiaoming</p> <!--<button id="btn">点我</button>--> </div> <script> window.onload = function (ev) { //1.原创 2020-08-30 19:41:38 · 116 阅读 · 0 评论 -
JavaScript连载29-元素类型获取、节点CD
一、元素类型分类常量名常量值节点类型描述Node.ELEMENT_NODE1Element代表元素Node.ATTRIBUTE_NODE2Attr代表属性Node.TEXT_NODE3Text代表元素或者属性中的文本内容Node.CDATA_SECTION_NODE4CDATASection代表文档中的CDATA部(不会由解析器解析的文本)Node.ENTITY_PEFERENCE_NODE5EntityReference代实体原创 2020-08-20 00:28:27 · 179 阅读 · 0 评论 -
Javascript连载28-节点之间的关系演示
一、节点之间的关系(1)获取父节点(2)上一个兄弟节点(3)下一个兄弟节点(4)获取标签中的第一个子节点(5)获取标签中的最后一个子节点(6)获取元素的节点(7)获取任意兄弟的节点节点包括:标签、属性、文本、注释等直接上代码 <style> #box{ width:200px; height:200px; background-color: red; }原创 2020-08-10 00:08:08 · 195 阅读 · 0 评论 -
JavaScript连载27-文档加载模式以及元素获取
一、文档加载模式1.事件三要素:事件源(触发时间的元素);事件名称(click点击事件);事件处理程序(事件出发后要执行的代码函数形式)存在问题:浏览器加载一个页面的时候,是按照自上而下的顺序加载的,若将script标签写到head内部,在代码执行时候,页面还没有加载,页面中的DOM对象也没有加载。就会导致js中无法获取页面中的DOM对象。解决方法:onload事件,会在整个页面加载完之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我原创 2020-07-28 00:14:32 · 105 阅读 · 0 评论 -
JavaScript连载26-window和document
一、验证表单封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){原创 2020-07-23 00:15:56 · 118 阅读 · 0 评论 -
JavaScript连载25-正则表达式的匹配分割替换以及贪婪模式
一、test方法 var dateStr = '2020-01-01'; var dateReg = /^\d{4}-\d{2}-\d{2}$/; console.log(dateReg.test(dateStr));//test方法用于验证是否是满足正则表达式格式运行结果:二、提取正则表达式1. 正则对象.exec(要匹配的内容) var qqStr = "小明:15778945869,小虎:15678645678,小红:13848956123"; var原创 2020-07-18 00:02:19 · 353 阅读 · 0 评论 -
JavaScript连载24-正则表达式
一、正则表达式1.基本概念(简略)三大作用:匹配,提取,替换正则表达式的组成:普通字符和元字符元字符元字符描述\d匹配一个数字字符,等价于[0-9]\D匹配一个非数字字符,等价于[^0-9]\w匹配一个包括下划线在内的任意单词字符,等价于[A-Za-z0-9]\W匹配任何非单词字符,等价于[^A-Za-z0-9]\s匹配任何空白字符,包括空格、制表符、换页符等,等价于[\f\n\r\t\v]\S匹配任何非空白字符,等价于[^\f\n原创 2020-07-14 00:26:55 · 106 阅读 · 0 评论 -
JavaScript连载23-String对象及其常用方法
一、String对象1.字符串的所有方法,都不会修改字符串本身(字符串是不可变的,操作完成之后会返回一个新的字符串)注意点:拼接大量的字符串会有性能问题,我们经常使用服务器渲染和模板引擎来解决这个问题常用的方法:(1)str.length获取字符串的长度(2)str.charAt(index)可以用来获取字符串的某个索引位置的字符(3)str.charCodeAt(index)可以用来获取字符串的某个索引位置的字符的ASCII码(4)str[index]可以用来获取字符串第index原创 2020-07-10 00:10:01 · 193 阅读 · 0 评论 -
JavaScript连载22-数组中其他方法以及Math对象
一、数组中其余的常用方法包括map,filter,every,some方法,我们分别进行举例 //map定义一个函数用来遍历原来老的数组 var arr = [10,20,5,1000,50]; var newArr = arr.map(function(value, index, array){ return value>10 && value*2 ;//value大于10的时候才会乘2 }); console.log(n原创 2020-07-06 00:16:03 · 95 阅读 · 0 评论 -
JavaScript连载21-合并数组、数组中的sort函数实现原理
一、数组遍历和其他1.合并数组数组.concat(数组1,数组2,数组3,…)可以用来合并多个数组 //合并多个数组concat var arr = ["zhangsan","lisi","wangwu"]; var arr1 = ["zhaoli","liqi"]; var arr2 = ["xiaoliao"]; var newArr = arr.concat(arr1);//合并了两个数组 console.log(newArr)运行结果原创 2020-07-02 00:16:03 · 173 阅读 · 0 评论 -
JavaScript连载20-数据存储方式、内置对象Array详解
一、堆和栈,数据的存储方式1.注意点:JS中是没有堆和栈的概念,我们用堆和栈来讲解,目的就是方柏霓讲解,存储方式是一致的。2.存储方式:基础数据类型进行值传递,复杂数据类型进行地址传递<script> //1.基本数据类型 var str1 = "xiaoliao"; var str2 = str1;//基本数据类型是传输的值,引用数据类型传输的是内存地址 str1 = "itLike"; console.log(str1); con原创 2020-06-27 23:53:43 · 171 阅读 · 0 评论 -
JavaScript连载19-this关键字、对象的增删改查
一、this的指向1.普通函数执行,内部this是指向全局对象window;2.函数在定义的时候this是不确定的,只有在调用的时候才可以确定;3.如果函数作为一个对象的方法,被该对象所调用,那么函数内的this则指向对象;4.构造函数中的this是一个隐式对象,类似一个初始化的模型,所有方法和属性都挂载到了这个隐式对象身上,后续通过new关键字来调用,从而实现实例化。我们分别举例:<script> //1.普通函数执行 var str = "张三"; fun原创 2020-06-24 00:11:14 · 117 阅读 · 0 评论 -
JavaScript连载18-工厂模式创建对象、自定义构造函数
一、工厂模式创建对象常见创建对象方式(1)对象字面量 var x1 = { "name":"小猴", age:22, sex:"女", dolt:function () { console.log("我是IT的小学生"); }}(2)new Object()创建对象 var x2 = new Object(); console.log(typeof x2);原创 2020-06-20 00:18:57 · 148 阅读 · 0 评论 -
JavaScript连载17-变量提升、对象的分类
一、变量提升练习1.变量提升:定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。var str1 = "练习";fn1();function fn1(){ console.log(str1);//undefined var str1 = "练习2";}console.log("===============");var num1 = 123;fn2();function fn2() { var num2 = 6; console.log原创 2020-06-16 00:34:07 · 98 阅读 · 0 评论 -
JavaScript连载16-回调函数、作用域链条、预解析
一、回调函数1.含义:如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针用来调用所指向的函数时,我们就说这是回调函数。2.函数也是有类型的,下面举个回调函数以及函数的类型演示。function fn() {}console.log(typeof fn);console.log(Function.constructor);//回调函数function add(num1,num2){ return num1+num2;}function sub(num1,num2)原创 2020-06-12 00:24:08 · 207 阅读 · 0 评论 -
JavaScript连载15-return、函数声明方式差异化、回调函数
一、return语句1.注意点:(1)如果函数没有使用return语句,那么函数默认的返回值:undefined;(2)如果函数使用return语句,那么跟在return后面的值,就成了函数的返回值;(3)如果函数使用return语句,但是return后面没有任何值,那么函数的返回值也是undefined;(4)推荐的做法要么让函数始终都返回一个值,要么不要有返回值。/** * 请写出一个函数用于判断一个数是不是偶数 * @param {number}num */function isEven(原创 2020-06-06 00:11:19 · 173 阅读 · 0 评论 -
JavaScript连载14-函数以及arguments解析
一、 函数函数定义2.使用typeof检查一个函数对象的时候,会返回function。3.函数和数组都是对象4.基本使用方式(1)不常用的方式var func = new Function("函数体”):(2)常用的方式i.函数声明式function f(参数){ 语句; 语句;}ii.函数表达式的声明方式var 变量 = function (参数) { 函数语句;}5.举例//1.function f() { var num = 0;原创 2020-06-02 00:21:39 · 122 阅读 · 0 评论 -
JavaScript连载13-数组、函数
一、数组1.数组是一种引用数据类型,属于对象2.数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据。3.创建数组的方式:(1)使用Array构造函数;i.创建一个空数组 var arr1 = new Array();ii.创建一个长度为30的数组 var arr2 = new Array(30);iii.创建一个包含两个字符串的数组 var arr3 = new Array(“厉害了”,“it likes”);(2)使用数组字面量;举个例子: /原创 2020-05-28 00:15:01 · 232 阅读 · 0 评论 -
JavaScript连载11-Switch
一、Swich语句1.switch语句格式swich(条件表达式){ case 表达式: 语句1; break; case 表示式: 语句2; break; case 表达式: 语句3: break; default: 语句n+1; break;}注意点:(1)JS中判断是否相等时是全等于(=),而不是等于(),也就是说既会判断类型是否相等优惠判断值是否相等。case后面既可以是常量也可以变量。(2)case的穿透原创 2020-05-20 00:24:29 · 81 阅读 · 0 评论 -
JavaScript连载10-流程控制语句if(快速总结)
一、if语句1.基本语法同java语言2.注意点:(1)如果只有一条语句的时候,if后面的大括号可以省略。(也同Java)(2)分号“;“也是语句,是空语句。(3)if else是一个整体,else匹配的if的时候是匹配最近的一个(4)对于非boolean类型的值,会先转换为boolean类型的值然后再进行判断。(5)判断变量和字面量的问题:但凡遇到一个变量等于或者不等于一个字面量的时候,把字面量写在前面。主要原因:经常会把==写成=(6)if语句可以嵌套使用/*if语句格式同java语言原创 2020-05-16 15:10:57 · 169 阅读 · 0 评论 -
JavaScript连载9-三目运算符、综合复习
一、逗号表达式1.程序中使用逗号表达式,通产是要分别求出逗号表示式内各表达式的值,并不一定要求整个表达式的值。2.并不是所有出现逗号的地方都组成逗号表达式,例如在变量说明中,函数参数表中逗号,只是用作各个变量之间的间隔符。var a,b;b = (a=3,--a,a*5);console.log(a,b);二、三目运算符1.格式:条件表达式?语句1:语句22.如果条件表示为true,则执行语句1,并返回执行结果如果条件表达式为false,则执行语句2,并返回执行结果3.注意点:条件运原创 2020-05-12 00:12:20 · 210 阅读 · 0 评论 -
JavaScript连载8-关系运算符、逗号运算符
一、关系运算符< > >= <= == !=注意点:下面特别拿出与Java进行比较(1)=判断值和类型是否相等 ! 判断值和类型是否不相等(2)对于非数值进行比较的时候,会将其转换为数值在进行比较,这里涉及到字符串转为数值(3)如果符号两侧的值都是字符时,不会将其转换为数字进行比较,而会分别比较字符的unicode编码,如果字符串的话,那么就会逐...原创 2020-05-08 00:19:11 · 139 阅读 · 0 评论 -
JavaScript连载7-一元运算符、赋值运算符、逻辑运算符
一、一元运算符1.正号(1)正号不会对数字产生任何影响(2)对于非Number类型的值,会先将其转换为Number,然后再进行运算注意:如果加号放在后面,就会报错。2.负号(1)负号就是对数字进行取反;var bool = true;console.log(+bool);var str = "1224";console.log(+str);console.log(+"jo...原创 2020-04-29 00:13:57 · 150 阅读 · 0 评论 -
JavaScript连载6-转化为Number和Boolean类型、运算符
一、承接连载51.注意事项对于非String使用parseInt()或parseFloat(),会先将其转换为String类型在进行操作。var s1 = false;var s2 = parseInt(s1);//这里会先转换为字符串false,然后在进行解析数字console.log(s2);2.添加一个运算符也可以达到转化成Number的作用添加+号,是不会改变数据的正负性...原创 2020-04-23 00:25:32 · 118 阅读 · 0 评论 -
JavaScript连载5-数据转换为Number与String、数字解析
一、承接连载43.null和undefined没有toString()方法,调用就会报错var num1 = undefined;console.log(num1.toString());var num2 = null;console.log(num2.toString());二、String()1.常规使用有些值没有toString()方法,此时可以使用String()方法...原创 2020-04-19 18:58:32 · 138 阅读 · 0 评论 -
JavaScript连载4-五种基本数据类型和类型转换
一、承接连载3,讲解基本数据类型1.Number(3)NaN非法数字(Not A Number)JS中对数值进行计算没有结果的时候,返回NaN<script> var num = NaN; console.log(num); console.log(typeof NaN);</script>(4)使用注意:浮点数可能会丧失精度2.S...原创 2020-04-14 00:22:22 · 135 阅读 · 0 评论 -
JavaScript连载3-变量内存分析、常量、数据类型
一、变量的内粗分析1.变量的默认值(1)如果变量初始化时没有赋值,那么里面存储的时undefined(2)示例var lk;console.log(lk);2.同时声明多个变量两种方式var name,age,sex;name = “kdfg”;age = 2;//或者var name = “jsoaf”,age,sex=“男”;3.在内存中的表现形式栈内存(存放变量等...原创 2020-04-06 22:48:10 · 118 阅读 · 0 评论 -
JavaScript连载2-常用输出方式、字面值、变量、常量
一、注释1.JavaScript中的注释(1)单行注释 //我是单行注释(2)多行注释 /我是多行注释//***我是多行注释*/(3)注释文化2.常见的(1)弹窗例如:window.alert("");(2)控制台输出例如:console.log(“优秀”);console.warn(“这是一个警告”)(3)向body中输出一个内容(既可以写入一个文档,也可以...原创 2020-04-03 00:28:37 · 104 阅读 · 0 评论 -
JavaScript连载1-基本简介(组成、关系、表示形式等)
一、概览1.JavaScript是前端开发的一门脚本语言(解释性语言)2.解释型语言的代表:(1)Python;(2)JavaScript;(3)PHP;(4)Ruby;3.编译型语言:程序执行之前需要一个专门的编译过程,把程序编译成为机器怨言的文件,比如:exe\jar文件;例如:C/C++,Pascal,Swift,Object-c比如:.c/.cpp编译成为*.obj文件,然后“链接...原创 2020-03-30 00:24:59 · 117 阅读 · 0 评论