原生js增加，移除类名

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{width: 200px;height: 200px;background: yellowgreen} .page{color: red} .btn{font-size: 20px;} <…

jquery与原生JS实现增加、减小字号功能

预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib…

通过案例来剖析JQuery与原生JS

首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=…

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内和j…

原生JS动态添加和删除类

原生JS动态添加和删除类由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类添加和和删除类有三种方法首先等到一个 dom 对象(也叫dom元素), 通过document.getElement--的几种方法得到如` let element = document.getElementById("box"); 通过类名, 获取类名: el.className, 赋值: el.className =…

【面试篇】寒冬求职季之你必须要懂的原生JS(中)

互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在,很显然是不行了.本文梳理出了一些面试中有一定难度的高频原生JS问题,部分知识点可能你之前从未关注过,或者看到了,却没有仔细研究,但是它们却非常重要. 本文将以真实的面试题的形式来呈现知识点,大家在阅读时,建议不要先看我的答案,而是自己先思考一番.尽管,本文所有的答案,都是我在翻阅各种资料,思考并验…

原生 JS 实现手机验证码倒计时

可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value):在元素中添加一个或多个类名.如果值已经存在,就不添加了. contains(value): 返回布尔值,判断指定的类名是否存在. remove(value):移除元素属性列表中一个或多个类名.注意: 移除不存在的类名,不会报错. toggle(value):在元素中切换类名.如果列表中已经存在给定的…

原生js封装dom操作库

var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr, value) { if(typeof value !== "undefined") { document.documentElement[attr] = value; document.body[attr] = value; } return document.documentElem…

用原生JS实现一个轮播（包含全部代码和详细思路）

在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+css) 包含的知识有:positon定位, 最外层是一个div,它包含了所有的元素.这个轮播一共有三张图片,这三张图片包含在一个无序列表中.最外层的div还有两个用来切换上一张图片和下一张图片的子元素.这两个子元素也是div,切换上一张图片的div的id属性为pre,切换下一张图片的div的id属…

原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,…

原生JS编写getByClass、addClass、removeClass、hasClass

前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一路下来,jQuery用的比较熟练了,但是原生JS反而退步了,很久没用,有的东西都有点手生了:现在的公司用原生JS也挺好的,感觉现在很多新的技术也都基于JS原生: 做了两个项目,其中对class的DOM操作挺多的,在网上看了很多资料,在别人的基础上总结封装了几个经常用到的函数:getByClass.a…

利用原生JS实现类似浏览器查找高亮功能(转载）

利用原生JS实现类似浏览器查找高亮功能在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求在.content中有许多.box,需要在.box中找出搜索的字符串,再将无搜索结果的.box隐藏掉,此外还要将字符串高亮.这个页面用vue.js实现了数据交互,不想用jquery来实现得查找高亮功能,得用原生js来实现该功能. 原理将各个.box的文本内容提取,利用正则判断是否匹配字符串,若无搜索字符串,则隐藏该.box:否则继续找到具体的与该字符串匹…

原生js获得八种方式,事件操作

08.17自我总结关于js 一.原生js获得八种方式通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElem…

原生js日历选择器，学习js面向对象开发日历插件

在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开发的话,会严重影响项目进度.所以网上有很多日历插件提供下载使用. 在实际工作中,日历选择器功能确实都是直接使用已开发好的插件.但作为一个前端工程师,还是需要知道具体实例方法,也应该有能力完成此类功能.本实例教程详细讲解怎么样使用原生js,通过面向对象来开发一个日历选择器插件. 一般日历插件使用都非常…

原生js实现架子鼓特效

这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个数组,增加监听函数,如果按钮的其一被按下,就会播放相应的声音. <script> function removeTransition(e) { if (e.propertyName !== 'transform') return; //如果当前的元素变化的属性名称不是transform,retur…

用原生js写一个"多动症"的简历

用原生js写一个"多动症"的简历预览地址源码地址最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现思路这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果.又好像一个早已经录制好影片,而我们只是坐在放映机前观看. 原理分两个部分页面能看见的不断跳动着的增加的文字,由innerHTML控制页面的布局效果由藏在"背后的"style标签完成想象一下你要往一张网页每间隔0…

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.…

常用原生JS方法总结（兼容性写法）

经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(typ…

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF…

【CSS进阶】原生JS getComputedStyle等方法解析

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下…

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的通过以上这种方式进行事件函数的绑定有个缺点就是…

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE px;"> </…

原生js事件和jquery事件的执行顺序问题

场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦点进行一些一些逻辑操作. 思路一:改写插件,使用回调函数或初始化函数. 原来的插件并没有使用回调函数或初始化函数.可以改写插件,增加回调函数或初始化函数,视情况,在原来逻辑执行之前或之后先执行逻辑操作. 思路二:使用原生js事件. 开始的时候并没有这个思路,但是由于原生js事件函数onfocus()…

原生js dom记忆的内容

1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelectorAllgetAttributesetAttributeremoveAttribute domobj.tagNamedomobj.innerHTML innerHTML与innerText的区别.http://akunamotata.iteye.com/blog/440863domobj.idd…

移动终端学习2：触屏原生js事件及重力感应

如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增加到 51.1%:2014年中国智能手机用户已超过5亿,2018年将超过7亿) 1. 触屏手势随着大屏幕时代的到来,物理键盘逐渐退化,只剩下今天可见的 home 或 return 等少数按键.大部分的手机操控都依赖触屏完成. 现在触屏操作主要依靠电容式触摸屏传感器,可以实现多点触控.触屏手势参考如…

原生JS面向对象思想封装轮播图组件

原生JS面向对象思想封装轮播图组件在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须…

原生JS实现幻灯片轮播效果

在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <div id="box"> <ul class="list"> <li><img src="01.jpg" width="490" height="170" /><…

扩展原生js的一些方法

扩展原生js的Array类 Array.prototype.add = function(item){ this.push(item); } Array.prototype.addRange = function(items){ var length = items.length; if(length!=0){ for (var index = 0; index < length; index++) { this.push(items[index]); } } } Array.prototype…

原生JS与jQuery文档加载完毕的写法

HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的时候才去执行js代码,所以通常我们会这样做: 一.当不引入jQuery框架,只写原生JS代码时,需要用window对象的onload事件 window.onload = function(){ //要执行的js代码段 } (注:在使用时,window.onload可直接简写成onload,但是为了不…

原生js和jquery实现图片轮播特效

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…