小花fafa-优快云博客

原创 vue-codemirror使用详细过程（包括修改宽度，更换语言模式，C++模式，HTML模式，括号补全）

近期在做一个oj项目，要使用代码编辑器，过程中碰到一些问题，现在记录下步骤。参考文章：https://blog.youkuaiyun.com/senmage/article/details/103742854 大致效果： 1.安装，直接在你的vue项目中使用npm指令 npm install vue-codemirror --save 2.引入和参数配置，这里直接参考https://blog.youkuaiyun.com/senmage/article/details/103742854 （先都按照参考文章..

2021-10-17 16:32:24 21949 4

原创 vue实现点击循环中的某个元素，该元素添加类，（导航点击后改变样式，动态绑定class）

这里例子中的文字内容不是写死的，而是在数组中，用循环取出后渲染到页面上，每个元素还需要添加点击事件，点击时希望当前点击这个元素改变样式，我当时新建了一个类，以方便动态添加，但因为用了循环，动态添加时总是有问题，小花原来纠结了很久，现在记录下怎么解决的（用其他的写法也能实现，比如动态绑定style，但是在使用该方法时出了问题，所以值得记录下）先写好vue初始化代码，在data准备中有一个数组： <!DOCTYPE html> <html lang="en"> <h..

2021-09-16 15:04:27 2232 1

原创 Vue的最基本使用和其中常用的一些指令的基础用法

首先，我们去vue的官网https://cn.vuejs.org/v2/guide/，下载好vue.js文件然后，将其放入我们的文件夹中在此文件夹中，我们再新建一个html文件，此时，我们引入vue.js文件 <script src="./vue.js"></script> 在body部分放一个大盒子，id为app ...

2021-09-16 10:40:24 295

原创如何设置网站顶部的logo图标

我们平时浏览一个网站时可以看到页面顶部左侧都有一个logo 如何在自己的网站设置这样一个图标呢？ 1.先准备好logo的图片，格式要png 2.把png图片转换成ico图标 http://www.bitbug.net 选择你的png图片，输入附加码，点击生成ico图标 3.我们找到下载好的文件位置，将其放到网站的根目录下剪切到：和你的页面同位置 4.引入图标：打开你的html页面，在head标签中引入该图标： ...

2021-09-13 09:49:10 8056

原创 jQuery事件对象，对象拷贝（jQuery禁止默认行为，阻止冒泡，禁止右键）

