原生JavaScript 第12页

原生JavaScript写出Tabs标签页的实例代码

最近在重新学习JavaScript，手写了一个tabs标签页。话不多说，直接开始。首先，是前端页面。图1tabs先来把tabs分解一下：图2tabs分解首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容

·2020-07-20 16:18

原生JavaScript写出Tabs标签页

最近在重新学习JavaScript，手写了一个tabs标签页。话不多说，直接开始。首先，是前端页面。图1tabs先来把tabs分解一下：图2tabs分解首先，一个大的框div，上面红色的框是导航栏nav，导航栏里是一个无序列表ul，里面三个li标签（黄色的框），li标签里两个绿色标签是两个span，一个用来放导航的名字，一个用来放导航关闭的icon，右边是一个button，用来添加新的导航栏及内容

davidbeckham·2020-07-20 15:00

前端面试概念收集器

前端面试概念收集器前端面试三部曲前端面试概念收集器前端面试的经典题前端面试的难题和怪题本文分为概念，原生Javascript，css知识点，http协议，网络安全，性能优化。

brandonxiang·2020-07-16 06:42

web前端开发工程师拿着自己的项目去面试，月薪12K

GIF【手机用户】点我查看知识点：综合的知识点较多，几乎没有简单布局，考验的是html5的新特性，比如动画，canvas等方面的知识，还有对于原生javascript的考究也是比较全面的，包括独立封装javascript

DarkSpy13·2020-07-16 02:46

原生javascript实现异步的7种方式

