YinJie…-CSDN博客

原创 Webpack5快速入门（三）媒体资源的打包手把手带你打开前端工程化的大门

让webpack去打包图片首先把之前入口文件index.js里的内容都删掉，然后来到 js 目录中新建一个 Image.js 文件function packImg () { const oEle = document.createElement('div') return oEle}document.body.appendChild(packImg())这一步我们先创建一个容器，然后把它放在页面中，执行打包，打开浏览器，看看div标签有没有显示出来：这样我们装在图片

2022-05-05 11:05:53 905 10

原创 Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理手把手带你打开前端工程化的大门

一、CSS-Loader1.为什么需要loader2.loader是什么3.css-loader介绍我们还是用webpack第一篇里的webpack初体验项目，下面是我们的项目目录结构：我们创建一个login.js文件，在里面先创建dom标签，然后再把它放在界面上进行展示，之后再去给相应的元素添加样式，然后再通过webpack做一个统一的打包，之后输出到一个静态资源上去，为我们所用进行部署。下面我们一步步地实现：我们在 login.js 文件中创建一个 login 函数

2022-04-30 15:08:04 4345 5

原创 Webpack5快速入门（一）手把手带你打开前端工程化的大门

一、Webpack简介1、webpack是什么?Webpack是一种前端资源构建工具,一个静态模块打包器在 Webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)2、Webpack的五个核心概念Entry 入口指示Webpack以哪个文件为入口七点开始打包,分析构建内部依赖图 Output 输出指示Webpack打包后的...

2022-04-26 21:15:12 1435 19

原创 JS DOM节点操作详解

这里写目录标题一、获取元素的两种方式🍀1.利用DOM提供的方法获取元素2.利用层级关系获取元素二、节点概述💨三、节点层级🔥1.父级节点2.子节点3.第一个子元素和最后一个子元素4.小案例（新浪下拉菜单）5.兄弟节点6.创建添加节点7.删除节点8.复制节点一、获取元素的两种方式🍀我们获取元素通常用两种方式：1.利用DOM提供的方法获取元素1.document.getElementByld()2.document.getElementsByTagName3.document.querySelecto

2022-04-16 08:39:51 3210 5

原创 Nodejs入门 [实现http请求服务和操作Mysql数据库]

