<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[httpkaidi的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/httpkaidi</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; httpkaidi]]></copyright><item><title><![CDATA[记录一下谷歌浏览器翻译失败的问题]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/127099719</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/127099719</guid><author>httpkaidi</author><pubDate>Thu, 29 Sep 2022 01:54:26 +0800</pubDate><description><![CDATA[3.保存文件,如果不能保存就先放到桌面新建txt文件,然后复制旧hosts内容，最后把txt文件放到etc下面,修改名称hosts。1.找到C:\Windows\System32\drivers\etc下面的hosts文件。打开控制台（win+R），输入ipconfig /flushdns 刷新DNS。5.重启谷歌浏览器。如果不行就断一下网再继续连接。]]></description><category></category></item><item><title><![CDATA[使用vue-element-admin初始化依赖出错问题]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/123980095</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/123980095</guid><author>httpkaidi</author><pubDate>Tue, 05 Apr 2022 23:26:13 +0800</pubDate><description><![CDATA[问题所在就是node版本太高，需要降低版本

1.安装nvm

(2条消息) windows中如何将已安装的nodejs高版本降级为低版本_Spring_z7的博客-优快云博客_nodejs降低版​​​​​​s



具体教程在上面链接


]]></description><category></category></item><item><title><![CDATA[jQuery对象拷贝/jQuery多库共存]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121622403</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121622403</guid><author>httpkaidi</author><pubDate>Wed, 08 Dec 2021 00:12:53 +0800</pubDate><description><![CDATA[jQuery其他方法
jQuery对象拷贝
想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend()方法
语法：$.extend([deep],target,object1,[objectN]
1.[deep]：如果设置为true 则是深拷贝 ，默认为false 浅拷贝
2.target：要拷贝的目标对象
3.object1：待被拷贝的第一个对象（就是把这个拷贝给target,不止一个）
4.[objectN]：待拷贝到第N个对象的对象
5.浅拷贝是把被拷贝的对象复杂数据类型中的地址]]></description><category></category></item><item><title><![CDATA[jQuery事件-on () 方法/off()方法/ triggle()/事件对象]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121622283</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121622283</guid><author>httpkaidi</author><pubDate>Tue, 07 Dec 2021 23:49:48 +0800</pubDate><description><![CDATA[jQuery事件
jQuery事件注册
单个事件注册element.事件(function(){.....})

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



 // 1. on ( ) 实现多个.]]></description><category></category></item><item><title><![CDATA[jQuery内容文本值/元素操作]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121622151</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121622151</guid><author>httpkaidi</author><pubDate>Tue, 07 Dec 2021 21:12:14 +0800</pubDate><description><![CDATA[jQuery内容文本值

主要针对元素的内容和表单的值操作

普通元素内容 html() (相当于原生innerHTML)
	(1) 获取元素设置内容 html() 连着标签一起显示
	(2) 获取设置元素文本内容 text() 只得到文本
	(3) 获取设置表单值 val()
	
      $(function() {
        //获取元素设置内容 html() 连着标签一起显示
        console.log($("div").html());
        $("div").htm]]></description><category></category></item><item><title><![CDATA[jQuery属性操作-prop()/attr()/data()]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121621882</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121621882</guid><author>httpkaidi</author><pubDate>Tue, 07 Dec 2021 19:59:51 +0800</pubDate><description><![CDATA[jQuery属性操作
设置或获取元素固有属性值 prop()
元素固有属性值就是元素本身自带的属性，比如&lt;a&gt;元素里面的 href ，比如&lt;input&gt;里面的 type
prop("属性")
prop("属性","属性值")
修改/获取自定义属性
attr()（类似于原生js里面的getAttribute/setAttribute)
数据缓存
data() data方法可以在指定的元素上存储数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将移除



        .]]></description><category></category></item><item><title><![CDATA[jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121621765</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121621765</guid><author>httpkaidi</author><pubDate>Tue, 07 Dec 2021 19:27:36 +0800</pubDate><description><![CDATA[jQuery效果
自定义动画效果animate
animate([params,[speed],[easing],[fn])
（1）params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号，如果是复合属性则需要采取驼峰命名法 borderLeft ,其余参数都可以省略
（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）
（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"
（4]]></description><category></category></item><item><title><![CDATA[jQuery效果-显示与隐藏效果/滑动效果 / 高亮显示案例]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121621608</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121621608</guid><author>httpkaidi</author><pubDate>Tue, 07 Dec 2021 00:50:37 +0800</pubDate><description><![CDATA[jQuery效果
显示与隐藏效果
显示语法规范：
show([speed,[easing],[fn])
显示参数
（1)参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）
（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"
（4）fn : 回调函数，再动画完成时执行的函数，每元素执行一次
( 其他效果可查看jquery 的 API）



&lt;body&gt.]]></description><category></category></item><item><title><![CDATA[jQuery的排他思想 /案例：淘宝服饰精品案例分析]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121621072</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121621072</guid><author>httpkaidi</author><pubDate>Mon, 06 Dec 2021 23:54:00 +0800</pubDate><description><![CDATA[jQuery的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式

案例：点击的按钮变色


 &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button&gt;选择&lt;/button&gt;
    &lt;button&gt;选择&lt;/button&gt;
    &lt;button&gt;选择&lt;/button&gt;
    &lt;b]]></description><category></category></item><item><title><![CDATA[jQuery基础语法-选择器/设置样式/筛选方法]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121620973</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121620973</guid><author>httpkaidi</author><pubDate>Mon, 06 Dec 2021 17:51:02 +0800</pubDate><description><![CDATA[jQuery基础语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
美元符号定义 jQuery，

jQuery基础选择器
原生js获取元素的方式有很多，很杂，jQuery做了封装，使元素统一标准
$("选择器"） //里面选择器直接写CSS选择器即可，但是要加引号



&lt;body&gt;
    &lt;div&gt;我是div&lt;/div&gt;
    &lt;div class="nav"&gt;我是nav div&lt;/div&gt;
    &lt;.]]></description><category></category></item><item><title><![CDATA[jQuery概述/DOM对象和jQuery对象]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121620871</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121620871</guid><author>httpkaidi</author><pubDate>Mon, 06 Dec 2021 00:21:53 +0800</pubDate><description><![CDATA[jQuery概述
javascript库，即library，是一个封装好的特定的集合（方法和函数），就是在这个库里面。封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素
简单理解，就是一个js文件，里面对原生js进行了封装，存放到里面，这样我们可以快速高效地使用这些封装好了的功能。直接调用就好了。

比如 jQuery，就是为了快速方便地操作DOM，里面基本都是函数（方法）。里面都是用原生js实现的。

常见js库：
jQuery、prototype、YUI、Dojo]]></description><category></category></item><item><title><![CDATA[本地存储 sessionStorage / localStorage 使用及区别]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121620551</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121620551</guid><author>httpkaidi</author><pubDate>Sun, 05 Dec 2021 23:56:36 +0800</pubDate><description><![CDATA[本地存储
特性：
1.数据存储在用户浏览器中
2.设置、读取方便，甚至页面刷新不丢失数据
2.容量较大，sessionStorage 约5M，localStorage约20M
3.只能存储字符串，可以将对象JSON.stringify（）编码后存储

window.sessionStorage:
1.生命周期为关闭浏览器窗口
2.在同一个窗口（页面）下数据可以共享
3.以键值对的形式存储使用
存储数据：sessionStorage.setItem(key,value);
获得数据：sessionStorag]]></description><category></category></item><item><title><![CDATA[移动端常用开发插件]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121620480</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121620480</guid><author>httpkaidi</author><pubDate>Sun, 05 Dec 2021 18:02:28 +0800</pubDate><description><![CDATA[移动端常用开发插件

Swiper 插件（轮播图插件）Swiper中文网-轮播图幻灯片js插件,H5页面前端开发


	首先下载 Swiper 插件压缩包解压缩
	
	
	找到文件夹里面的 demo 文件夹 从里面众多的html 文件里选取想要的样式，打开后右键点击页面，选择查看源码
	
	
	从源码里查看需要引入的相关文件，例：&lt;link rel="stylesheet" href="../package/swiper-bundle.min.css"&gt; 根据路径在文件夹里查找然后引入

	创建]]></description><category></category></item><item><title><![CDATA[移动端返回顶部功能]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121620400</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121620400</guid><author>httpkaidi</author><pubDate>Sun, 05 Dec 2021 18:00:11 +0800</pubDate><description><![CDATA[移动端返回顶部

功能：
滚动到某个地方显示
事件 scroll 页面滚动事件
代码：


&lt;style&gt;
      * {
        height: 800px;
      }
      .nav {
        height: 200px;
        background-color: aquamarine;
      }
      .icon {
        display: none;
        float: right;
        width:]]></description><category></category></item><item><title><![CDATA[案例：移动端轮播图 / classList]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121620230</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121620230</guid><author>httpkaidi</author><pubDate>Sun, 05 Dec 2021 14:17:15 +0800</pubDate><description><![CDATA[移动端常见特效
案例：移动端轮播图
功能基本和pc端一致

可以自动播放图片
手指可以拖动播放轮播图
自动播放功能
开启定时器
移动端移动，可以使用translate 移动
可以添加过渡效果
无缝滚动
判断条件是：等到图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加过渡完成事件 transitionend
判断条件：如果索引号为 3 （图片是3张 ，但实际添加的是5张 详情见代码），说明走到最后一张，此时索引号要复原为0
此时图片去除过渡效果，然后移动
如果索引号小于0 ，说明是倒着走，索引号等于2
]]></description><category></category></item><item><title><![CDATA[移动端开发-触摸事件]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121620143</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121620143</guid><author>httpkaidi</author><pubDate>Sat, 04 Dec 2021 15:05:41 +0800</pubDate><description><![CDATA[移动端网页布局
移动端浏览器兼容性较好，不需要考虑兼容性问题。

触屏事件

触屏touch事件 说明
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指再一个DOM元素上滑动时触发
touchend 手指从一个DOM上移开时触发
触摸事件对象TouchEvent

触摸列表 说明
touches 正在触摸屏幕的所有的手指列表
targetTouches 正在触摸当前元素DOM 元素的手指列表
changedTouches 手指状态...]]></description><category></category></item><item><title><![CDATA[案例：筋斗云动画效果]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121619706</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121619706</guid><author>httpkaidi</author><pubDate>Sat, 04 Dec 2021 14:34:51 +0800</pubDate><description><![CDATA[筋斗云动画效果

利用动画函数做动画效果
	原先筋斗云起始位置为0
	鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可
	鼠标离开某个li ，就把目标值设为0
	如果点击了某个li ,就把 li 当前的位置存储起来，作为筋斗云的起始位置
	
 &lt;style&gt;
      * {
        padding: 0;
        margin: 0;
      }
      li,
      a {
        text-decoration: none]]></description><category></category></item><item><title><![CDATA[案例：带有动画效果的返回顶部]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121619681</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121619681</guid><author>httpkaidi</author><pubDate>Sat, 04 Dec 2021 13:37:50 +0800</pubDate><description><![CDATA[&lt;style&gt;
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 1200px;
        margin: 10px auto;
      }

      .header {
        margin-top: 10px;
        height: 100px;
        background-color: hsl(278, 84%, 69%);
 .]]></description><category></category></item><item><title><![CDATA[案例：网页轮播图]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121619592</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121619592</guid><author>httpkaidi</author><pubDate>Sat, 04 Dec 2021 13:09:14 +0800</pubDate><description><![CDATA[案例：网页轮播图
也称为焦点图

功能需求：
鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
点击右侧按钮一次，图片往左播放一次，依此类推，左按钮同理
图片播放的同时，下面小圆圈模块跟随一起变化
点击小圆圈，可以播放相应图片
鼠标不经过轮播图，轮播图也会自动播放
鼠标经过轮播图模块，自动播放停止
其中模块：
动态生成小圆圈：
核心思路：小圆圈的个数要和图片张数一致
首先得到ul里面图片的数量，（图片放入li里面，所以是li的个数）
利用循环动态生成小圆圈（这个小圆圈要放入ol里面）
创建节点 creat]]></description><category></category></item><item><title><![CDATA[动画案例： 滑动块]]></title><link>https://blog.youkuaiyun.com/httpkaidi/article/details/121619496</link><guid>https://blog.youkuaiyun.com/httpkaidi/article/details/121619496</guid><author>httpkaidi</author><pubDate>Fri, 03 Dec 2021 17:04:27 +0800</pubDate><description><![CDATA[动画案例：滑动块

案例效果：
鼠标经过就将盒子滑动到右侧，同时外盒子内容箭头指向变化
鼠标离开就将盒子滑动到左侧，同时外盒子内容箭头指向变化回来

思路：动画封装函数，回调函数


 &lt;style&gt;
      .sliderbar {
        position: relative;
        float: right;
        margin-top: 100px;
        height: 40px;
        width: 60px;
        ba]]></description><category></category></item></channel></rss>