前端内卷小队社区-CSDN社区云

社区首页 (3097)

我加入的社区

我管理的社区

官方推荐社区 76

其他社区 3097

请编写您的帖子内容

社区频道(4)

显示侧栏

卡片版式

全部

前端

博文收录

Ada助手

最新发布

最新回复

标题

阅读量

内容评分

精选

前端内卷小分队

前端领域优质创作者

2022-08-12

节点操作 ------------- 父节点

在获取元素时我们可以利用DOM提供的一系列方法获取，但是这些方法过于繁琐，不简练。所以我们学习节点操作，页面中所有内容都是节点，有文档节点，元素节点，属性节点等，我们主要针对研究的是元素节点节点（node）拥有节点类型（nodeType），节点名称（nodeName），节点值（nodeValue）父节点：parentNode：得到的是最近的父级节点，找不到的话返回 null<div class="father"> <div class="son"&g

...全文

226

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

节点操作 ------------- 子节点

有父节点，也有子节点，例如在列表中获取一堆 li 标签就显得很便捷子节点：childNodes：可以看出输出结果为9个，但是明明只有四个元素，那剩下的五个是什么呢？可以看到每个 li 标签换行时有回车，回车算文本节点，也就是这个方法会把元素节点和文本节点都输出出来 <ul class="father"> <li></li> <li></li> <li...

...全文

195

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

节点的复制（克隆）

复制节点分为浅拷贝和深拷贝，浅拷贝是只复制标签不复制内容，深拷贝是复制标签并会把内容也复制过来。复制有两个步骤：设置要复制的标签，然后选择位置添加。浅拷贝：要复制的节点.cloneNode ( ) : 只复制标签，不复制标签内的内容 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ...

...全文

200

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

动态创建表

