原生JS正则实现trim()

Jquery中封装有trim() 原生需要自己实现,我们可以用原型的方式自己封装trim()方法,实现去掉前后空格.前空格.后空格...所以不必抱怨,简单又灵活,这才是强大的JS的特色 String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } String.prototype.ltrim=function(){ return this.replace(/(^\s*)/g,"&q…

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

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

原生js的常用方法总结

=============== 通知: 博主已迁至<掘金>码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a86b 请多多关照!! -------------------在此谢过!----------- 前言:随着前端市场日新月异的发展,现如今的市场要的不只是会切切图的小仔.小妹了,而是需要真正懂原生js闭包,继承,原型链,node,以及熟读源码的大神,那么我们也不能太落后各位大神,撸起袖子,重新拾起原生js吧!…

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

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

js正则匹配的一个日常应用

应用实例 1 /** 将段落中的 \n 转换为 <p></p>, 规范存储 */ 2 function formatParagraphForStore(val) { 3 var formatText = ""; 4 var list = val.split('\n'); 5 if (list.length == 0) { 6 return val; 7 } 8 for (var i = 0; i < list.length; i++) { 9 format…

js 小工具-- 原生 js 去除空格

// 原生js 去除字符串空格 <script type="text/javascript"> String.prototype.trim = function (){ var reg = /^\s*(.*?)\s+$/; return this.replace(reg,"$1"); } </script>…

扩展原生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的功能

原生选择器充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <li class="lione">2222</li> <li class="lione">3333</li> </ul> </div> <div id="box2"> <…

原生JS插件（超详细）

作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦.以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了.不过,也从侧面说明了原生js在前端中占着多么重要的一面.好了.废话不多说.咱们就来看一下怎么去做一个自己的js插件吧. 插件的需求我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下…

AJAX初识(原生JS版AJAX和Jquery版AJAX)

一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的文本数据交换格式 JSON具有自我描述性,更易理解 JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台.JSON解析器和JSON库支持许多不同的编程语言. 2. Python中JSON操作 import json 1. json.dumps() --> 序列化 /j…

前后端数据交互处理基于原生JS模板引擎开发

json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那里断点,观察是否有错误. <!DOCTYPE html> <html> <head> <title>前后端数据交互处理原生JS模板引擎开发</title> <meta charset ='utf-8'> <script type=&…

原生JS实现弹幕效果

纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道. 每一个通道是从左到右的一条,高度固定,这样不同通道的弹幕不会相互覆盖. 弹幕滑动就是简单设置CSS属性 transition 实现.开始使用 left 改变弹幕的位置,后来改为 transform ,性能确实提高很多. 设置10条弹幕通道,每个通道有一个DOM池,每一次发射弹幕就从DOM池中拿…

抛开jQuery，拾起原生JS的DOM操作

常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. 删除DOM 5. 添加class 6. 是否存在class 7. 删除class 8. 实现 JQ 的toggleClass 9. 获取DOM的css样式 10. 给DOM设置css样式 11. 删除DOM的css样样式 12. DOM的查找(遍历),例如查找父级,子级,兄弟等节点 13. 获取DO…

原生js格式化json工具

json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js格式化json的方法</title> <script> //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好 var formatJson = function (json)…

原生js实现类的添加和删除,以及对数据的add和update、view ，ajax请求，页面离开的操作

1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var allClass = element.className.trim().split(" "); return allClass.indexOf(cla) > -1; } function addClass(cla,element){ if(!hasClass(cla,element)…

原生JS 基础总结

0. 好习惯分号 ; 花括号 {}, var 弄清楚 null , undefined 区别 , isNaN, === 与 == 区别 1. prompt , confirm , alert 不同框框数组常用方法 var arr = [10, 20, '30', 'xyz']; arr.indexOf(10); // 元素10的索引为0 arr.indexOf(20); // 元素20的索引为1 arr.indexOf(30); // 元素30没有找到,返回-1 arr.indexOf('3…

放弃jQuery，使用原生js吧！

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx…

原生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实现ajax的文件异步提交功能、图片预览功能.实例

采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> <head> <title>Title</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.m…

正则表达式控制Input输入内容 ,js正则验证方法大全

https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.currentTarget.value.replace(/[^\u4E00-\u9FA5+]/ig,'') //身份证正则校验 let reg = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8…

Js正则Replace方法

JS正则的创建有两种方式: new RegExp() 和直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\s+)|(\s+$)","g"); //使用直接字面量创建 var regStr = /(^\s+)|(\s+$)/g; 其中 g 表示全文匹配,与之相关的还有 i 和m,i 表示匹配时忽略大小写,m 表示多行匹配,如果多个条件同时使用时,则写成:gmi 二.().[].{} 的区别 () 的作用是提取匹配的字…

原生js替换jQuery各种方法-中文版

原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器.…

面试奇遇 -- 原生JS

最近几日去参加一些面试,多多少少有一些收获. 现将遇到的一些面试题,做一下分析和总结. 1.使用原生JS,不能使用递归,查找dom中所有以“<com-”开头的自定义标签tagName. <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="w…

ToDoList(原生JS)了解一下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ToDoList—最简单的待办事项列表</title> <link rel="shortcut icon" href="../img/panda.ico"> <link rel="style…

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

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

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

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

原生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…

原生JS实现"旋转木马"效果的图片轮播插件

一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果由于自己的服务器还没弄好.在线演…

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

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