nodejs是一门服务端的语言，同时也是现在前端必须要会的一门语言。简单地说，node.js就是运行在服务端的javascript。本文通过实现http请求响应和连接数据库进行增删改查来直观的体会一下node.js1.导入http请求模块const http = require('http');这是nodejs内嵌的API，所以可以直接使用，就像是python里import包一样。2.创建一个httpserver服务http.createServer(function(reque

2022-04-13 00:05:51 834 2

原创原生JS实现表单验证（基于正则表达式）

🙋在做这个表单之前我们先想看一下做出来的静态表单：👏看一下大致的html结构：<div class="box"> <form action="" id="form-com"> <p class="main">姓名</p> <input type="text" placeholder="请输入姓名" id="main-in" class="test">

2022-04-12 18:17:36 1925 1

原创详解JS 作用域与作用域链

作用域和作用域链方面的知识是JS的重点，去面试十个有八个都会问你这块的知识，所以说这块是特别特别的重要，下面我们好好理解一下什么是作用域先上一段代码：var a = 'jack';function fn() { var a = 'frank';}console.log(a);我们在函数里定义了一个a变量，在函数外也定义了一个a变量，那最后输出的应该是哪一个a的值呢？这个时候就有了作用域这个概念了，简单地说作用域就是限制某个变量只能在某个区域内有效。作用域有全局作用域和局部

2022-04-09 21:47:30 5193 1

原创 [css]Flex弹性布局详解 [附携程网移动端案例]

目录一、flex布局体验:sunglasses:传统布局：flex弹性布局：二、flex布局父项常见属性:running:1.flex-direction2.justify-content3.flex-wrap4.align-items（单行）5.align-content（多行）三、flex布局子项常见属性:sunny:1.flex属性2.align-self四、携程网移动端案例:sunflower:Flex布局可以说是不论pc端移动...

2022-04-06 19:22:12 2254 4

原创 [JavaScript] 数组迭代方法详解

目录1.Array.forEach()2.Array.map()3.Array.filter()4.Array.reduce()5.Array.every()6.Array.some()7.Array.indexOf()1.Array.forEach()forEach() 方法为每个数组元素调用一次函数（回调函数）。该函数接受 3 个参数：项目值项目索引数组本身特点：这个方式是没有返回值的，只是遍历数组中的每一项，不对原来数组进行修改，但是可

2022-04-06 16:18:08 1253 1

原创 [html+css+js] 小米官网首页制作

实现效果：源码及图片素材地址：https://gitee.com/jie_shao1112/xiaomihttps://gitee.com/jie_shao1112/xiaomi这里进行一些说明：在index.html里引入了三个css文件，第一个css文件reset.css是初始化样式表，第二个css文件引入的bootstrap3的css文件，因为用字体图标方便，最后一个css文件就是我们的项目样式文件有两个js文件，animate是缓动动画方法，主要用于轮播图的制作在这个..

2022-04-06 00:08:07 1757 5

原创原生JS面向对象 Tab栏切换案例

1.实现效果2.功能需求点击tab栏,可以切换效果. 点击+号,可以添加tab项和内容项. 点击x号,可以删除当前的tab项和内容项双击tab项文字或者内容项文字，可以修改里面的文字内容.3.抽象对象抽象对象：Tab对象该对象具有切换功能该对象具有添加功能该对象具有删除功能该对象具有修改功能4.切换功能实现首先把大家可以先看看html结构，防止获取元素和类名的时候不知道获取的是什么：<h4> Js 面向对象动态添加标签页<

2022-04-04 11:50:47 929 1

原创 ES6中的类与对象

目录1.创建类2.类constructor构造函数3.类中添加方法4.类的继承5.super关键字1.创建类语法：class name { //class body}创建实例：var xx = new name()注意：类必须用new实例化对象2.类constructor构造函数constructor()方法是类的构造函数(默认方法) ,用于传递参数返回实例对象,通过new命令生成对象实例时,自动调用该方法。如果没有显示定义，类内部会自

2022-04-03 11:15:36 706 1

原创 jQuery 动画效果

目录1.常见的动画效果2.显示隐藏效果显示语法规范：显示参数：隐藏语法规范：隐藏参数：3.滑动效果停止排队：4.自定义动画animate参数：小案例1.常见的动画效果jQuery给我们封装了很多动画效果,最为常见的如下:显示隐藏 show() hide() toggle() 滑动 slideDown() slideUp() slideToggle() 淡入淡出 fadeIn() fadeOu...

2022-04-01 15:29:26 2738 1

原创 jQuery 样式操作

目录1.操作css方法2.设置样式类方法2.1添加类2.2移除类2.3切换类3.tab栏切换案例实现效果：案例分析：核心代码：html结构：4.jQuery类操作与className区别1.操作css方法jQuery可以使用Css方法来修改简单元素样式;可以操作类,修改多个样式。参数只写属性名，则是返回属性值$(this).css("color");参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用

2022-03-31 09:36:15 3573 1

原创详解Ajax请求

目录1.$.get()函数的语法2.$.get()发起不带参数的请求3.$.get()发起带参数的请求4.$.post()函数的语法5.$.post()向服务器提交数据6.$.ajax()函数的语法7.使用$.ajax()发起GET请求8.使用$.ajax()发起POST请求1.$.get()函数的语法jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。$.get()函数的语法如下：$..

2022-03-30 21:29:51 20927 1

原创优雅的jQuery (选择器与链式编程)

1.jQuery 基础选择器$( "选择器" ) //里面xuan'ze

2022-03-30 00:42:04 1352 1

原创 jQuery 快速入门

文章目录jQeury 的概念jQuery 的入口函数jQuery 的顶级对象$jQuery对象和DOM对象DOM对象与jQuery对象的转换jQeury 的概念jQuery是一个快速简洁的JavaScript库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码，做更多的事情。j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。jQuery封装了JavaScript常用的功能代码,优化了

2022-03-29 14:40:39 719 1

原创 [JavaScript] 本地存储(sessionStorage与localStorage)

小案例：在这个登录注册页面案例里，我们并没有连接数据库而是用到了本地存储这个知识点完成的，我们看看本地存储究竟是什么：本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大, sessionStorage约5M、localStorage约20M .只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage特点生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用使用存储

2022-03-29 00:26:33 505 1

原创 [HTML+CSS+JS] 实现注册登录页面

文件夹结构：index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.

2022-03-28 23:04:29 3519

原创通过git提交网站到码云(gitee)并部署发布静态网站

准备工作:需要下载git软件需要码云注册账号git可以把我们的本地网站提交上传到远程仓库(码云gitee)里面类似以前的 ftp码云就是远程仓库，类似服务器1.码云创建新的仓库 pinyougou:创建完仓库后就是这来到了这个界面：2.利用git提交把本地网站提交到码云新建的仓库里面(1) 在网站根目录右键- Git Bash Here没有git bash 的同学说明你还没有安装git，按完以后右击就有了 (2) 如果是第一次利用git提交，请配置好全局选项

2022-03-27 20:59:19 1445 2

原创响应式开发原理及Bootstrap栅格布局详解

文章目录响应式开发原理响应式布局容器Bootstarp简介优点Bootstarp的使用Bootstarp使用四部曲bootstrap的应用布局容器container类栅格系统简介栅格系统参数案例列嵌套列偏移响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式布局容器响应式需要一个父级做为布局容器 ,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面元素的排列方式和大小,从而实现不同屏幕下,看到不同的

2022-03-27 20:54:05 3629 1

原创通过swiper插件制作旋转木马轮播图

实现效果：1.swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀，我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下下载swiper-5的压缩包然后解压然后进入js文件夹，复制里面的swiper.min.js文件然后粘贴到我们的项目文件夹中，同理再进入css文件夹，将里面的swiper.min.css复制到项目文件夹中回到我们swiper插件的页面，单击这里的新窗口打开：然后右击点击查看网页源代码：

2022-03-26 12:05:51 6446 2

原创移动端网页特效入门

文章目录1.触屏事件2.触摸事件对象（TouchEvent）3.移动端拖动元素4.移动盒子小案例1.触屏事件移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生S书写效果，但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件），Android和IOS都有。常见的触屏事件如下：触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指在一个D

2022-03-25 16:07:34 2657 1

原创 rem适配布局制作苏宁移动端首页

实现效果：可以看到随着我们屏幕尺寸的不断变化，我们制作的移动端页面也能有一个自适应的效果，这就是rem适配布局的好处这里我们主要是体现一个rem适配布局所以剩下的部分以同样方法搭建1.技术选型方案：采取单独制作移动页面方案技术：布局采取rem适配布局（less+rem+媒体查询）设计图：采用750px设计尺寸2.搭建相关文件夹结构3.设置视口标签以及引入初始化样式关于初始化样式normalize.css文件和案例用到的图片，大家在这个链接拿来就可以用链接: link.index.

2022-03-25 15:03:39 1276 1

原创 JS 仿淘宝固定右侧侧边栏(可返回顶部)案例

我们先看一下淘宝的侧边栏：功能需求1.原先侧边栏是绝对定位2.当页面滚动到一定位置，侧边栏改为固定定位3.页面继续滚动，会让返回顶部显示出来比如说这是我们的页面：当被页面卷去的部分刚好为header高度时，我们就将右侧侧边栏改为固定定位当页面滚动到main主体部分时，让侧边栏显示返回顶部字样，点击返回顶部可以通过缓动动画滑到顶部案例分析：1.需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document2.滚动到某个位置，就是判断页面被卷去的上部值。3.页面被卷去的头

2022-03-25 10:48:30 1949

原创 [JavaScript] client系列属性及scroll系列属性

文章目录client系列scroll系列页面被卷去的头部三大系列总结他们的主要用法：client系列client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。client相关属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、

2022-03-24 17:59:40 2088 1

原创移动web开发rem适配布局(rem+Less+媒体查询)

文章目录移动端基础meta视口标签物理像素&物理像素比移动端多倍图做法移动端css初始化移动端特殊样式rem 单位rem适配布局原理媒体查询什么是媒体查询语法规范注意mediatype 查询类型关键字媒体特性媒体查询+rem实现元素动态大小变化案例引入资源语法规范案例Less基础什么是LessLess变量语法规范：变量命名规范：Less编译移动端基础meta视口标签我们在移动端开发时都要加上这句话：<meta name="viewport" content="width=device-

2022-03-24 16:48:26 1770 1

原创 JS实现轮播图(自动+手动)

网页轮播图效果：核心原理：tips:代码在文章末尾这个ul就是我们这四张图片的父盒子，我们通过对这个父盒子添加动画函数来实现移动，然后给父盒子来一个溢出隐藏就达到了轮播的效果动画函数如下：function animate(obj,target,callback) { //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { //步长值写到定时器

2022-03-23 16:34:24 18904 16

原创 [JavaScript] 动画函数的封装

文章目录动画实现原理核心原理：实现步骤：js的动画：css的动画：动画函数简单封装给不同对象添加不同的定时器核心原理：代码示例：缓动动画原理思路：实现效果：代码示例：动画函数添加回调函数回调函数原理：示例代码：实现效果：动画函数封装到单独js文件里面当我们学习了动画之后，我们就能做各种各样的网页特效了。有的同学总是杠，js能做的动画css也能做。首先你是来学js的没必要杠，css的灵活度远不如js,其次做网页轮播图等特效时用js是不是方便的多动画实现原理核心原理：通过定时器setInterval()

2022-03-23 10:11:14 1384 2

原创 [JavaScript] 仿京东放大镜案例

实现效果：案例分析：整个案例可以分为三个功能模块第一个模块：鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能第二个模块：黄色的遮挡层跟随鼠标功能。第三个模块：移动黄色遮挡层,大图片跟随移动功能。相关的代码会在最后给大家贴出来，为方便理解先给大家对本例进行一下讲解：第一部分：preview_img 代表装手机图片的盒子，mask代表用来遮罩的淡黄色盒子，big代表用来装放大效果手机图片的大盒子那么显而易见第一个模块主要就是做一个显示与隐藏的效果然后重头戏，第二个

2022-03-19 07:57:15 1004 1

原创 [JavaScript] offset系列属性

offset概述offset 翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等1.获得元素距离带有定位父元素的位置2. 获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset系列常用属性注意：1.element.offsetTop及element.offsetLeft以带有定位的父亲为准，如果没有父亲或者父亲没有定位则以body为准2.element.offsetWidth和element.offsetHeight 返回的宽度及高

2022-03-17 23:03:42 898 1

原创 [JavaScript] 获取URL参数(登陆卡片案例)

我们有两个html文件login.html是我们的登陆页面第一个登录页面，里面有提交表单，action提交到index.html页面第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数在第二个页面中，需要把这个参数提取。第一步去掉?利用substr第二步利用=号分割键和值 split( '= )...

2022-03-17 21:53:05 1328 1

原创 [JavaScript] 仿新浪自动跳转页面案例

当我们在新浪网输入不正确的网址时，会弹出这样的页面，然后五秒钟后会返回首页但是新浪网的这个效果是不动的，我们想实现一种倒计时的效果那先看一下我们的实现效果吧（单击按钮实现倒计时跳转）：案例分析：1.利用定时器做倒计时效果2.时间到了，就跳转页面，使用location.href示例代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <met.

2022-03-17 15:54:08 258

原创 [JavaScript] location对象的属性与方法

文章目录什么是location对象？什么是URL?location对象的属性location对象的方法什么是location对象？window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。什么是URL?通俗点说，URL就是我们所说的网址。官方点说，URL是对互联网上得到的资源的位置和访问方法的一种简洁表示，是互联网上标准资源的地址。URL它具有全球唯一性，正确的URL应该是可以

2022-03-17 15:13:46 4454

空空如也

空空如也