JavaScript基础
关注
分享
扫一扫
积沙成塔——
这个作者很懒，什么都没留下…
展开
-
JavaScript中for…in,for…of,forEach的区别
【代码】JavaScript中for…in,for…of,forEach的区别。原创 2023-04-20 18:01:39 · 288 阅读 · 1 评论 -
JS如何让两个或者多个对象的属性组合起来成为一个新的对象
通过ES6新语法实现对象属性的合并原创 2023-03-07 11:55:18 · 955 阅读 · 0 评论 -
js中==和===的区别
js中==和===的区别原创 2023-03-03 15:07:11 · 86 阅读 · 0 评论 -
浅谈js的浅拷贝与深拷贝
js的浅拷贝与深拷贝原创 2023-03-03 14:40:44 · 92 阅读 · 0 评论 -
JavaScript浏览器对象模型
1.一个完整的BOM主要包括：window对象，history对象，location对象，document对象等，其中window对象是整个BOM的顶层对象2.window常用属性从这个表中可以看到，document对象，history对象，location对象等都是作为window对象的属性而存在的3.window对象常用方法Confirm（）方法用来创建确认对话框，当用户点击确定按钮时，返回值为true，当用户点击取消按钮时，返回值为false...原创 2021-11-28 12:34:09 · 490 阅读 · 0 评论 -
JavaScript的String对象使用
字符串常用方法原创 2021-11-23 22:07:42 · 352 阅读 · 0 评论 -
JavaScript的for of语法遍历数组元素
1.for of语句每循环一次都会从相应数组中拿到一个元素，直到拿完为止效果如下：示例代码：<script> var arr = [1,2,3,4,5,6]; for (let s of arr) { console.log(s); } </script>原创 2021-11-23 21:25:02 · 296 阅读 · 0 评论 -
三种动态创建元素区别
原创 2021-11-17 00:28:57 · 183 阅读 · 0 评论 -
JavaScript文档对象模型DOM节点操作之复制节点（7）
示例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <scrip.原创 2021-11-17 00:09:45 · 436 阅读 · 0 评论 -
简单版发布留言案例
效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> ul { background-color: pink; width: 250px; } </style> </head> <body> <textar.原创 2021-11-16 23:41:01 · 650 阅读 · 0 评论 -
JavaScript文档对象模型DOM节点操作之删除节点（6）
removeChild方法只能删除当前节点的子节点示例展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>删除</button> <ul> <li>li1</li> <li.原创 2021-11-16 23:21:57 · 465 阅读 · 0 评论 -
JavaScript文档对象模型DOM节点操作之创建和添加节点（5）
得出结论：创建元素节点后,必须要添加到相应的元素下，否则不会在页面出现示例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>123</li> </ul> <script> ..原创 2021-11-16 19:13:38 · 158 阅读 · 0 评论 -
JavaScript文档对象模型DOM节点操作之兄弟节点（4）
示例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div>我是div</div> <span>我是span</span> <script> //获取元素对象 var div = do..原创 2021-11-16 18:27:12 · 87 阅读 · 0 评论 -
新浪下拉菜单(js原生版本)
效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0px; padding: 0px; } ul { list-style: none; /* background-color: red; */ /*.原创 2021-11-16 17:27:36 · 1155 阅读 · 0 评论 -
JavaScript文档对象模型DOM节点操作之第一个子元素和最后一个子元素（3）
推荐使用解决方案的方法，实际开发用的就是这种方法示例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>li1</li> <li>li2</li> <li>l...原创 2021-11-16 14:58:33 · 246 阅读 · 0 评论 -
JavaScript文档对象模型DOM节点操作之父节点和子节点（2）
1.父节点2.子节点原创 2021-11-16 14:11:49 · 261 阅读 · 0 评论 -
JavaScript文档对象模型DOM节点概述（1）
原创 2021-11-16 13:53:51 · 73 阅读 · 0 评论 -
H5自定义属性详细介绍
主要用getAttribute来获取自定义属性，因为它兼容性比较好原创 2021-11-16 01:02:35 · 418 阅读 · 0 评论 -
tab栏切换制作(原生js版本）
效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0px; padding: 0px; } #container { /* background-color: red; */ width: 800px; .原创 2021-11-16 00:40:51 · 253 阅读 · 0 评论 -
JavaScript文档对象模型document对象获取自定义属性值和设置移除自定义属性(5)
得出结论：element .属性只能获取内置对象属性值，而element.getAtrribute(‘属性’)不仅可以获取内置对象属性值，还可以获取自定义属性值获得属性值案例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- id是内置对象属性 inde.原创 2021-11-15 11:42:09 · 1539 阅读 · 0 评论 -
表单全选取消
效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { /* background-color: red; */ width: 250px; margin: 0px auto; } table { width: 100%; .原创 2021-11-15 10:22:25 · 224 阅读 · 0 评论 -
表格隔行变色效果
注释：table里面的thead标签和tbody标签是示意标签，没有任何效果效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { /* background-color: red; */ width: 700px; margin: 50px .原创 2021-11-14 17:20:59 · 473 阅读 · 0 评论 -
百度换肤效果
效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0px; padding: 0px; border: 0px; } body { background-repeat: no-repeat; bac.原创 2021-11-14 16:39:47 · 344 阅读 · 0 评论 -
排他思想（算法）
效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button>.原创 2021-11-14 16:09:49 · 77 阅读 · 0 评论 -
密码框验证信息
效果展示：在这里插入代码片原创 2021-11-10 22:51:18 · 622 阅读 · 0 评论 -
文本框焦点事件显示隐藏文本框内容
效果展示：代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> input { color: #999; } </style> </head> <body> <input type="text" value="手机">.原创 2021-11-10 20:24:18 · 677 阅读 · 0 评论 -
JavaScript文档对象模型document对象改变Html元素样式属性(5)
1. document对象改变Html元素样式属性行内样式操作案例如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { height: 200px; width: 200px; background-color: darkgoldenrod; } &原创 2021-11-10 00:16:30 · 2129 阅读 · 0 评论 -
防淘宝关闭二维码案例
代码展示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #container { /* background-color: red; */ height: 115px; width: 180px; margin: 100px auto; position:.原创 2021-11-10 00:03:35 · 501 阅读 · 0 评论 -
仿京东显示隐藏密码明文案例（字体图标实现）
仿京东显示隐藏密码明文案例（字体图标实现）眼睛使用的是 iconfont 阿里矢量图标库的内容链接：https://www.iconfont.cn/search/index?<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="fontss原创 2021-11-09 01:31:26 · 443 阅读 · 2 评论 -
JavaScript文档对象模型document对象改变Html表单属性(4)
1.document对象改变Html表单属性更改Html元素内容时候可以用innerHtml属性进行修改，但是表单元素只能用value修改元素内容案例如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button>点我</button>原创 2021-11-08 01:02:56 · 230 阅读 · 0 评论 -
JavaScript文档对象模型document对象改变Html元素内容(3)
1.document对象改变Html元素(1.)innerText不会自动解析html标签,会将代码前后的空格和换行去掉innerHTMl会自动解析html标签，保留代码前后的空格和换行 （推荐使用这个）这两个属性都可以改变html元素内容，会将标签原有的元素内容覆盖，而不是追加元素内容(2.）除此之外innerText和InnerHtml两个属性不仅可以改变Html元素内容，还可以获取Html元素内容案例代码如下：<!DOCTYPE html><html> <原创 2021-11-07 22:36:45 · 688 阅读 · 0 评论 -
JavaScript文档对象模型获取body元素对象和获取Html元素对象(3)
1.获取body元素对象和获取Html元素对象代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> // 获取body元素对象 var bodyEle = document.body; console.log(bodyE原创 2021-11-07 18:22:23 · 507 阅读 · 0 评论 -
JavaScript文档对象模型document对象查找Html元素(2)
1.document对象查找Html元素以下表格是获取Html元素的常用方法：（1.）getElementById方法：返回值是元素对象，如果没有符合的条件对象，则返回为null；（2.）getElementsByTagName: 返回值是数组对象，如果没有符合条件的对象，则返回为空数组（3.）getElementsByName: 返回的是指定标签名的元素对象集合，如果无符合条件的对象，则返回为空数组。（4.）getElementsByClassName: 返回值为指定类名的元素集合，元素集合中原创 2021-11-07 18:08:04 · 894 阅读 · 1 评论 -
JavaScript文档对象模型概述(1)
1.DOM的核心操作是查看节点、创建节点、增加节点、删除节点、以及替换节点。节点的特点如下：（1.）整个文档是一个文档节点（2.）每个Html标签是一个元素节点（3.）包含在Html元素中的文本是文本节点，另外空格也属于文本节点（4.）每个Html属性是一个属性节点（5.）注释属于注释节点...原创 2021-11-07 17:06:42 · 263 阅读 · 0 评论 -
API和Web API（1）
原创 2021-11-07 16:56:34 · 72 阅读 · 0 评论 -
JavaScript基础和Web APIs两个阶段的关联性（1）
原创 2021-11-07 16:43:30 · 144 阅读 · 0 评论 -
JavaScript浏览器对象Window对象常用方法（3）
1.window对象常用方法1.window对象常用方法见表有时候定时器有很多这个时候我们就需要给定时器设置一个名字，如以下代码所示：var times1 = setTimeout("change()",5000); //给定时器设置一个名字2.回调函数...原创 2021-10-31 23:59:55 · 103 阅读 · 0 评论 -
JavaScript浏览器对象模型常用事件（2）
1.window常用对象1.窗口加载事件（1.）onload事件（2.）DomContentLoaded事件onload事件是等所有页面全部内容加载完毕，才执行的事件，而这个事件，仅当Dom加载完成就会执行事件，不包括样式表css，图片，flash等等...原创 2021-10-31 16:35:16 · 86 阅读 · 0 评论 -
JavaScript浏览器对象模型概述（1）
1.什么是Bom2.Dom和Bom不同区别3.Bom的构成原创 2021-10-31 16:03:38 · 112 阅读 · 0 评论 -
JavaScript的eval（）函数(1)
1.JavaScript的eval（）函数1.eval（）函数运行是以字符串形式表示的，它能让数字字符串在里面就进行计算，这样就不用自己写算法，将字符串里面的数字截取出来在进行计算，而函数直接会进行算术计算并且将最终结果值返回<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function co原创 2021-10-30 23:13:57 · 142 阅读 · 0 评论