httpkaidi-CSDN博客

原创记录一下谷歌浏览器翻译失败的问题

3.保存文件,如果不能保存就先放到桌面新建txt文件,然后复制旧hosts内容，最后把txt文件放到etc下面,修改名称hosts。1.找到C:\Windows\System32\drivers\etc下面的hosts文件。打开控制台（win+R），输入ipconfig /flushdns 刷新DNS。5.重启谷歌浏览器。如果不行就断一下网再继续连接。

2022-09-29 01:54:26 306 1

原创使用vue-element-admin初始化依赖出错问题

问题所在就是node版本太高，需要降低版本1.安装nvm(2条消息) windows中如何将已安装的nodejs高版本降级为低版本_Spring_z7的博客-CSDN博客_nodejs降低版s具体教程在上面链接

2022-04-05 23:26:13 1011

jQuery其他方法jQuery对象拷贝想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend()方法语法：$.extend([deep],target,object1,[objectN]1.[deep]：如果设置为true 则是深拷贝，默认为false 浅拷贝2.target：要拷贝的目标对象3.object1：待被拷贝的第一个对象（就是把这个拷贝给target,不止一个）4.[objectN]：待拷贝到第N个对象的对象5.浅拷贝是把被拷贝的对象复杂数据类型中的地址

2021-12-08 00:12:53 124

原创 jQuery事件-on () 方法/off()方法/ triggle()/事件对象

jQuery事件jQuery事件注册单个事件注册element.事件(function(){.....})事件绑定 on () 方法在匹配元素上绑定一个或多个事件的事件处理函数语法：element.on(events,[selector],fn)events:一个或多个用空格分割的事件类型，比如click 或 keydown[selector]:元素的子元素选择器fn:回调函数，即绑定在元素身上的侦听函数（1）on ( ) 实现多个事件注册： // 1. on ( ) 实现多个.

2021-12-07 23:49:48 209

原创 jQuery内容文本值/元素操作

jQuery内容文本值主要针对元素的内容和表单的值操作普通元素内容 html() (相当于原生innerHTML) (1) 获取元素设置内容 html() 连着标签一起显示 (2) 获取设置元素文本内容 text() 只得到文本 (3) 获取设置表单值 val() $(function() { //获取元素设置内容 html() 连着标签一起显示 console.log($("div").html()); $("div").htm

2021-12-07 21:12:14 237

原创 jQuery属性操作-prop()/attr()/data()

jQuery属性操作设置或获取元素固有属性值 prop()元素固有属性值就是元素本身自带的属性，比如<a>元素里面的 href ，比如<input>里面的 typeprop("属性")prop("属性","属性值")修改/获取自定义属性attr()（类似于原生js里面的getAttribute/setAttribute)数据缓存data() data方法可以在指定的元素上存储数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将移除 .

2021-12-07 19:59:51 174

原创 jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例

jQuery效果自定义动画效果animateanimate([params,[speed],[easing],[fn])（1）params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号，如果是复合属性则需要采取驼峰命名法 borderLeft ,其余参数都可以省略（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"（4

2021-12-07 19:27:36 199

原创 jQuery效果-显示与隐藏效果/滑动效果 / 高亮显示案例

jQuery效果显示与隐藏效果显示语法规范：show([speed,[easing],[fn])显示参数（1)参数都可以省略，无动画直接显示（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"（4）fn : 回调函数，再动画完成时执行的函数，每元素执行一次( 其他效果可查看jquery 的 API）<body&gt.

2021-12-07 00:50:37 234

原创 jQuery的排他思想 /案例：淘宝服饰精品案例分析

jQuery的排他思想想要多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式案例：点击的按钮变色 <script src="jquery.min.js"></script></head><body> <button>选择</button> <button>选择</button> <button>选择</button> <b

2021-12-06 23:54:00 170

原创 jQuery基础语法-选择器/设置样式/筛选方法

jQuery基础语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。美元符号定义 jQuery，jQuery基础选择器原生js获取元素的方式有很多，很杂，jQuery做了封装，使元素统一标准$("选择器"） //里面选择器直接写CSS选择器即可，但是要加引号<body> <div>我是div</div> <div class="nav">我是nav div</div> <.

2021-12-06 17:51:02 482

原创 jQuery概述/DOM对象和jQuery对象

jQuery概述javascript库，即library，是一个封装好的特定的集合（方法和函数），就是在这个库里面。封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素简单理解，就是一个js文件，里面对原生js进行了封装，存放到里面，这样我们可以快速高效地使用这些封装好了的功能。直接调用就好了。比如 jQuery，就是为了快速方便地操作DOM，里面基本都是函数（方法）。里面都是用原生js实现的。常见js库：jQuery、prototype、YUI、Dojo

2021-12-06 00:21:53 109

原创本地存储 sessionStorage / localStorage 使用及区别

本地存储特性：1.数据存储在用户浏览器中2.设置、读取方便，甚至页面刷新不丢失数据2.容量较大，sessionStorage 约5M，localStorage约20M3.只能存储字符串，可以将对象JSON.stringify（）编码后存储window.sessionStorage:1.生命周期为关闭浏览器窗口2.在同一个窗口（页面）下数据可以共享3.以键值对的形式存储使用存储数据：sessionStorage.setItem(key,value);获得数据：sessionStorag

2021-12-05 23:56:36 220

原创移动端常用开发插件

移动端常用开发插件Swiper 插件（轮播图插件）Swiper中文网-轮播图幻灯片js插件,H5页面前端开发首先下载 Swiper 插件压缩包解压缩找到文件夹里面的 demo 文件夹从里面众多的html 文件里选取想要的样式，打开后右键点击页面，选择查看源码从源码里查看需要引入的相关文件，例：<link rel="stylesheet" href="../package/swiper-bundle.min.css"> 根据路径在文件夹里查找然后引入创建

2021-12-05 18:02:28 345

原创移动端返回顶部功能

移动端返回顶部功能：滚动到某个地方显示事件 scroll 页面滚动事件代码：<style> * { height: 800px; } .nav { height: 200px; background-color: aquamarine; } .icon { display: none; float: right; width:

2021-12-05 18:00:11 489

原创案例：移动端轮播图 / classList

移动端常见特效案例：移动端轮播图功能基本和pc端一致可以自动播放图片手指可以拖动播放轮播图自动播放功能开启定时器移动端移动，可以使用translate 移动可以添加过渡效果无缝滚动判断条件是：等到图片滚动完毕再去判断，就是过渡完成后判断此时需要添加过渡完成事件 transitionend判断条件：如果索引号为 3 （图片是3张，但实际添加的是5张详情见代码），说明走到最后一张，此时索引号要复原为0此时图片去除过渡效果，然后移动如果索引号小于0 ，说明是倒着走，索引号等于2

2021-12-05 14:17:15 172

原创移动端开发-触摸事件

移动端网页布局移动端浏览器兼容性较好，不需要考虑兼容性问题。触屏事件触屏touch事件说明touchstart 手指触摸到一个DOM元素时触发touchmove 手指再一个DOM元素上滑动时触发touchend 手指从一个DOM上移开时触发触摸事件对象TouchEvent触摸列表说明touches 正在触摸屏幕的所有的手指列表targetTouches 正在触摸当前元素DOM 元素的手指列表changedTouches 手指状态...

2021-12-04 15:05:41 173

原创案例：筋斗云动画效果

筋斗云动画效果利用动画函数做动画效果原先筋斗云起始位置为0 鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可鼠标离开某个li ，就把目标值设为0 如果点击了某个li ,就把 li 当前的位置存储起来，作为筋斗云的起始位置 <style> * { padding: 0; margin: 0; } li, a { text-decoration: none

2021-12-04 14:34:51 185

原创案例：带有动画效果的返回顶部

2021-12-04 13:37:50 233

原创案例：网页轮播图

案例：网页轮播图也称为焦点图功能需求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮点击右侧按钮一次，图片往左播放一次，依此类推，左按钮同理图片播放的同时，下面小圆圈模块跟随一起变化点击小圆圈，可以播放相应图片鼠标不经过轮播图，轮播图也会自动播放鼠标经过轮播图模块，自动播放停止其中模块：动态生成小圆圈：核心思路：小圆圈的个数要和图片张数一致首先得到ul里面图片的数量，（图片放入li里面，所以是li的个数）利用循环动态生成小圆圈（这个小圆圈要放入ol里面）创建节点 creat

2021-12-04 13:09:14 273

原创动画案例：滑动块

动画案例：滑动块案例效果：鼠标经过就将盒子滑动到右侧，同时外盒子内容箭头指向变化鼠标离开就将盒子滑动到左侧，同时外盒子内容箭头指向变化回来思路：动画封装函数，回调函数 <style> .sliderbar { position: relative; float: right; margin-top: 100px; height: 40px; width: 60px; ba

2021-12-03 17:04:27 160

原创动画函数的实现、封装、回调函数

动画函数封装动画实现原理：核心原理：通过定时器 setInterval（）不断移动盒子实现步骤：获得盒子的当前位置让盒子在当前位置加上一个移动距离利用定时器不断重复这个操作加一个结束定时的条件注意此元素需要添加定位，才可以使用element.style.left <style> div { position: absolute; width: 100px; height: 100px;

2021-12-03 15:46:59 157

原创元素可视区 client 系列 / 元素scroll系列 /案例：仿淘宝固定右侧侧边栏

元素可视区 client 系列client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息，通过client的相关属性可以动态获得该元素的边框、大小等。client 系列属性作用element.clientTop 返回元素上边框的大小element.clientLeft 返回元素左边框的大小element.clientWidth 返回自身包括padding、内容区的宽度、不含边框，返回数值不带单位。element.clientHeigh...

2021-12-03 13:53:59 100

原创立即执行函数 pageshow

立即执行函数立即执行函数：不需要调用，立马能够自己执行的函数写法：第一种:(function(){})()第二种:(function(){}() ) //第一种，较为常用 //(function () {})() (function () { console.log(2); //不需要调用，立马打印2 第二个函数可以看作是调用函数 })(); (function (a,b) { co

2021-12-03 12:47:37 314

原创案例：仿京东放大镜效果

案例：仿京东放大镜效果功能需求：分为三个模块鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子功能黄色的遮挡层跟随着鼠标移动移动黄色遮挡层，大图片跟随着移动大图片移动距离=（遮挡层移动距离*大图片最大移动距离）/ 遮挡层最大移动距离 <style> body, div { margin: 0; padding: 0; } .product { positi

2021-12-03 12:36:33 144

原创案例：模态框拖拽

案例：模态框拖拽功能需求：点出弹出层，会弹出模块框，并且显示灰色半透明的遮挡层点击关闭按钮，可以关闭模态框，同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层，可以按住鼠标拖拽模块框在页面中移动鼠标松开，可以停止拖动模态框移动思路：点击弹出层，模态框和遮挡层就会显示出来 display : block点击关闭按钮，模态框和遮挡层就会隐藏起来 display : none在页面中拖拽的原理：鼠标按下并移动，之后松开鼠标触发事件是鼠标按下mousedown 鼠标移动mouseover 鼠标松

2021-12-03 01:16:46 115

原创事件委托（代理）/ 鼠标事件对象/ 键盘事件 /案例：跟随鼠标移动的图片/案例：模拟京东按键输入内容

事件委托也称为事件代理，在jQuery里称为事件委派是事件冒泡带来的好处原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点提高了程序的性能例： <body> <ul> <li>点击</li> <li>点击</li> <li>点击</li> <li>点击</l

2021-12-02 15:42:00 112

原创事件对象/事件对象兼容性处理/事件对象常用属性和方法

事件对象event 就是一个事件对象写到我们侦听函数的小括号里当作形参事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，比如鼠标坐标等，如果是键盘事件里面就包含的键盘事件的信息，比如：用户按下了哪个键事件对象可以自己命名，一般用event存在兼容性问题， ie678 可以通过 window.event 兼容性的写法;<script> va.

2021-12-02 15:05:57 138

原创 DOM事件流/冒泡阶段，捕获阶段

DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流DOM事件分为三个阶段：捕获阶段当前目标阶段冒泡阶段注意：JS代码中只能执行捕获或者冒泡其中的一个阶段onclick 和 attachEvent(ie) 只能得到冒泡阶段捕获阶段：如果addEventListener 的第三个参数为true 则为捕获阶段，参数为false或者省略则为冒泡阶段实际开发中很少使用事件捕获，我们更关注事件冒泡有些事件是没有冒泡的

2021-12-02 14:55:39 112

原创删除事件（解绑事件）/ 删除事件兼容性解决方案

删除事件（解绑事件）传统注册方式：element.onclick = 'null' removeEventListener删除事件 attachEvent删除事件 <body> <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll("div")

2021-12-02 14:41:44 112

原创注册事件(事件处理）

注册事件给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式、方法监听注册方式传统注册方式利用on开头的事件 onclick<button onclick = "alert('hi~')" ></button>btn.onclick = function () { }特点：注册事件的唯一性：同一个元素同一个事件只能设置一个函数，最后注册的处理函数会覆盖前面的处理函数方法监听注册事件W3C标准推荐方式addEventListener（）它是一

2021-12-02 14:22:23 582

原创节点操作：三种动态创建元素的区别

三种动态创建元素的区别document.write() (不常用）直接将内容写入页面的内容流，但如果文档流加载完毕，再调用这句话，会导致整个页面全部重绘（即以前所写内容消失）element.innerHtml将内容写入某个DOM节点，不会导致页面重绘此方法创建多个元素的效率会更高一些（不要拼接字符串，采取数组形式拼接），结构稍微复杂document.creatElement（）此方法创建多个元素效率稍微低一些，但结构清晰————————————————版权声明：本文为CSDN博主「杨蛋蛋~

2021-12-02 14:11:57 57

原创节点操作（删除，复制）/案例1：删除留言板的留言 /案例2：动态生成表格

节点删除node.removeChild(child)从DOM中删除一个子节点，返回删除的节点 <body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> var bt.

2021-12-02 13:52:25 119

原创节点操作（增加） /案例：下拉菜单/案例：简单版发布留言

节点操作因为利用DOM提供的方法获取元素逻辑性不强且非常繁琐因此学习利用节点层级关系获取元素：利用父子兄的关系获取元素逻辑性强，但兼容性差节点：页面中所有的内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用node来获取HTML DOM树中的所有节点都可以通过JS来访问，所有HTML元素都可以被修改，也可以创建或者删除节点至少有：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性元素节点 nodeType 为 1属性节点

2021-12-02 12:38:13 219

原创自定义属性操作/案例:自定义tab栏切换/HTMl5自定义属性

自定义属性操作 <div id = 'demo'> </div> <script> var div = document.querySelector("div"); //1.获取元素的属性值 //（1）element.属性 console.log(div.id); //(2)element.getAttribute('属性') console.log(div.getAttribut

2021-12-02 11:28:03 202

原创案例：表格鼠标经过变色 / 全选反选

案例一：表格鼠标经过变色案例：用到鼠标事件：鼠标经过 onmouseover 鼠标离开 onmouseout思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色//注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行<style> table { width: 800px; margin: 100px auto; text-align: center; bord

2021-12-02 01:12:01 381

原创操作元素（排他思想）-算法

排他思想如果由同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想：所有元素全部清除样式（干掉其他人）给当前元素设置样式（留下自己）顺序不能颠倒（先干掉其他人，再设置自己）例：点击哪个按钮，哪个就变成粉红色<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <bu

2021-12-01 23:41:32 67

原创 Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）

Web APIsWeb APIs 和 JS 的关联性：Web APIs是 W3C 组织的标准，主要学习DOM 和 BOMWeb APIs是 JS 所独有的部分主要学习页面交互功能Web APIs 是 JS 的应用总结：API 是一种接口工具，以实现某些功能，只要会使用就可以了Web APIs是浏览器提供的一套操作浏览器功能（BOM) 和页面元素(DOM)的APIWeb APIs 一般都有输入和输出，Web APIs很多都是方法（函数）可以结合前面学习内置对象方法的思路学习DOMDO

2021-12-01 23:05:47 101

原创简单数据类型和复杂数据类型--堆、栈/传参

简单数据类型和复杂数据类型简单数据类型：即基本数据类型或值类型值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型（null除外） string number,bollen,undefined,null //简单数据类型null 返回的是一个空的对象 object var timer = null; console.log(typeof timer); //object //如果有个变量以后打算用来储存为对象，暂时不知道放什么，

2021-12-01 21:17:27 426 1

原创 javaScript学习笔记五--内置对象(math / Date / 数组 / 字符串 ) /案例：倒计时效果

对象对象分为三大类：自定义对象内置对象浏览器对象内置对象内置对象就是JS语言自带的一些对象，供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）帮助我们快速开发内置对象很多,可以查阅文档MDN文档：http://developer.mozilla.org/zh-CN/常用内置对象Math对象//Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。//Math 用于 Number 类型。它不支持 BigIn.

2021-12-01 21:12:31 142

原创 javascript学习笔记4-预解析/对象

预解析js引擎运行js 分为两步：预解析代码执行预解析：js 引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面代码执行：按照代码书写顺序从上往下执行预解析分为：变量预解析（变量提升）和函数预解析（函数提升）变量预解析就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作函数预解析就是把所有的函数声明提升到当前作用域的最前面不调用函数function f1() { var a = b = c = 9; //相当于 var a =.

2021-12-01 14:49:45 65

空空如也

空空如也