1.事件对象语法：element.on(events,[selector],function(event){}) 首先，先准备一个盒子，并为他绑定点击事件： <div></div> <style> div { width: 200px; height: 200px; background-color: pink; } </style> <script> $(..

2021-09-07 09:55:07 255 2

原创 jquery事件（on方法的优点,off方法）（自动触发事件）（事件委托）

1.注册和处理通过不同类型事件的方法例如 click(),mouseover(),mouseout()... 先准备一个盒子： <div></div> <style> div { width: 200px; height: 200px; background-color: pink; } </style> 给这个盒子绑定点击事件：（点击...

2021-09-06 10:27:54 1188

原创 jQuery尺寸，位置操作

2021-09-05 10:13:44 364

原创 jQuery元素操作

1.遍历 $('选择器').each(function(index,demoFile){ }) （注意：这里的demoFile是DOM元素对象）首先我们建立三个div并设置样式： <div>这里是div</div> <div>这里是div</div> <div>这里是div</div> <style> div { width: 200px; height: 50..

2021-09-04 09:11:24 180

原创 jQuery内容文本值 (jquery获取输入框中的内容)

1.普通元素内容 html() 获取： <div><a href="#">这里是div</a></div> <script> $(function () { console.log($('div').html()); }) </script> 设置： <div><a href="#">这里是div</a></div> &lt.

2021-09-03 09:15:20 2576

原创 jQuery属性操作

1.设置或获取元素的固有属性值 prop() 比如<a>里面的href , <input>里面的type 获取属性值：元素.prop('属性名') <input type="text"> <script> $(function () { console.log($('input').prop('type')); }) </script> 设置属性：元...

2021-09-03 08:48:32 139

原创 jQuery效果（显示与隐藏，滑动效果，动画队列和停止排队，淡入和淡出，自定义动画）

1.显示与隐藏显示 show([speed,[easing],[fn]]) （中括号表示可以省略） speed : （速度） "slow" , "normal" , "fast" , 或者毫秒数（1000 | 2000......) easing : （切换效果） "swing"（先慢后快再慢） , "linear" （匀速） fn : （回调函数），动画完成时执行，每个元素执行一次隐藏 hide([speed,[easing],[fn]]) 参数含义与显示相同准备一个盒子，...

2021-09-02 16:50:53 2998 1

原创 jQuery操作CSS方法和设置类样式方法

1.操作CSS ---- $('选择器').css('属性名'，'值') 参数只写属性名，则返回属性值 <div></div> <style> div { width: 200px; height: 200px; background-color: pink; } </style> <script> $(function () { conso...

2021-09-02 08:50:43 1011

原创 jQuery中的一些常用方法（元素显示隐藏，鼠标经过，查找当前元素索引号，清空内容）

1.元素的显示与隐藏 $('选择器').show() | $('选择器').hide() 利用定时器，每隔1s中切换一种状态 <div></div> <style> div { width: 200px; height: 200px; background-color: pink; } </style> <script> $(function () { ..

2021-08-23 10:32:21 632

原创 jQuery筛选方法（jQuery选择器）

1.查找父级 $('选择器').parent(); 2.查找最近一级子元素（亲儿子） $('选择器').children('选择器') 3.后代选择器 $('选择器').find('选择器') 4.查找兄弟节点（不包括自己本身） $('选择器').siblings('选择器') 5.查找当前元素之后的所有元素 $('选择器').nextAll() 6.查找当前元素之前的所有元素 $('选择器').prevAll() 7.检查当前的元素是否含有某个特定的类 $...

2021-08-23 09:53:29 2592

原创 jQuery选择器

$('选择器') 例如： $('div') $('.class') $('#mayid') =>隐式迭代：jQuery选择器对元素进行操作，会遍历内部DOM元素就是给匹配到的所有元素都进行相应的操作注意：例子中的jquery.js的引入地址要换成自己的文件存储地址 <script src="../jQuery/jquery.js"></script> <style> div { ...

2021-08-19 09:50:05 125

原创 jQuery的初认识（jquery对象和Dom对象的区别）

jQuery是常见的一个js库 js库：是一个封装好的特定的集合（方法和函数）（简单理解就是一个js文件，里面对我们原生js代码进行了封装，存放到里面）我们要学习的内容就是如何调用这些方法（函数）下载：https://jquery.com |https://code.jquery.com jquery的入口函数（相当于DOMContentLoaded） $(function(){ //此处是页面DOM加载完成的入口 }); $(document).ready(functi...

2021-08-19 09:21:27 160

原创 CSS3动画

使用步骤：先定义动画，再使用动画 1.用keyframes定义动画 @keyframes 动画名称{ 0%{ 开始效果 } 100%{ 结束效果 } } 动画序列： 0%是动画的开始，100%是动画的完成，中间可以有其他阶段45% | 75%... 用关键字from和to等同于0%和100% @keyframes move { 0% { mar...

2021-08-16 20:37:56 495

原创 CSS3 2D转换

1.移动 translate 语法：transform:translate(x,y) | translateX(n) | translateY(n) 优点：不会影响其他元素的位置 ☆translate中百分比单位是相对于自身元素 ☆对行内标签没有效果 ☆利用定位 + translate 实现水平居中 ...

2021-08-15 10:26:56 173

原创 CSS3过渡（和:hover搭配）（如何给动画添加过渡效果）

transition : 要过渡的属性花费时间运动曲线何时开始 1.属性：宽度高度背景颜色内外边距 ... （all 所有） 2.花费时间：单位是秒（必须写） 3.运动曲线：默认是ease（逐渐慢下来） linear （匀速）ease-in （加速） ease-out （减速） ease-in-out （先加后减） 4.何时开始：单位是秒默认是0 <!DOCTYPE html> <html lang="en"&g...

2021-08-14 20:51:17 1917

原创 CSS定位（相对定位，绝对定位，固定定位，粘性定位，子绝父相）

2021-08-12 11:31:20 654

原创 CSS浮动（多个块级元素横向排列）

默认元素的布局是按照普通流（文档流/标准流），也就是所有标签按照规定好的方式排列：块级元素单独占一行，行内/行内块一行排列。 ☆一般来说多个块级元素纵向排列找标准流 ☆多个块级元素横向排列找浮动浮动： float : none（不浮动） | left（向左） | right （向右）未加浮动前： <style> div { width: 200px; height: 50px; } .one { ...

2021-08-07 10:32:44 6747

原创圆角边框，盒子阴影，文字阴影

1.圆角边框 border-radius : length 原理：以length为半径的圆和边框的交集 length可以是数值，百分比圆形：length为正方形的一半 <style> .big { width: 200px; height: 200px; background-color: yellowgreen; border-radius: 100px; } </sty...

2021-08-06 21:48:59 153

原创 CSS盒子模型

1.边框 1.border-width ---- 粗细 2.border-style ---- 样式 1.none 2.solid ---- 实线 3.double ---- 双实线 4.dashed ---- 虚线 5.dotted ---- 点线 ...

2021-08-06 20:55:16 414

原创 css选择器的权重（为什么写了css样式但是看不到效果）

css选择器的种类非常多，但是当使用了不同选择器对同一个元素设置了样式，那么应该显示哪个？实际上，不同选择器的优先级（权重）是不一样的，这就导致有的时候明明写了样式但是可能显示的还是原来的。 1.继承父级的样式或通配符选择器 ---- 权重（ 0 0 0 0 ） 2.标签选择器 ---- 权重（ 0 0 0 1 ） 3.类选择器，伪类选择器 ---- 权重（ 0 0 1 0 ) 4.ID选择器 ---- 权重（ 0 1 0 0 ） 5.行内样式（style=" ...

2021-08-05 18:18:54 316

原创 CSS的背景background

2021-07-31 22:48:29 338

原创元素的显示模式----块元素、行内元素和行内块元素

1.块元素 <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 特点：1.独占一行 <h1>这里是h1标签，我独占一行哦！</h1> <h1>这里是h1标签，我独占一行哦！</h1> 2.高度，宽度，内外边距都可以控制 <style> div { width: 200px;...

2021-07-29 11:09:49 1459

原创 CSS字体和文本属性

2021-07-27 17:03:44 394

原创 css选择器总结

1.通配符选择器 * =>表示选中页面中所有元素（如下，页面所有标签中的文字都是蓝色） <style> * { color: blue; } </style> <div>这是div中的文字</div> <p>这是p中的文字</p> <a href="#">这是a中的文字</a> <h1>这是h1中的文字</h1&g...

2021-07-25 22:25:08 900

原创 HTML常用标签的使用及属性（包括HTML5新增标签）

1.基础标签 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 1.<html></html> 告知浏览器其自身是一个html文档----所有之后书写的页面相关代码都应放在其中 2.&lt...

2021-07-23 16:31:12 1488

laisy334514的博客