原生的javascript实现异步的方式其实远远不至7种，大可以分3类，延迟类型：setTimeout（setInterval也是可以的）、requestAnimationFrame、setImmediate（IE10及以上）监听事件实现的类型：监听newImage加载状态、监听script加载状态、监听iframe加载状态、Message带有异步功能类型Promise、ajax(XMLHttpR

zakkye·2020-07-15 12:32

jQuery与Ajax 面试题库（长期更新中...）

你可以只用写几行的jQuery代码就能实现更多的东西.它是最长被用到的JavaScript库之一，并且现在已经很少有不用jQuery而使用原生JavaScript的新项目了。

weixin_34273479·2020-07-15 05:46

一些常用判断JQuery与原生javascript实现区别

一、判断DOM下是否存在某个元素Javascript实现：if(document.getElementByIdx_x('but')){alert('元素存在');}else{alert('元素不存在');}Jquery实现：但是在JQuery下，jquery内置没有直接判断dom中某个元素是否存在的方法.$(".classname")获取到的是jquery对象,是一个object,无法判断此元素是

Point_halo·2020-07-15 02:12

原生JavaScript中动画与特效的实现原理

现如今，许多页面上均有一些动画效果。适当的动画效果可以在一定程度上提高页面的美观度，具有提示效果的动画可以增强页面的易用性。实现页面动画的途径一般有两种。一种是通过操作JavaScript间接操作CSS样式，每隔一段时间更新一次；一种是直接通过CSS定义动画。第二种方法在CSS3成熟之后被广泛采用。我们今天只讲第一种实现方式。一、JavaScript中动画原理所谓的动画，就是通过一些列的运动形成的

xiaoxiao昱·2020-07-15 01:03

文本超出显示省略号

前言：1.因为本人是在bootstrap和jquery下做的，所以用的是jquery没有使用原生javascript，所以需要进行引包。

二颜丨ErYan·2020-07-15 00:15

Javascript中关于Array.filter()的妙用详解

祥哥的说·2020-07-14 19:37

原生JavaScript/js实现ajax异步数据处理

一、ajax介绍Ajax是一种用于创建快速动态网页的技术。Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。[百度百科]简单的讲，ajax就是一种不需要刷新就可以实现一些交互操作的技术，例如常见的登录，密码如果错误，会有红色字提示密码错误，这种就

zhao不到·2020-07-14 18:28

TypeScript学习心得总结（一）

为什么使用TypeScriptJavaScript的超集支持所有原生JavaScript的语法强类型语言现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。

YuanlongWang·2020-07-14 14:39

程序员javascript写王者荣耀点券抽奖，打算去腾讯面试

点击查看抽奖特效程序员javascript写王者荣耀点券抽奖系统，打算去腾讯面试这次用的jquery没用原生javascript了，如果需要原生javascript教程案例源码的可以关注去翻看前面的文章和视频

DarkSpy13·2020-07-14 12:36

js或jquery如何获取父级、子级、兄弟元素(包括祖级、孙级等)

原生javascript方法：vara=document.getElementById("dom");del_space(a);//清理空格varb=a.childNodes;//获取a的全部子节点；varc

datura_lj·2020-07-14 09:50

typescript学习心得

为什么使用TypeScriptJavaScript的超集支持所有原生JavaScript的语法强类型语言现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。

爱吃奶黄包の小脑腐�·2020-07-14 05:59

原生JavaScript实现video播放器中播放/暂停/快放/慢放/慢动作功能

HTML代码Document-->播放/暂停快进快退慢动作播放/暂停功能获取video元素，通过paused()方法判断视频是否处于暂停状态，paused()会返回一个布尔值。当视频处于暂停状态时返回true，从而执行play()方法让视频开始播放。当视频处于播放状态时返回flase，故if条件不成立，从而执行pause()方法让视频暂停。functionVideoPlay(){//获取视频控件(

王佳斌·2020-07-14 03:37

什么是Ajax+Ajax底层原理+如何使用原生JavaScript或JQuery发送Ajax请求

2、原生JavaScript实现Ajax请求1、认识XMLHttpRequest对象方法名称说明open(Stringmethod,Stringurl,bo

SunBairn·2020-07-13 21:35

开源的长列表渲染库-Clusterize.js

Clusterize.jsClusterize.js基于Vanilla.js(原生JavaScript)，用于在前端高效地展示大型数据集中的数据�。

秦岭熊猫·2020-07-13 14:12

原生JavaScript仿写jQuery源码-------attr()属性添加方法

ID选择器简写function$(e){if(e.substr(0,1)==='#'){returndocument.getElementById(e.substr(1));}else{returndocument.getElementsByTagName(e)}}console.log($('#p'),$('div'))结果如下图，这是个简单的id选择器封装简写类选择器function$(e){

空忧·2020-07-13 12:42

爬虫必备-JS之Dom操作大全

原生javascript功能是蛮强大的，只不过部分属性不支持IE8以下浏览器。下面对jquery相关方法，如何用js来实现，做一些简单总结。同时熟练的

python学习开发·2020-07-13 08:59

JavaScript高级程序设计知识点汇总

前七章读书笔记详细介绍了原生JavaScript的基于ES5的全部知识点，本篇文章展示了本人绘制的后面章节内容的百度脑图，以便需要回顾知识点时能够作为一个索引，仅供参考。

tribody·2020-07-13 05:09

原生JavaScript+Css模拟Select下拉框，美化

原生JavaScript+Css模拟Select下拉框前言实现细节涉及到的技术效果展示代码展示Html结构Css结构JavaScript结构总结前言各位FEer，你们好！

前端许浩·2020-07-13 03:55

[第52期] 你不知道的Web Workers & JavaScript 变量对象详细图解 & React-native源码解析

同时，带大家一起看看，作为一个以原生JavaScript模块化为核

前端收藏家·2020-07-12 20:16

原生javaScript+jquery实现四级联动。

html代码结构：管理员品牌商代理商家json数据模式，模拟数据：{"status":"success","results":[{"guan":"管理1","index":[{"pin":"品牌商1","dataPin":[{"daili":"代理1asdas","shopData":[{"shop":["shop2","shop"]}]},{"daili":"代理2asdasd","sh

张_heng286·2020-07-12 11:29

程序员开发javascript物理引擎，他就是来炫技术的！

javascript代码，HTML/css代码在20行左右，这也是一个在HTML5/canvas画布上做的javascript物理引擎，看起来很简单，但是要思考的细节问题很多，更何况用的不是插件，而是原生

weixin_33755847·2020-07-12 07:24

jQuery程序化触发a标签点击事件

("#downloadLink").trigger('click');但是，实际测试的时候，发现没有达到想要的效果，之后查阅其他资料，发现也有遇到过这样的情况，解决方法不外乎以下几种：方法一：直接使用原生

JuneHwa·2020-07-12 01:12

$nextTick:Vue与其他操作DOM的第三方库搭配使用

Vue.js（开发版）,没有使用脚手架Vue的核心思想是数据驱动DOM，也建议我们避免直接去进行DOM操作，但是在很多业务里，避免不了去使用一些第三方的库，比如popper.js、swiper.js等，这些基于原生

ruisenLi·2020-07-11 22:42

原生JavaScript实现的简易计算器

最近一直没有写博客因为一直忙着预习考试内容什么偏微分啊、数值分析啊、计算机图形学啊、信息论…在未来一个月可能会很忙整理前端的频率可能就没那么高了还是说正题昨天晚上用JavaScript实现了一个简易的计算器今天分享给大家这个计算器长成这个样子或者可以去我的github查看没有考虑什么兼容，浏览器环境为chrome→传送门←src="https://paysontsung.github.io/web

_accelerator_·2020-07-11 14:10

document.querySelector和document.querySelectorAl

这使得在编写原生JavaScript代码时方便了许多。document.querySelector:可以包含多个CSS选择器，用逗号隔开。document.querySelectorAl:该方法返回所

SimplyHabit·2020-07-11 05:08

原生JavaScript运动功能系列（四）：多物体多值链式运动

原生JavaScript运动功能系列（一）：运动功能剖析与匀速运动实现原生JavaScript运动功能系列（二）：缓冲运动原生JavaScript运动功能系列（三）：多物体多值运动多物体多值链式运动这篇博客的内容本来是安排在上一篇博客的内容里面的

weixin_30488085·2020-07-10 06:28

原生JavaScript运动功能系列（三）：多物体多值运动

多物体同时出发运动函数实现多属性同步运动变化实现一、多物同时触发运动函数实现前面两个动画示例基本理解了动画的核心：位置变化和速度变化，操作的核心就是定时器分段叠加属性值。但是动画还是基于单个元素实现，如果将前面封装的动画实现方法同时触发我可以肯定的告诉你会有bug，我们先来写一个示例看看这个bug是什么？示例需求是有三个div同时居于浏览器左侧，当鼠标进入div时，当前div的宽度变宽，鼠标离开时

weixin_30457551·2020-07-10 06:47

十款最好的JavaScript开发框架

用原生JavaScript开发web应用？恐怕是“石乐志”。在互联网技术更迭如此迅速的时代，我们需要更好的方式来快速开发交互式Web应用程序，这就不得不提JavaScript框架了。

科技浪花·2020-07-10 06:43

用HTML5新功能制作tab选项卡

tab选项卡原生JavaScript很容易做一个Tab选项卡这里主要的是用HTML5新增的标签选择器querySelector和类名操作方法(dataset、classList等)效果如下：body部分小学初中高中大学

苏醒!·2020-07-10 00:10

代码片段

原生JavaScript实现字符串长度截取`functioncutstr(str,len){vartemp;varicount=0;varpatrn=/[^\x00-\xff]/;//匹配双字节字符(包括汉字在内

ZHU20200222·2020-07-09 12:24

八种响应式VUE动效遮罩转场动画开发

使用技术：vue、stylus、jquery、svg（核心）、javascript目前包括八种转场：时钟、百叶窗、扇形打开、十字扩展、分割、覆盖、棋盘推进、溶解核心技术栈：原生javascript、svg

我的小英短·2020-07-09 12:47

自己写的轮播图，原生JavaScript，支持移动端触摸滑动。分页器圆点可以支持mouseover鼠标移入和click点击，面向对象思路

自己用原生javascript写的轮播图，分页器按钮Click点击与mouseover鼠标悬浮导航都支持，同时支持移动端触摸滑动操作。

InterestingLife·2020-07-09 11:25

HTML5+原生javascript 卡片扑克旋转展开效果demo

HTML5+原生javascript卡片扑克旋转展开效果demo*{margin:0;padding:0;}body{background:#ccc;padding-top:100px;}button{

#麻辣小龙虾#·2020-07-09 10:58

javascript 以及 jquery DOM节点操作

DOM节点父节点：parentNode,子节点：childNodes首个子节点：firstChild末尾子节点：lastChild兄弟子节点：nextSlibling、previousSlibling原生

karenYin0828·2020-07-09 03:21

原生javascript上传文件插件封装

原生javascript上传文件插件简易封装封装函数的代码：functionuploadFile(options){//如果调用的时候没有传上传的路径，就抛出异常url为空if(!

蛙。·2020-07-08 21:12

使用JQuery实现Ajax

通过原生JavaScript实现Ajax比较复杂，并且如果服务器返回复杂结构的数据，处理起来也会比较繁琐，此外还要考虑浏览器兼容性问题，JQuery将Ajax相关的操作进行了封装，使用jQuery实现了

Oinkk·2020-07-08 20:13

angularJS(三）内置服务

1.内置服务1、$location是对原生Javascript中location对象属性和方法的封装。

露lu·2020-07-08 19:32

JavaScript模块化编程规范

然而，在ES6之前，原生JavaScript是不支持模块化的，因此就出现了一系列的JavaScript库来实现此功能，这些库主要遵循以下三种规范：①CommonJS②AMD③CMD接下来我就粗略地讲讲这三种规范

前端王睿·2020-07-08 18:41

vue.js之获取当前点击对象

vue.js之获取当前点击对象(其实是套着vue的原生javascript吧，笑?)

weixin_34268579·2020-07-08 17:57

原生JavaScript写出日历功能无引用Jq

成品显示，可左右切换月份html代码移动端日历日一二三四五六css代码*{margin:0;padding:0;}/*清除浮动代码*/.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}#calendarElement{margin:100pxauto

weixin_30877181·2020-07-08 15:49

原生JavaScript绑定事件监听器的几种方法

读《JavaScript高级程序设计》笔记，删除线的地方是对原书的校正，因为书比较旧，具体方法使用时应当再查阅一下文档。绑定事件监听器（事件处理程序）的方法有4种，第4种仅用于IE8及更低版本。1.HTML事件处理程序（行内绑定）具体实现：通过为HTML元素设置相应特性。特性名为事件监听器的名字（on+事件名），特性值为能够执行的js代码。浏览器内部会为我们绑定的事件处理程序创建一个封装着元素属性

Wenting◟(∗❛ัᴗ❛ั∗)·2020-07-08 10:42

原生JS代码100例

1、原生JavaScript实现字符串长度截取functioncutstr(str,len){vartemp;varicount=0;varpatrn=/[^\x00-\xff]/;varstrre="

IT教育-汤小洋·2020-07-08 07:18

原生javascript制作拼图游戏

实现方法//1、让所有的li（在ul里）可以拖拽//2、交换li的位置计算背景图位置//1、让所有的li（在ul里）可以拖拽//根据鼠标的位置，计算目标li的序号//根据行号和列号计算下标//行号*3+列号//2、归位此处没有背景图请自行添加css样式html,body{margin:0;padding:0;}#box{list-style:none;position:relative;width

巴啦啦小能量·2020-07-07 17:16

JavaScript对json数组的处理

JSON对象有两个方法：stringify（）和parse（）；前者把JavaScript对象序列化为JSON字符串，后者把JSON字符串解析为原生JavaScript值。

sukurax·2020-07-06 20:17

原生js实现简单的移动端轮播图效果

近期接触了移动端html5和css3，想加入些轮播图，于是在网上搜集整理了一些资料，经自己补充改进使之较为完善原生JavaScript移动端web轮播图片实现功能索引小圆点过渡滑动动画的定时轮播移动端可以滑动切换图片滑动距离不够则吸附回去效果图代码

Zyaibrs·2020-07-06 11:12

cocos2d-js 入门（主要是HTML5）

cocos2d-js是cocos2d-x的JavaScript版本，真正跨全平台的游戏引擎，采用原生JavaScript语言，可发布到包括Web平台，iOS，Android，WindowsPhone8，

weixin_34143774·2020-07-06 00:57

推荐频道

原生JavaScript