JavaScript
Lsx~
快乐才是真谛。
展开
-
前端js-----vue中的key
在官方文档中是这样解释的:key的特殊属性主要用在vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不能使用key,Vue会使用一种最大 限度减少动态元素并且尽可能的尝试就地修改或修复相同类型元素的算法。而且使用key时,它会基于key的变化重新排列元素顺序,并且会移出或销毁key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。最常见的是结合v-for。它也可以用于强制替换元素或组件而不是重复使用它。当遇到(1)完整的触发组件的生命周期钩子(2)触发过度。原创 2021-02-02 11:21:13 · 561 阅读 · 0 评论 -
前端js-----轮播图(焦点图)实现原理
轮播,无论是文字轮播还是图片轮播,他们的原理都是一样的,都是通过定时器setInterval执行循环展示和隐藏。原理:一系列的图片平铺,一般是放在li里面,只显示一张图片,其余图片隐藏over-follow:hidden。通过计算偏移量利用定时器实现自动播放,或通过点击事件切换图片。无缝滚动(优化):当你从最后一张图片切换回第一张图时,有很大空白,这个时候需要把第一张图片所在li克隆一份放到ul的最后面,当图片滚动到克隆的最后的一张图片时,让ul快速的、不做动画的跳到最左侧,让left=0即可。原创 2021-02-01 19:40:18 · 2241 阅读 · 1 评论 -
前端js-----三级联动
效果如下(原生js):------HTML:<body> 请选择省份 <select name="" id="province"> <option value="请选择省份">请选择省份</option> </select> 请选择市 <select name="" id="cities"> <option value="请选择市">请选择市</option> </原创 2021-01-17 10:19:09 · 714 阅读 · 1 评论 -
前端js-----模糊搜索(indexOf)
效果:原生js实现代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { overflow: hidden; width: 400px; h原创 2021-01-16 10:51:53 · 732 阅读 · 0 评论 -
JS中的数组,对象,字符串常用的方法
JS中的数组,对象,字符串常用的方法数组的常用方法:var arr =[1,2,3,4,5];arr[0] arr[arr.length-1]//通过下标找到数组中指定的元素,访问数组的元素arr.join("-") //数组转成字符串arr.toString() //数组转成字符串arr.push(6); //向后添加,返回新数组个数 ,原数组是添加后的数组arr.pop(); //从后删除,返回删除的元素arr.unshift(); //向前添加,返回个数arr.shift(); //转载 2021-01-14 21:55:48 · 220 阅读 · 0 评论 -
前端js-----抽奖功能(异步)
效果如下:代码如下:HTML:<body> <div id="father"> <div class="option">抱抱</div> <div class="option">亲亲</div> <div class="option">举高高</div> <div class="option">按摩</div> <div id="start"原创 2021-01-12 09:52:05 · 340 阅读 · 0 评论 -
前端js-----选项卡/tab栏(面向对象)
功能效果如下:实现代码:HTML:<!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-Compatible" content="ie=edge"> &原创 2021-01-11 10:22:32 · 535 阅读 · 1 评论 -
前端js-----购物车全功能(jQuery)
效果图:HTML&&CSS:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src原创 2021-01-08 14:22:47 · 616 阅读 · 1 评论 -
前端js-----手风琴(jQuery)
运用jQuery效果(功能如下):代码(链式编程):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script原创 2021-01-08 09:24:51 · 182 阅读 · 0 评论 -
前端js-----购物车加减事件(全选和全不选)
原生js(效果图如下):代码(html、css、js没有分离):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .tab{ width: 500px; height原创 2021-01-06 11:58:50 · 663 阅读 · 0 评论 -
前端js-----动态生成表格(节点操作)
针对DOM节点操作,该案例效果图如下(代码量不多,就没有结构与行为相分离):原生js实现(注释里面解释了做法):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { width: 500px; margin: 100px auto;原创 2021-01-05 09:36:56 · 848 阅读 · 0 评论 -
前端js-----DOM事件高级(阻止默认行为&&事件冒泡)
有时候我们不需要一些默认行为,这时我们需要阻止默认行为:代码如下a.onclick = function(e){//e.preventDefault();//适用普通浏览器//e.returnValue;//ie 6 , 7, 8return false;//无兼容,(仅限于传统注册方式,但return后面的代码将不会执行;但是在二级事件中没用)}!!!阻止冒泡(事件)(1)e.stopPropagation();(2)e.cancelBubble = true; // ie 6,7,8原创 2021-01-03 11:16:55 · 457 阅读 · 0 评论 -
前端js-----DOM事件高级
事件高级:注册事件有两种方式,第一个是传统方式;第二个是方法监听注册的方式。addEventListener(); 特点为:同一个元素同一个事件可以注册多个监听器。其参数有三个,第一个参数为type:事件类型字符串,不带on;第二参数为listener:事件处理函数,当事件发生时会调用该监听函数;第三个参数为useCapture:这是个可选参数,是一个布尔值,默认为false,与事件流相关。DOM事件流:(1)JS代码中只能执行捕获阶段或冒泡阶段中的一个阶段。(2)onclick和attach原创 2021-01-02 10:56:52 · 120 阅读 · 0 评论 -
前端js-----DOM之节点操作(增删改)
1.创建节点:document.createElement(‘tagName’);2.添加节点:node.appendChild(child);将一个节点添加到指定父节点的子节点列表末尾,其中node为父元素。 node.insertBefore(child,指定元素);将一个节点添加到父节点的指定子节点前面。3.删除节点:node.removeChild(child);返回的是删除的节点。4.复制(克隆)节点:node.cloneNode();返回调用该方法的节点的一个副本(拷贝节点),如果参数为空原创 2021-01-01 09:17:09 · 309 阅读 · 0 评论 -
前端js-----DOM之节点操作
在节点操作中,可以利用几点层次关系获取元素(父子兄节点关系)。一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性。其中元素节点的nodeType为1;属性节点的nodeType为2;文本节点是nodeType为3.1.父级节点(node.parentNode):得到的是离父级最近父级节点,如果找不到父节点,则返回null。2.子节点(parentNode.childNodes):返回包含指定节点的子节点的集合(会包含元素节点,文本节原创 2020-12-27 10:13:33 · 128 阅读 · 2 评论 -
前端-----轮播图(焦点图)
原生js!!!只需要改变img的src即可,其他功能都是动态生成的!!!功能展示: HTML:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/focus.css"/> <!-- 这个动画必须写到focus原创 2020-12-25 19:41:22 · 641 阅读 · 0 评论 -
前端js-----DOM之操作元素
DOM就是Document Object ModelDOM树:文档、元素(所有标签)、节点(标签、属性、文本、注释等)dir的作用,可返回元素对象,更好的查看里面的属性事件三要素:1.事件源 2.事件类型 3.事件处理程序DOM之操作元素:1.表单元素操作2.样式属性操作element.style;在js中产生的是行内样式element.className;类名样式操作(适用于样式较多,功能复杂的情况),如果想要保留原先的类名,可以用多类名选择器,即this.className = ‘fir原创 2020-12-24 10:54:41 · 128 阅读 · 0 评论 -
前端js-----基础(8)
js内置对象:数组对象1.数组索引方法indexOf(数组元素);其返回值为该数组元素的下标,若数组元素重复,他返回第一个满足条件的索引号。若在该数组中找不到此数组元素,则返回-1。可以指定第二个参数,指定开始查找的位置。lastIndexOf(数组元素);这个方法与indexOf()类似,只不过它是从后往前查。2.数组转换为字符串:(1)toString();(2)join(‘分隔符’);其默认为逗号分隔。3.slice()方法;提取出指定数组元素,arr.slice(start,end原创 2020-12-21 16:44:45 · 93 阅读 · 0 评论 -
前端js-----基础(7)
js内置对象:数组对象1、检测是否为数组,instanceof,例:arr instanceof Array2、检测是否为数组,Array.isArray(参数);返回true或false,ie9+3、添加删除数组元素:(1)push();在数组的末尾添加一个或多个数组元素。arr.push(数组元素),push完毕之后,返回的结果是新数组的长度,原数组也会发生变化。(2)unshift();在数组的开头添加一个或多个数组元素。arr.unshift(数组元素);unshift完毕之后,返回的原创 2020-12-19 18:13:25 · 87 阅读 · 1 评论 -
前端js-----基础(6)
js内置对象:日期对象,Date对象获得Date总的毫秒数(时间戳),不是当前的毫秒数,而是距离1970年1月1日过了多少毫秒(1)通过valueOf()或者getTime()获得当前毫秒数var date = new Date();console.log(date.valueOf());console.log(date.getTime());(2)简单的写法 (最常用)记住var date1 = +new Date();console.log(date1);(3)H5新增,获得总的毫秒原创 2020-12-15 18:06:06 · 154 阅读 · 0 评论 -
前端js-----基础(5)
js中的对象分为三种:自定义对象,内置对象,浏览器对象内置对象:Math对象(1)Math.abs;求绝对值,例如Math.abs(’-1’);会返回1,存在隐式转换。 Math.abs(‘abc’);会返回NaN,这个的话就不存在隐式转换了(2)Math.floor();向下取整,往最小了取值。例如:Math.floor(1.9);会返回1(3)Math.ceil();向上取整,往最大值取。例如:Math.ceil(1.1);会返回2(4)Math.round();四舍五入取整,(但是.5特殊.原创 2020-12-14 17:02:43 · 82 阅读 · 0 评论 -
前端js-----基础(4)
js对象(万物皆对象,对象是一个具体的事物,不能泛指) 在js中,对象是一组无序的相关属性和方法的集合。 属性:事物的特征(是一个名词)方法:事物的行为(是一个动词)创建对象的三种方式:(1)用字面量创建var obj = {name:‘张三’,age:18,say:function(){console.log(123);}}注意:大括号里面要用逗号隔开,方法冒号后面跟的是一个匿名函数(2)利用new Object创建对象var obj = new Object();obj.n.原创 2020-12-13 23:00:29 · 65 阅读 · 0 评论 -
前端js-----基础(3)
1. js作用域(就是代码名字在某个范围内起作用和效果,提高程序的可靠性,减少命名冲突) (1)全局作用域 (2)局部作用域(函数内部)a.全局变量(全局作用域下的变量) b.局部变量(局部作用域下的变量)!!!注意:如果在函数内部,没有声明直接赋值的变量也属于全局变量。函数的形参也可以看做局部变量。2. 预解析(js引擎会把js里面的所有var,function提升到当前作用域的最前面) 运行js代码分两步:预解析,代码执行 预解析分为:变量预解析(预解析)和函数预解析(函数提升)(1)变量提升:原创 2020-12-12 10:40:32 · 99 阅读 · 0 评论 -
前端JS-----冒泡排序(函数封装)
< 冒泡排序:趟数=数组.length-1,之后两两比较。设flag变量是为了(当该数组有序时,就不必再冒泡排序了) >var arr = [3, 4, 5, 43, 2, 56, 7]; function bubbleSort(arr, count) { var count; for (var i = 0; i < arr.length; i++) { var flag = 1; for (var j = 0; j <= arr.length -原创 2020-12-03 13:14:00 · 572 阅读 · 0 评论