利用节点操作也可以完成动态地创建表格，我们将数据放进对象中，再将对象放入数组，每步的操作为创建行，创建单元格，再创建删除格，单元格和删除格之所以没有一起创建是因为单元格的个数等于对象内属性的个数，可以直接遍历创建，而删除是单独的功能，用到的方法就是学习过的各种节点操作，内容可以直接添加在数组中即可完成创建（开发时数据在数据库中连接）JS 部分代码： var tbody=document.querySelector('tbody'); for(var i=0;i<dat.

...全文

193

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

网页前端大作业主界面（Html+CSS+JS+Axios）

第一次写文章有些紧张，下面介绍一下本代码块实现的效果，本代码快只实现了仿照游戏平台设计的一个网页，导航栏中的跳转页面均有实现，需要的话可私聊。表单验证区域未添加具体JS代码，需要可私聊添加，由于本人喜欢打CSGO所以尝试写了这个网页，有不足请多多指教！首页HTML代码及CSS样式可参考页面效果如下（中间及下部中间区域为轮播图和图片滚动效果）*以下为首页的代码*<!DOCTYPE html><html lang="en"> <head> .

...全文

211

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

Java Script 内置对象（二） --------- Date 对象

接下来说明 JS 第二类常见的内置对象 —— Date 对象Date 对象和 Math 对象不同，Math 对象不是构造函数，可以直接使用，而 Date 对象是一个构造函数，所以我们必须经过对象实例化，即 new 过之后才可以使用，Date 对象多用于处理开发中的时间和日期方面的问题。Date 对象实例化：var date=new Date();Date 对象实例化时可以有参数也可以没有参数，没有参数输出的就是当前系统当时的的标准时间，有参数的话我们可以输出想要展现的时间一：

...全文

109

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

Java Script 内置对象（四） --------- String 对象

开始讲 String 内置对象前，首先我们来看两行简单的代码：var str='abcde';console.log(str.length); //输出5结果会输出 str 的长度 5，但是我们知道对象及复杂的数据类型才会有属性和方法，为什么这个简单的数据类型会有 length 属性呢？？？这就是此文章的内容：基本包装类型一：基本包装类型什么是基本包装类型呢？就是把简单数据类型包装为复杂数据类型：var str='abcde'; var temp=new Stri

...全文

211

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

判断出现次数最多的字符

判断一个字符串内出现次数最多的字符大致思路：利用 charAt() 得到字符串中的每一个字符，创建一个空对象，判断该对象中有没有该字符，有的话让该字符自增1，没有的话将该对象的属性值赋为1，然后再遍历对象，用判断数组最大值的方法同样去得到对象内属性值最大的一个代码实现：var str=prompt('请随机输入一串字符');var obj={};for(var i=0;i<str.length;i++){ var chars=str.charAt(i);

...全文

209

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

倒计时案例

在日常开发中很多地方都会用的到倒计时，例如淘宝，京东的双十一秒杀倒计时等，我们如何也写出一个倒计时效果呢，我们首先会想到获取当前时间，再减去我们设置好的时间即可，但是我们获取到的标准时间很可能会出现减去之后是负数的情况（例如02-12）这怎么办呢？于是我们的时间戳便有利用价值了，时间戳即总毫秒数，这个时间是永远不会重复的，对此我们可以使用设置好的总毫秒数减去当前的总毫秒数，在进行一系列单位换算，就可以得到一个简单的倒计时案例了，首先我们需要熟练记清楚单位换算之间的关系：1秒=1000毫秒天数=秒数/

...全文

193

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

数组去重案例

在一个数组中有很多对相同的数组元素，我们怎么操作才能使新数组中的元素没有重复的大致思路：遍历旧的数组，用旧的数组去查询新的数组，如果有这个元素就不添加进新数组，没有的话就添加进去。但是我们怎么才能知道新数组中有没有呢，这就用到了数组元素的索引如果查询不到，则返回-1，对此我们只要判断是不是-1 就可以知道新数组中有没有该元素代码实现：var arr=[1,1,2,2,3,4,5,5,5,6,4,3,6,7,9,8];var newarr=[];for(var i=0;i<

...全文

213

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

API 与 Web API 以及与Java Script 基础的关联

Java Script 分为三部分，分别为 ECMA Script , DOM , BOM其中ECMA Script就是学过的 JS 基础语法，DOM与BOM属于Web APIAPI：API 即应用程序编程接口（Application Programming Interface）是一些预先定义过的函数或接口，目的在于用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节，可以简单理解为 API 就是为程序员提供的一种便捷的工具，方便各种想..

...全文

199

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

DOM 基础 ---------- 获取元素

DOM 即文本对象模型，是 W3C 推荐的处理可拓展标记语言的标准编程接口，通过这些接口可以改变网页的内容，结构，样式文档：一个页面就是一个文档，DOM 中用 document 表示元素：页面中所有的标签都是元素，DOM 中用 element 表示节点：网页中所有内容（标签，属性，文本，注释）都叫节点，DOM 中用 node 表示DOM 获取元素有很多方法，下面一一说明一：document.getElementById()此方法用于返回一个匹配特定的 ID 元素，由于元素的 ID

...全文

201

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

事件对象 ------------- 得到事件类型

e.type这个方法可以返回事件的类型<div>111111</div> <script> var div=document.querySelector('div'); div.addEventListener('click',fn) div.addEventListener('mouseover',fn) div.addEventListener('mouseout',fn) function fn

...全文

194

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

事件对象 ------------- 阻止默认行为的方法

阻止默认行为例如我们不想让一个链接进行跳转，就可以用事件对象的阻止默认行为的方法e.preventDefault ():点击链接后不再跳转，阻止了默认属性，这种写法为 DOM 的标准写法<a href="http://www.baidu.com/" target="_blank">这是一个链接可以跳转</baidu></a> <script> var a=document.querySelector('a'); a.ad

...全文

191

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

禁止页面复制粘贴内容

该效果用到了两个事件，一个是禁止右键菜单栏提示，另一个是禁止获得文本节点（选择内容），然后在用到事件对象的阻止默认事件发生的方法：e.preventDefault()禁止菜单栏提示：contextmenu禁止获得文本节点 / 禁止选择内容：selectstart<p> 我是一段不可以复制的文字内容</p> <script> var ele=document.querySelector('p'); ele.addEventLis

...全文

186

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

获取鼠标点击位置的坐标

获取点击的坐标有三种情况获取在可视区域的坐标获取在文档页面的坐标获取在电脑屏幕的坐标一：获取在可视区域的坐标e.clientX : 获取距离页面左边的距离e.clientY ：距离页面可视区域上边框的距离获取在可视区的坐标，可视区就是我们屏幕可以看得到的区域例如在下方的截图中，红框圈住的区域就是可视区域，不管页面有多长，展示出来的可以看得见的这一部分就叫做可视区域 document.addEventListener('click',function(e){ .

...全文

195

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

事件委托（代理/委派）

事件委托也叫事件代理，jQuery中叫事件委派事件委托就是不给每个子元素设置事件侦听器，而是给其父元素设置事件侦听器，然后利用冒泡阶段的原理影响每个子节点给ul绑定注册事件，点击 li 标签后会冒泡，冒泡到其父元素 ul 身上，因为 ul 注册了事件，就会触发事件侦听器弹出提示框 <ul> <li>1</li> <li>2</li> <li>3</li>

...全文

185

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

方块跟着鼠标移动的案例

在淘宝页面中经常会见到鼠标放上商品照片后照片会放大，并且移动鼠标，放大区域也会变化，今天我们来完成方块跟着鼠标移动的案例为了不占用页面位置，我们给方块设置为绝对位置 position：absolute，然后利用鼠标点击获取位置的方法：e.pageX 与 e.pageY 来获取鼠标当前位置，事件不再使用 click ，而是用mouseover，只要鼠标移动距离超过1px，就会执行该事件 var ele=document.querySelector('div'); document.ad

...全文

191

评分

回复

前端内卷小分队

前端领域优质创作者

2022-08-12

什么是 BOM ？

BOM 是学习完 DOM 文档对象模型后的另一个对象模型 --------- 浏览器对象模型，它提供了一系列独立于内容而与浏览器窗口进行交互的对象，并且每个对象都有很多方法和属性，核心对象及顶级对象是 window再来回顾一下 DOM 和 BOM 的区别：DOM：文档对象模型顶级对象为 document 主要学习内容为操作页面元素标准为 W3C 标准规范BOM：浏览器对象模型顶级对象为 window 主要学习的是浏览器窗口的交互 BOM 是浏览器厂商在各自浏览器设定.

...全文

80

评分

回复

前端内卷小队

64

社区成员

57

社区内容

发帖

与我相关

我的任务

javascript前端vue.js 个人社区河南省·安阳市

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

大家好，欢迎来到前端内卷小队社区，大家可以尽情分享技术性文章，分享日常生活学习等等，但是要注意社区内禁止发表侮辱性言论，禁止涉及政治敏感话题，一经发现警告一次，第二次将被移出哦，大家共同构建文明社区！