javascript
关注
分享
扫一扫
文章平均质量分 71
mintsolace
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Javascript——常用正则表达式和表单验证
用户名：/^[a-z0-9_-]{3,16}$/密码：/^[a-z0-9_-]{6,18}$/十六进制值：/^#?([a-f0-9]{6}|[a-f0-9]{3})$/电子邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/URL：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/IP 地址：/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][原创 2020-08-31 22:56:50 · 253 阅读 · 0 评论 -
Javascript——正则表达式的创建方式和边界符
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions正则表达式：用于匹配字符串中字符组合的模式。在Javascript中，正则表达式也是对象。通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。特原创 2020-08-28 10:42:37 · 436 阅读 · 0 评论 -
Javascript——事件对象和常用的鼠标事件
事件对象：event对象代表事件的状态，比如键盘按键的状态/鼠标的位置/鼠标按钮的状态事件发生后，跟事件相关的一系列信息数据的集合都放到这里，这对象就是事件对象event，有很多属性和方法。事件对象只有有了事件才会存在，是系统给我们自动创建的，不需要传递参数，当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。事件对象是事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，如果是键盘事件里面就包含键盘事件的信息，如判断用户按下了哪个原创 2020-08-22 19:03:48 · 404 阅读 · 0 评论 -
Javascript——冒泡排序和阻止事件冒泡
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。JS代码中只能执行捕获或者冒泡其中的一个阶段onclick和attachEvent只能得到冒泡阶段addEventListener(type,listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。DOM事件流三个阶段JS代码中只能执行捕获或者冒泡其中的一个阶段onclick和attachE原创 2020-08-21 20:07:18 · 744 阅读 · 0 评论 -
Javascript——＜input＞: 输入（表单输入）元素的type和样式属性
<label for="name">Name (4 to 8 characters):</label><input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">label { display: block; font: 1rem 'Fira Sans', sans-serif;}input,label {原创 2020-08-19 21:15:03 · 2184 阅读 · 0 评论 -
Web API——执行事件的步骤 & 操作元素
Javascript的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。1.改变元素内容element.innerText：从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。...原创 2020-06-11 23:29:18 · 323 阅读 · 0 评论 -
Web API——获取元素、事件基础
1. 如何获取页面元素DOM在实际开发中主要用来操作元素获取页面中的元素可使用以下几种方式：（1）根据ID获取（2）根据标签名获取（3）根据HTML5新增的方法获取（4）特殊元素获取2. 根据ID获取使用getElementById()方法可以获取带有ID的元素对象element是一个Element对象，如果当前文档中拥有特定ID的元素不存在则返回nullid是大小写敏感的字符串，代表了所要查找的元素的唯一ID//返回的是获取过来元素对象的集合，以伪数组的形式存储document.g原创 2020-06-11 22:05:56 · 243 阅读 · 0 评论 -
Javascript——字符串对象
1. 基本包装类型把简单数据类型包装成了复杂数据类型，这样基本数据类型就有了属性和方法。var str = 'andy';console.log(str.length);对象才有属性和方法；复杂数据类型才有属性和方法基本包装类型：//(1)把简单数据类型包装为复杂数据类型var temp = new String('andy');//(2)把临时变量的值给strstr = temp;//(3)销毁这个临时变量temp = null;为了方便操作基本数据类型，Javascript还原创 2020-06-07 17:06:10 · 254 阅读 · 0 评论 -
Javascript——数组去重、转换为字符串
数组去重目标：把旧数组里不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。核心算法：遍历旧数组，拿着旧数组元素去查询新数组，如果该元素在新数组里没有出现过，就添加，否则不添加。如何知道该元素有没有存在：利用新数组indexOf(数组元素)如果返回-1，则说明新数组里面没有改元素。 <script> function unique(arr){ var newArr = []; for (var i = 0; i&原创 2020-06-04 23:00:22 · 562 阅读 · 0 评论 -
Javascript——数组元素添加、删除、排序和索引
添加删除数组元素的方法push()在数组的末尾添加一个或多个数组元素var arr = [1,2,3];arr.push(4,‘pink’);console.log(arr);(1)push可以给数组追加新的元素(2)push()参数直接写数组元素即可(3)push完毕之后，返回的结果是新数组的长度(4)原数组也会发生变化unshift在数组开头，添加一个或多个数组元素console.log(arr.unshift(‘red’,‘purple’));console.log(arr);原创 2020-06-04 22:09:17 · 891 阅读 · 0 评论 -
Javascript——电商倒计时案例
格式化日期时分秒1.通过Date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1号过了多少毫秒数通过valueOf() getTime()var date = new Date();console.log(date.valueOf());console.log(date.getTime());2.简单写法（最常用写法）var date1 = +new Date();//+new Date() 返回总的毫秒数console.log(date1);3.H5新增的获得总的毫秒数c原创 2020-06-03 21:35:24 · 372 阅读 · 0 评论 -
Javascript——Node属性及方法
Node是一个接口，许多 DOM API对象的类型会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如继承同一组方法，或者用同样的方式测试。在方法和属性不相关的特定情况下，这些接口可能返回 null。当将子节点添加到不允许子节点存在的节点时，它们可能会抛出异常。属性概念Node.baseURI返回一个表示base URL的DOMString。不同语言中的...原创 2020-02-19 21:28:28 · 416 阅读 · 0 评论 -
Javascript——Document
Document接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM树。DOM树包含了像 <body> 、<table>这样的元素，以及大量其他元素。属性概念Document.anchors返回文档中所有锚点元素的列表Document.body返回当前文档的<body> 或 <frameset> 节点...原创 2020-02-18 21:34:27 · 253 阅读 · 0 评论 -
Javascript——为元素注册事件案例
例：为元素注册事件 <input type="button" value="分离html" id="btn1"/> 先有按钮，才能获取，获取之后才能注册事件 <script> //根据id属性的值从文档中获取元素 var btnObj=document.getElementById("btn"); //...原创 2020-02-13 21:25:43 · 445 阅读 · 0 评论 -
Javascript——GlobalEventHandlers
参考:https://developer.mozilla.org/en-US/docs/Web/API/ElementGlobalEventHandlers描述了一系列web worker（如HTMLElement, Document, Window或 WorkerGlobalScope）的事件接口。这里面每一个接口都可添加更多的事件句柄。事件属性描述abortonab...原创 2020-02-09 18:07:24 · 550 阅读 · 0 评论 -
Javascript——KeyboardEvent keyMap
keycodeKeyCodeEscapeEscape27F1F1112(新建标签帮助)F2F2113F3F3114F4F4115F5F5116(快捷键刷新)F6F6117F7F7118F8F8119(debug)F9F9120F10F10121F11F11122(...原创 2020-02-09 16:08:40 · 348 阅读 · 0 评论 -
JavaScript——构造函数和实例对象之间的关系
实例对象中有个属性,proto，也是对象，叫原型，不是标准属性,浏览器使用的构造函数中有一个属性，prototype，也是对象，叫原型，是标准属性，程序员使用实例对象的原型__proto__和构造函数的原型prototype指向是相同的实例对象中的__proto__原型指向的是构造函数中的原型prototypeconsole.log(per.__proto__==Person.proto...原创 2019-12-15 17:31:39 · 271 阅读 · 0 评论 -
Javascript——变量值的传递
变量值的传递：语句：a=b; //把b的值赋给a，b不变。将等号右边的值赋给左边的变量；等号右边的变量值不变。例1: var a = 1; //定义a，并且赋值1 var b = 2; //定义b，并且赋值2 a = b; //就是将b的值给a，b的值不变。所以a就是2，b是2不变。 console.log(a); //2 console.log(b); //2例2： ...原创 2019-05-26 16:04:06 · 713 阅读 · 0 评论 -
Javascript——看星星吗
<style> div{ width: 600px; height: 600px; border: 2px solid yellow; background-color: black; position: relative; }...原创 2019-07-14 16:54:44 · 144 阅读 · 0 评论 -
Javascript——动画函数封装及案例
1.协议按钮禁用 2.设置div透明度渐变 3.设置div变宽 4.设置移动元素1<textarea name="texta" id="" cols="30" rows="10"> 我想逃往哪里逃，你那百毒不侵的微笑，我想逃要往哪里逃，你的喜怒哀乐都那么美妙</textarea><input type="button" value="请仔细阅读协议(...原创 2019-07-14 23:53:28 · 346 阅读 · 0 评论 -
Javascript——元素动态创建表格反正也看不懂
<body><input type="button" value="创建表格" id="btn"/><div id="dv"></div><script src="common.js"></script><script>var arr=[ {name:"百度", href: "https://ww...原创 2019-07-10 21:59:58 · 569 阅读 · 0 评论 -
Javascript——现在不懂也许以后就懂了的案例2
例：点击按钮禁用文本框<body><input type="button" value="禁用文本框" id="btn"/><input type="text" value="文本框" id="txt"/><script> //先根据id获取按钮，为按钮注册点击事件，添加事件处理函数 document.getElementBy...原创 2019-06-30 21:31:45 · 167 阅读 · 0 评论 -
Javascript——节点及获取节点
节点的属性：可以使用标签——元素. 可以使用属性节点. 文本节点.nodeType: 节点的类型：1——标签，2——属性，3——文本nodeName: 节点名字：标签节点——大写标签名字，属性节点——小写属性名字，文本节点——#textnodeValue: 节点的值：标签节点——null，属性节点——属性值，文本节点——文本内容<div> <p><...原创 2019-07-05 22:07:37 · 243 阅读 · 0 评论 -
Javascript——节点操作元素案例及封装节点
例：点击按钮设置div中p标签改变背景颜色<input type="button" value="变色" id="btn" /><div id="dv"> <span>1</span> <p>2</p> <span>3</span> <p>4</p&...原创 2019-07-06 15:36:41 · 273 阅读 · 0 评论 -
Javascript——元素的绑定与解绑
绑定事件的区别：addEventListener();attachEvent()相同点：都可以为元素绑定事件不同点：1.方法名不一样2.参数个数不一样：addEventListner三个参数，attachEvent两个参数3.addEventListener 谷歌，火狐，IE11支持，IE8不支持attachEvent 谷歌火狐不支持，IE11不支持，IE8支持4.this不同...原创 2019-07-11 22:34:55 · 283 阅读 · 0 评论 -
Javascript——轮播图、document获取元素、scroll
console.log(document.body);//获取的是元素——标签 //获取title console.log(document.title);//标签中的值 document.title="mayday"; //获取html console.log(document.documentElement);offset系列:获取元素的相关...原创 2019-07-17 22:13:59 · 224 阅读 · 0 评论 -
Javascript——变速动画函数封装
<style> *{ margin: 0; padding: 0; } div{ margin-top: 20px; width: 200px; height: 100px; backgr...原创 2019-07-22 23:06:57 · 272 阅读 · 0 评论 -
Javascript——tab切换案例实现
先写个通用的css模板 <style> *{ margin: 0; padding: 0; } ul{ list-style-type: none; } .box{ width: 400px; ...原创 2019-07-04 21:29:03 · 334 阅读 · 0 评论 -
Javascript——元素相关操作方法
获得元素，替换元素，移除元素 <style> div{ width: 200px; height: 150px; border: 2px dashed pink; } </style>......<body><input type=...原创 2019-07-09 22:44:39 · 190 阅读 · 0 评论 -
Javascript——BOM(浏览器)的若干对象的属性和方法
location对象console.log(window.location);地址栏上的#及后面的内容：console.log(window.location);主机名及端口号：console.log(window.location.host);主机名：console.log(window.location.hostname);文件路径：相对路径：console.log(window.l...原创 2019-07-13 17:52:46 · 207 阅读 · 0 评论 -
Javascript——if-else语句和switch-case语句
if-else语句两个分支，只能执行一个分支if-else语句的语法：if（表达式）{代码1}else{代码2}执行过程：如果表达式的结果是true则执行代码1，如果表达式的结果是false则执行代码2例1：判断这个数字是奇数还是偶数var number=parseInt(promt("请输入一个数字"));if(number%2==0){ console.log("...原创 2019-06-02 21:47:36 · 870 阅读 · 0 评论 -
Javascript——函数参数及举例
函数参数：在函数定义的时候，函数名字后面的小括号里的变量就是参数。在函数调用的时候，按照提示的方式，给变量赋值就叫传值，把这个值传到变量（参数）中。形参：函数在定义的时候小括号例的变量叫形参实参：函数在调用的时候小括号里传入的值叫实参，实参可以是变量也可以是值。函数没有明确的返回值，但是在调用的时候接收了，那么结果就是undefined（没有明确的返回值：函数中没有return，函数中有r...原创 2019-06-13 20:19:56 · 270 阅读 · 0 评论 -
Javascript——多分支的if语句和If语句的嵌套
多分支的if语句和跳楼现象例1：用户输入成绩，如果成绩大于等于85，那么提示优秀；否则，如果成绩大于等于70，那么提示良好；否则，如果成绩介于60-69之间，那么提示及格；否则，不及格。 <script type="text/javascript"> var score=parseFloat(prompt("请输入成绩")); if (score>=85){ a...原创 2019-06-01 14:37:20 · 7171 阅读 · 0 评论 -
Javascript——break continue&数组（基本）
break: 如果在循环中使用，遇到了break，则立刻跳出当前所在循环continue: 在循环中如果遇到continue关键字，直接开始下一次循环例1：求100-200之间所有奇数的和（用continue）var sum=0;var i=100;while(i<=200){ //判断是不是偶数 if(i%2==0){ //如果是偶数→跳过这个数字...原创 2019-06-05 22:43:14 · 443 阅读 · 0 评论 -
Javascript——变量的定义
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据，使用变量可以方便获取或修改内存中var a=100;固定写法，var是variant变量的缩写，可以给变量任意的取名字。var是一个关键字，是有特殊功能的小词语，关键字后面要有空格隔开。等号表示赋值，会将等号右边的值赋给左边的变量。变量声明：有var，有变量名字，没有赋值。变量初始化： 有var，有变量名字，有...原创 2019-05-26 16:12:41 · 796 阅读 · 0 评论 -
Javascript——认识For循环
认识for循环：循环语句就是执行一些类似的代码，让这些代码的编写变得简化。 在控制台输出1~100： script type="text/javascript"> for(var i=1; i100; i++){ console.log(i); } script>补充：i++等价于i=i+1，即i自增1 也就是说原创 2017-12-10 10:51:23 · 2090 阅读 · 1 评论 -
Javascript——函数
认识函数原创 2017-12-19 22:10:38 · 309 阅读 · 0 评论 -
Javascript——If语句及其举例
举例： script type="text/javascript"> if(明天不下雨){ 我就出去玩； }else{ 我就在家写作业； } script>公式：原创 2017-12-09 21:35:32 · 2525 阅读 · 0 评论 -
Javascript——布尔值、关系运算符、逻辑运算符及其相应转换
布尔值即true和false <script type="text/javascript"> var a=true; var b=false; console.log(a); console.log(b); console.log(typeof a); console.log(typeof b);原创 2017-11-30 21:53:41 · 964 阅读 · 0 评论 -
Javascript——运算符表达式和变量格式的转换
运算符和表达式： 数学运算符 先算乘除后算加减：var a=1+2*3;console.log(a); //7var a=12/2*3+2;console.log(a); //20小括号能够影响计算顺序。没有中括号也没有大括号，只有小括号，小括号能嵌套：var a=(1+2)*3+3*5console.log(a); //24var a=((1+2)*原创 2017-11-28 21:55:17 · 632 阅读 · 0 评论