HTML+CSS+JS+jQuery+Vue+XML
前端组合及XML介绍
Star星屹程序设计
编程新手,个人记笔记,方便日后看,很多东西记着只是为了自己方便。。喷子请绕道!!!
展开
-
[vue]——高德地图使用
vue3.0使用高德地图正确的打开方式,带你轻松应用,少走弯路原创 2022-06-25 14:34:25 · 3914 阅读 · 0 评论 -
Vue使用——vue : 无法加载文件 C:\Users\Lenovo\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。
在使用vue-cli脚手架进行开发时,使用到vue add命令添加组件时报错:vue : 无法加载文件 C:\Users\Lenovo\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。注:这种问题主要是笔记本禁止运行脚本解决办法:1、管理员身份打开PowerShell2、输入set-ExecutionPolicy RemoteSigned,选择A或者Y即可...原创 2021-04-24 14:07:50 · 2794 阅读 · 1 评论 -
Front-end——vue封装图标库
如果element中的图标不够用时,就需要自己准备图标,下面就结合 iconfont(阿里矢量库)封装图标方法1:使用图标对应的svg代码在element-ui标签中,加入svg代码,就可以使用效果:方法2:下载使用(1)进入项目目录,引入svg(2)下载svg资源,统一存储,将其导入,以组件形式使用import shops from '@/components/icons/svg/shops.svg?inline';效果展示:...原创 2021-03-12 19:03:22 · 779 阅读 · 1 评论 -
Front-end——关闭vue开发中eslint报错
最近使用vue进行前端开发,遇到问题(error Mixed spaces)针对该问题,查过资料后,只需创建一个vue.config.js文件,即可解决此问题module.exports = { //避免eslint报错 lintOnSave:false }原创 2021-02-07 18:00:29 · 420 阅读 · 0 评论 -
Front-end——vue中引入echarts 报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
最近,使用echarts做疫情防控地图,引入echarts后,报错:vue中引入echarts 报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘查询资料后,了解到是版本的问题详情参考博客:https://blog.csdn.net/weixin_44874618/article/details/110647652在Google 查出来一个问题说可能是版本问题,进行校验后发现确实我的5.0,现更改为原创 2021-02-07 17:55:13 · 396 阅读 · 0 评论 -
Front-end——jQuery自动轮播图(实现鼠标悬停)
本案例使用到:hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发mouseenter和mouseleave事件。 $(selector).hover(inFunction,outFunction) ——》 等价于 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut ); 注意:如果只指定一个函数,则 mouseenter 和 mouseleave 都执行它。参数 描述 i...原创 2021-01-26 09:02:54 · 635 阅读 · 0 评论 -
Front-end——vue-cli3项目创建
大学实习期间,学习了前端的相关知识,之前也都是看看文档,直接引入官方的js,写写简单的demo,没写过项目。最近学习都最后,开始学习VUE,准备用vue-cli3写项目,因此写下此篇博客,记录vue-cli创建项目的流程。一、安装1、vue-cli的包名称是由vue-cli改成 @vue/cli。使用下列命令安装这个新的vue-cli包:npm install -g @vue/cli2、检查版本是否正确vue -v二、项目创建1、在文件夹下创建项目注:这里千.原创 2021-01-17 17:20:33 · 456 阅读 · 0 评论 -
Front-end——HBuilderX自定义vue模板文件
在HBuilderX中,指定创建VUE文件时的自定义模板:1、点击新建.vue类型文件,选择自定义模板2、在打开的目录下,创建对应的 .vue 模板文件,文件名自取3、在创建的模板文件中,书写对应的模板文件信息<template> </template><script> export default { name: '', data(){ return { } }, methods:{原创 2021-01-16 14:13:58 · 3573 阅读 · 0 评论 -
Front-end——VUE实现轮播图
使用到VUE中的 v-for快速遍历数据 位置的相对计算,calc()函数,注意使用此函数时,运算符的两端必须加空格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.min.js"></script> <style> *{ ma.原创 2021-01-15 19:36:10 · 408 阅读 · 1 评论 -
Front-end——jQuery实现螺旋矩阵打印照片
本案例需求:照片按照螺旋矩阵方式慢慢褪去使用到:remove()函数:将当前标签及其子标签一并清除 empty()函数:将当前标签子标签进行清除处理(只清楚子标签) fadeIn(时间)函数: fadeOut(时间)...原创 2021-01-13 19:36:37 · 354 阅读 · 0 评论 -
Front-end——jQuery实现下拉框效果
本案例需求:实现一个下拉列表,需要做到:一次仅有一个下拉框展开,要求点击进行下拉框打开和关闭操作使用到:toggle()函数:显示或者隐藏标签,即如果显示就隐藏,如果隐藏就显示 parent()函数:找到对应元素的父元素,只查找一层 parents()函数:找到对应元素的父元素,不断向上查找(无极限) children(选择器):查找满足条件的子元素,只查找一层 find(选择器):查找满足条件的子元素,不断向下查找(无限极)<!DOCTYPE html><.原创 2021-01-13 15:56:14 · 312 阅读 · 0 评论 -
Front-end——jQuery入口函数及$解释
一、jQuery的入口函数//两种写法://1、$(document).ready(function(){})//2、$(function(){})1、jQuery入口函数和window.onload入口函数的区别window.onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的 执行时机不同,jQuery入口函数执行时机要快于window.onload入口函数。因为jQuery入口函数要等待页面上的DOM树加载完后执行;window.onload入口函数要等待原创 2021-01-13 08:55:05 · 425 阅读 · 1 评论 -
Front-end——jQuery对象的功能函数介绍
1、show() & hide()show():负责让jquery对象包含的所有DOM对象关联的标签在浏览上显示,等价于style="display:block"hide():负责让jquery对象包含的所有DOM对象关联的标签在浏览上隐藏,等价于style="display:none"设置标签显示或者隐藏的时间:$("div").hide(延时值)——》单位是:ms<!DOCTYPE html><html> <head> <原创 2021-01-12 20:34:41 · 318 阅读 · 0 评论 -
Front-end——jQuery制作3D相册效果
本案例使用到:-webkit-box-reflect 倒影:(取值:above上倒影、below下倒影、left 左倒影、right右倒影)设置两个值,即倒影的位置、距离本体的距离 注:除了谷歌内核浏览器外都不支持 background:设置渐变色,如: -webkit-radial-gradient(center center,400px 400px,#ff62f0,rgba(0,0,0,0.1)) box-shadow:背景倒影 transition值的设置:可以设置两个值,第一个值是...原创 2021-01-12 19:54:21 · 546 阅读 · 0 评论 -
Front-end——jQuery中的过滤器
一、过滤器介绍jQuery过滤器用来对已经定位到jQuery对象中的DOM对象,进行二次过滤筛选的。在JQuery中可以使用过滤器对选取的数据进行过滤,选择更加明确的元素,JQuery过滤器的通常语法:$("选择器:过滤器")...原创 2021-01-11 20:40:36 · 359 阅读 · 0 评论 -
Front-end——jQuery实现照片墙
本案例思路:大的照片墙上6 X 4陈列着24张照片,通过计算,算出每个照片摆放的位置,具体的照片墙详见如下:需要计算出的地方有:行间距和列间距:row_span = ($("#app").height() - 500) / 3 column_span = ($("#app").width() - 750) / 5 计算每个图片对应的行坐标和列坐标(计算出在6X4排列中的位置):row_index = i /6 column_index = i %...原创 2021-01-11 18:57:15 · 534 阅读 · 0 评论 -
Front-end——jQuery实现轮播图(按钮按下跳转)
本案例思路:利用ul li标签实现圆点按钮,按动具体按钮,使得对应索引的图片跳转出来使用到:index()函数:在多个统计标签匹配的情况下,获取对应元素的下标 siblings('标签'):根据需求匹配出兄弟元素 eq(index)函数:当jquerydDom可以匹配到多个的时候,用eq()函数来取出具体第几个,索引从0开始 $(this):代表当前操作的DOM对象(用于可以匹配到多个,如果需要获取具体的dom时使用)<!DOCTYPE html><html&.原创 2021-01-11 13:36:37 · 573 阅读 · 0 评论 -
Front-end——jQuery实现手风琴效果(轮播图)
本案例使用到:鼠标点击事件:点击那个图片,就将其对应的图片显示完整 $(this):代表当前操作的dom对象 $(domObj).siblings():匹配所有该元素的兄弟元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquer.原创 2021-01-11 11:09:04 · 1213 阅读 · 1 评论 -
Front-end——jQuery实现一个div随意拖动
步骤:点击时刻记录原来 距左和距顶的距离 记录鼠标按下时刻的x坐标 和 y坐标 添加鼠标移动事件 在鼠标移动事件中,再获取 移动后 x坐标和y坐标 最终元素距顶的距离 = 移动后的Y坐标 - 移动前Y坐标 + 原本距顶的距离 最终元素距左的距离 = 移动后的X坐标 - 移动前X坐标 + 原本距左的距离<!!DOCTYPE html><html> <head> <meta charset="utf-8" /> <titl.原创 2021-01-11 10:16:41 · 371 阅读 · 0 评论 -
Front-end——jQuery入门及选择器介绍
一、jQuery技术的介绍jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高原创 2021-01-09 17:41:57 · 517 阅读 · 0 评论 -
CSS——粘性定位(sticky)
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。position: sticky;基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在position:relative与position:fixed定位之间切换。它的行为就像position:relative;而当页面滚动超出目标区域时,它的表现就像position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, rig...原创 2021-01-05 08:39:25 · 4747 阅读 · 0 评论 -
JSON
JavaScriptJSONJSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。什么是 JSON?JSON 英文全称JavaScriptObjectNotation JSON:JavaScriptObjectNotation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法。类似 XML。 JSON...原创 2020-02-09 22:10:14 · 315 阅读 · 0 评论 -
JavaScript基础(三)
特别注意:Undefined 不是 Null在 JavaScript 中,null用于对象,undefined用于变量,属性和方法。对象只有被定义才有可能为 null,否则为 undefined。如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。错误的使用方式:if (myObj !== null && typeof myObj !== ...原创 2020-02-09 15:01:52 · 375 阅读 · 0 评论 -
JavaScript基础(二)
JavaScript调试在编写 JavaScript 时,如果没有调试工具将是一件很痛苦的事情。JavaScript 调试没有调试工具是很难去编写 JavaScript 程序的。你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。 ...原创 2020-02-09 13:30:09 · 445 阅读 · 0 评论 -
JavaScript异常处理
JavaScript错误 - throw、try 和 catchtry语句测试代码块的错误。catch语句处理错误。throw语句创建自定义错误。finally语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。JavaScript 错误当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误。可...原创 2020-02-09 12:44:24 · 435 阅读 · 0 评论 -
JavaScript正则表达式
JavaScript正则表达式正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。什么是正则表达式?正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。正则表...原创 2020-02-09 12:22:35 · 435 阅读 · 0 评论 -
JavaScript基础(一)
JS:运行在浏览器端的脚本语言前端脚本语言Javascripts(其实前后端都需要用) js库:jquery库JS分为:原生JS + JQuery库(也是用原生JS写的)运行环境:浏览器解释执行作用:主要解决前端与用户的交互问题,包括使用交互与数据交互注:前端语言还有:Jscript(微软、IE独有),ActionScript(Adobe公司,需要插件)等。JS用法:H...原创 2020-02-08 21:05:45 · 482 阅读 · 0 评论