原生js
原生js
小白彡不白
这个作者很懒,什么都没留下…
展开
-
原生js实现无缝轮播图
这里使用匀速动画方法实现轮播图效果animate.js部分// 匀速动画方法function Animation(ele, target) { // 先清除动画 clearInterval(ele.tid); // 获取当前位置 var currentLeft = ele.offsetLeft; // 判断左移右移 var isLeft = (...原创 2020-04-12 14:12:36 · 228 阅读 · 0 评论 -
原生js实现简单动画效果
使用原生js实现简单动画效果实现动画效果可以用jQuery提供的animate方法,或一些插件来实现,但是随着前端组件化开发的流行,jQuery大量的DOM操作已经显得十分多余,正在逐渐从前端技术栈中被淘汰,下面我们使用原生js实现简单的匀速动画效果和缓动效果匀速动画实现水平移动css样式<style> #box { width: 10...原创 2020-04-12 13:48:04 · 1850 阅读 · 0 评论 -
js深拷贝与浅拷贝
浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用 var obj = { id: 1, name: "andy", msg:{ age:18 } } var o = {}; for (var k in obj) { ...原创 2020-04-12 13:06:47 · 130 阅读 · 0 评论 -
js中的事件委托
事件委托事件委托也称事件代理,在jQuery中称为事件委派原理:在元素父节点上设置事件监听,利用冒泡原理影响设置的每一个子节点,利用事件对象的target来找到要触发事件的子节点事件委托作用:在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的...原创 2020-03-23 13:12:03 · 143 阅读 · 0 评论 -
js中的BOM操作(二)
四、navigator对象window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。Navigator 对象的属性1、Navigator.userAgentnavigator.userAgent属性返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息。下面是 Chrome 浏览器的userAgent...原创 2020-03-22 14:24:21 · 160 阅读 · 0 评论 -
js中的BOM操作(一)
JavaScript中的BOM操作BOM:浏览器对象模型(Browser Object Model,简称 BOM)提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作一、Window对象浏览器窗口特点1.对于全局变量或全局方法,在取值或调用时可以省略var a = 10;console.log(a); //10consol...原创 2020-03-22 14:23:40 · 333 阅读 · 0 评论 -
js操作元素属性
js元素属性:行内标准样式行内自定义属性行外样式js动态添加的属性点语法获取元素属性1.可以获取标准属性(主要)2.可以获取点语法动态添加的属性3.无法获取行内自定义属性4.无法获取行外属性//style属性是一个对象 存储的是元素的样式console.log(box.style); //color属性在行外样式表中定义console.log(box.style.co...原创 2020-03-15 14:00:15 · 615 阅读 · 1 评论 -
js中的节点操作
节点概述网页中所有的内容都是节点(标签,属性,文本,注释等)每一个节点都有nodeType属性,nodeName属性和nodeValue属性常用的节点 元素节点 nodeType: 1 nodeName: 大写的标签名 nodeValue: null 属性节点 no...原创 2020-03-15 13:43:09 · 225 阅读 · 0 评论 -
js中的事件冒泡和事件捕获
事件传播的机制(冒泡和捕获) 事件冒泡和事件捕获的区别事件捕获(event capturing):当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。事件冒泡可...原创 2020-05-16 21:53:03 · 188 阅读 · 0 评论 -
js中this指向问题
函数执行的三种方式中this指向这些this指向,是当我们调用函数时确定的,调用方式的不同决定了this的指向不同一般this指向调用者1.调用普通函数作为普通函数调用时this指向全局对象window function fun(){ console.log(this); //window } fun(); // window...原创 2020-05-16 21:54:36 · 119 阅读 · 0 评论 -
js中的作用域和闭包
js中的作用域作用域是变量和函数能起作用的范围,在 ES6之前只有全局作用域和局部作用域全局作用域:变量和函数在整个script内都能调用 var a = 10; function fn(){ console.log(a); } fn();//10局部作用域:作用于函数内部,函数外部不能调用 function ...原创 2020-05-16 21:54:21 · 83 阅读 · 0 评论 -
js中== 和 != 的转换规则
== 和 != 基本转换规则1.如果有一个操作数是布尔型,在比较相等性之前先转换数值 false–0 true–12.如果有一个操作数是字符串,另一个为数值,在比较相等性之前先将字符串转换数值 不为数值NaN3.如果有一个数为对象,另一个不是,则先调用对象的valueOf()方法,得到基本数据类型值按照之前规则比较这两个操作符在进行比较时要遵循以下规则1.null == unde...原创 2020-05-16 21:54:09 · 623 阅读 · 0 评论 -
js对象
对象的概念js中的对象是一种无序属性的集合,属性由键值对构成对象的创建1.对象字面量var obj = { name : "小张", age : 18, work : function(){ console.log("程序员"); } }2.构...原创 2020-05-16 21:53:52 · 117 阅读 · 0 评论 -
js中的继承
继承(es6之前的继承,es6继承之后补充)1.使用构造函数来实现继承// 实现方式 : 使用call等方法 使一个对象的this指向另一个对象 从而让其拥有这个对象的属性和方法function Parent(name, age) { this.name = name; this.age = age; this.work = function () { console.log("挣钱养家"); }}function Child(name, age)原创 2020-07-05 15:30:39 · 135 阅读 · 0 评论 -
js中原型,原型链
原型 prototype1.每一个构造函数被创建,系统都会自动创建一个与构造函数相对应的prototype对象,这个对象叫做原型2.访问原型的对象方法 构造函数.prototype3.构造函数的原型是一个对象 可以添加属性和方法4.往原型中添加的方法该构造函数实例化的对象可以访问function Person(name,age){ this.name = name; this.age = age;}Person.prototype.sayHi = function(){原创 2020-07-05 15:23:46 · 184 阅读 · 0 评论 -
js数据类型转换
说到数据类型转换就要先了解都有哪些数据类型JS基本类型(值类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol(Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。)typeof 返回值只有六种null 是特殊的对象//number boolean undefined strin...原创 2020-03-15 13:40:05 · 139 阅读 · 0 评论