自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(51)
  • 收藏
  • 关注

原创 js——正则

正则 创建正则的两种方式? new RegExp("表达式"); /正则表达式/修饰符 例子: /abc/i正则的方法? test() 搜索字符串指定得值,根据结果返回真或假; 格式:/正则/.test(字符串); search() 搜索返回第一次搜索的元素下标,找不到返回-1; 格式:''字符串".search(/正则/); replace() 替换内容 格式: ''字符串".replace(/正则表达式/,要替换的内容) exec() 返回

2020-10-06 07:44:20 23

原创 js——DOM对象

1:什么是dom对象?dom对象就是html页面,dom对象的全称叫document object model(文档对象模型)2:dom对象的作用是什么呢?dom对象就是通过一些方法和属性来操作标签,这么操作标签?将标签元素进行添加、移动、改变或移除3:标签标记元素==节点4: dom节点的分类?dom节点分为3种类型1:标签节点2:文本节点 属于标签下面的子节点3:属性节点5:返回节点类型值nodeName 该节点的名字,和tagName方法一样nodeValue

2020-10-06 07:43:54 14

原创 jQuery---插件

1:什么是插件?插架是别人封装好的js代码,直接可以拿过来引用的。插架的种类有很多种。sweiper插架 他是一种轮播插件。不要滥用插件,不要去网上随便下载插件2:swiper插架用法:1:赋值你sweiper里面所有代码,粘贴到你的页面2:引入sweiper页面里面的css和js3:改变元素宽高等属性大小,切记不要修改sweiper代码。...

2020-10-06 07:42:53 10

原创 html5课程概述

1:html5是什么?HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。一句话概括,ht

2020-10-06 07:42:12 36

原创 jQuery---json

1、什么是json?JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ==ECMAScript ==(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率json本身是一个对象,主要作用是存储数据(json是存储和交换文本信息的语法,类似XML),json可以存储

2020-10-06 07:41:24 19 1

原创 jQuery-动画

①- show(秒数) 显示- hide(秒数) 隐藏- toggle() 切换显示/隐藏②- slideUp() 上隐藏- slideDown() 下显示- slideToggle() 上下切换③- fadeIn() 淡入- fadeOut() 淡出- fadeToggle() 切换淡入淡出- fadeTo (秒数,透明度)④animate() 自定义动画动画当中想要改变颜色(字体/背景),需要下载js/jquery.color.j

2020-10-05 08:06:27 8

原创 jQuery---事件

1:绑定事件方法: bind(事件,函数) 元素绑定事件 **绑定事件方法的优点就是可以绑定多个事件,可以同时处理2:去除绑定方法: unbind()3:其他事件方法:------------------------------鼠标事件----------------------------------------------------------click() 点击事件dblclick() 双击mousedown() 鼠标按下mouseup()

2020-10-05 08:05:46 7

原创 jQuery-DOM

1:获取值的方法html()text()val() 既可以获取input里面的值/也可以设置值** 如果是下拉菜单 、单选、多选的情况下 val([''])方法 还可以将他们设置成默认选中**prop('checked',true) 专属input默认选中方法2:操作属性的方法attr() 获取/设置元素属性的方法** attr()还可以设置多个属性 设置多个属性采用对象的模式 attr({'k1':'v1','k2':'v2','k3':'v3'})removeAttr()

2020-10-05 08:05:10 7

原创 jQuery选择器方法

选择器方法 find() 匹配当前元素的后代 == $('div p')后代选择器 children() 匹配当前元素的子元素 == $('div>p')子选择器 next() 匹配当前元素的下一个同级元素== $('div+p')下一个同级选择器 nextAll() 匹配当前元素的下的所有同级元素 == $('div~p') prev() 匹配当前元素的前一个同级元素== prevAll() 匹配当前元素的前的同级元素== siblings() 匹配当前元素的所有同级元素

2020-10-05 08:04:22 5

原创 jQuery选择器

1:基础选择器 bash id # class . 标签 div * 通配符 群组 #box,p css() 一个值的时候是找这个元素的值,两个值的时候是设置样式 举例 找元素的值: alert($('p').css('color')) 举例 设置元素的样式: $('#txt').css('color','red'); size() 返回的元素个数 举例: alert($('p').size())<!DOCT

2020-10-05 08:03:43 4

原创 初步了解jQuery

1:什么是jQuery?它通过封装原生的 JavaScript 函数得到一整套定义好的方法。2:jQuery的作用?1.像 CSS 那样访问和操作 DOM 2.修改 CSS 控制页面外观 3.简化 JavaScript 代码操作 4.事件处理更加容易 5.各种动画效果使用方便 o6.让 Ajax 技术更加完美 7.基于 jQuery 大量插件8.自行扩展功能插件3:jQuery的优点?以更少的代码、实现更多的功能4:jQuery的引入方式?1:本地引入(外链接) <sc

2020-10-05 08:02:12 7

原创 BOM

1:什么是bom?bom就是浏览器对象!简单来说,就是学习一些操作浏览器窗口的方法和属性等!2:window对象是BOM的核心,也是BOM里面的顶级对象。window对象也有很多内置方法(alert(1))window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;document对象既是BOM对象的一个属性,也是DOM模型中的顶级核心location对象既是window对象的属性,同时也是dom对象的属性。open('img/1.jpg','_self','

2020-10-05 08:00:40 5

原创 js——面向对象

1:什么是对象?a:对象就是由若干个键值对,无须组成的数据类型,被称之为对象。b:简单理解,提供了特有的方法和属性就是对象!c:“对象”是一个容器,封装了“属性”(property)和“方法”(method)。举例:var o={ name:'tom', age:12, fun:function(){ alert(1) }}2:键值对?花括号里面冒号前被称之为键,冒号后被称之为值,通过键获取值。3:什么是面向对象?面向对象是一种编程思想,通过这种思想来完成代码的编程。(o

2020-10-05 08:00:06 5

原创 vue之了解基础

vue特色MVVM(前端)m:model(数据)v:view(数据)vm:viewmodel 数据和视图的桥梁m——>mv——>vm<——mv<——v双向数据绑定MVC(后端)m:model(数据)v:view(视图)c:controller(控制器)vue.jsvue.js 是一套用于构建用户界面的渐进式框架Vue 核心声明式渲染组件引入我们还是先通过 <script> 的方式来引入 vue<script src=

2020-10-05 07:59:09 4

原创 vue之掌握指令

1、v-model 双向数据绑定 ref(https://www.cnblogs.com/goloving/p/9404099.html) <input type="text" ref="name" @keyup="show"/> console.log(this.$refs.name.value);//作用2:获取DOM元素 this.msg=this.$refs.name.value;2、v-for 数组,对

2020-10-05 07:58:36 9

原创 定时器与拖拽——js

定时器setTimeout 单次定时第一个参数是匿名函数 第二参数是多少毫秒后执行 第三个函数是返回值(返回的是地址)clearTimeout() 清除定时器setInterval 多次定时第一个参数是匿名函数 第二参数是多少毫秒后执行 第三个函数是返回值(返回的是地址)clearInterval() 清除定时器拖拽 <html lang="en"> <head> <meta charset="UTF-8"> <meta n

2020-10-04 15:49:08 15

原创 消息框与四种事件类型

消息框警告框 alert();确认框 confirm(); 返回true和false;提示框 prompt();鼠标事件:onclick: 鼠标单击事件 可以直接写js内容或函数名ondblclick: 鼠标双击事件onmouseover: 鼠标移入事件onmouseout: 鼠标移出事件onmousemove: 鼠标移动事件(获取坐标点)scrollX 鼠标在事件源X坐标scrollY 鼠标在事件源Y坐标onmousedown : 鼠标按下onmouseu

2020-10-04 15:45:06 8

原创 认识js——事件

1:什么是冒泡事件?1:冒泡事件是由微软公司提出的,从触发底部事件一直延续到最外层,这个现象就是冒泡!2:只有嵌套关系的标签和都是一样的事件才可能产生冒泡!2:阻止冒泡事件的方法:1:evt.stopPropagation() 无法阻止 IE 低版本事件冒泡;2: evt.cancelBubble = true;兼容 IE 低版本冒泡;3:阻止冒泡事件的兼容写法:if(evt.cancelBubble){ evt.cancelBubble=true;}else{ evt.stop

2020-10-04 15:40:30 22

原创 js——函数

1:基本结构 function 函数名(){ 执行语句 } 函数名()2:什么是函数? 函数由function关键字声明 函数就是代码块的集合;3:函数的特点: 函数可以让代码重复使用; 函数是一个方法4:形参,实参 实参放在函数调用里面,形参放在函数名后面,用字母代替 形参,实参的位置是一一对应, 形参,实参可以有任意多个, 形参即便没有相对应得实参,也不影响代码的执行 实参即便没有相对应得形参,也不影响代码的执行 任何数据类型都可以当

2020-10-04 15:23:31 4

原创 jsfor循环——流程控制与数组

顺序执行: 自上而下 自左而右执行;分支结构: 单分支:if(条件表达式){ 代码块; } 双分支:if(条件表达式){ true; }else{ false; } 多分支 范围 if(条件表达式1){ }else if(条件表达式2){ }else{ } 固定值 switch(接收到的值){ case: 执行的语句; break; default; }循环结构: for(初始值1;条件表达式2;表达式3){

2020-10-04 15:10:39 4

原创 js数据类型与运算符

数据类型1:js中的数据类型? 数字类型 字符串类型 布尔类型 空类型(空对象) 未定义(未赋值,没有值) 对象 Number String Boolean null undefined Object 简单类型 Number String Boolean null undefined 复杂类型 Object2:数据类型的作用? 数据类

2020-10-04 14:56:13 3

原创 js的入门 作用 特点 引入

1:什么是js? js是一门编程语言,全称叫 javascript。 js是一门松散类型的,所谓松散类型就是可以用来保存任何类型的数据。2:js的名字? js== javascript==脚本语言。3:js的作用? 让客户和电脑进行交互!4:js的组成部分? DOM 文档对象模型 BOM 浏览器对象模型 ECMAscript 5:JS的特点? 基于对象的语言 简单性 动态性

2020-10-04 14:38:32 19

原创 css分页——Table表格

简单分页 使用分页为每个页面做导航点击当前页::active鼠标悬停: :hover圆角样式——可以使用border-radius 属性为选中的页码来添加圆角鼠标悬停过渡效果——通过transition属性添加带边框分页——使用border属性圆角边框——在第一个分页链接和最后一个分页链接添加圆角分页间隔——使用margin属性来为每个页码添加空格分页字体大小——font-size居中分页——在容器元素上添加text-align:center; 样式Table表格表格边框——borde

2020-10-04 14:19:30 31

原创 css3弹性盒子

弹性盒子(css3一种新的布局模式)css3弹性盒子, 是一种当页面需要适应不同的屏幕大小以及设备时 , 确保元素拥有恰当的行为布局 , 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列 , 对齐和分配空白空间.属性1、 flex-direction 属性指定了弹性子元素在父容器中的位置; row 横向从左到右排列(左对齐)默认的排序方式 row-reverse 反转横向排序右对齐,从后往前排,最后一项排在最前面; column 纵向排

2020-10-04 00:58:49 3

原创 转换

转换------transform2D转换:可对元素进行移动、缩放、转动、拉长或拉伸,转换的效果是让某个元素改变形状,大小或位置1.rotate 旋转的四种方式rotate()方法:在一个给定度数顺时针旋转的元素,允许负值,即逆时针旋转rotate 定义2D转换 例子:rotate(135deg);rotatex 沿X轴3D旋转 例子:rotatex(145deg);rotatey 沿Y轴3D旋转 例子:rotatey(30deg);rotatez 沿z轴3D旋转

2020-10-04 00:45:04 18

原创 display与visibility可见性、内补白与外补白

display:设置元素应如何显示visibility:指定一个元素可见还是隐藏隐藏元素的方式:① display:none; 但隐藏的元素仍占用与未隐藏之前同样的空间,会影响布局② visibility:hidden;可隐藏元素,且不会占用任何空间display——块和内联元素1\ 块元素是一个元素,占用全部宽度,在前后都是换行符< h1> < p> < div>2\ 内联元素只需必要的宽度,不需要换行< span>< a>.

2020-10-03 23:57:51 14

原创 过渡与渐变

过渡属性:transition:检索或设置过渡效果transition-property:过渡的属性,若值为all,则为全属性transform-duration: 过渡的时间transform-timing-function: 过渡效果transition-delay: 过渡的开始时间

2020-10-03 23:26:57 35

原创 调整元素

调整元素版本支持 :Firefox 4+、Chrome 以及 Safari 不支持 resize。宽:x高:y水平:x垂直:yresize 调整元素:none 不可以调整both 宽高都可以调整vertical 可以调整高度horizontal 可以调整宽度<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;cha

2020-09-28 10:54:43 35

原创 position静态、固定、相对和绝对定位——页面文档流的显示

position定位static { position:static ;}1、静态定位静态定位: 元素不会受到top,bottom,left,right的影响,没有定位,遵循正常的文档流2、固定定位固定定位: 1、Fixed定位在IE7和IE8下需描述<!DOCTYPE>才能支持 2、Fixed定位使元素的位置与文档流无关,因此不占据空间 3、Fixed定位的元素与其他元素重叠3、相对定位相对定位:1、元素的定位是相对于其正常位置2、移动相对定位元素,但他原本所占空间不

2020-09-28 10:04:04 51

原创 css盒子模型——边框边距

边框样式 border-styleborder-style : dashed ;边框线为虚线border-style : solid ;边框线为实线盒子阴影 box-shadow例:box-shadow:10px 10px 10px pink;box-shadow:水平 垂直 模糊度 颜色;盒子阴影的参数:1)水平2)垂直3)模糊度4)阴影尺寸5)阴影颜色6)阴影位置 (inset内阴影)边框圆角 border-radius...

2020-09-23 20:28:51 30

原创 css列表属性与背景属性、定位

列表属性 1) list-style-type:circle; 空心圆 2) float:left; 向左浮动 3) margin-left:...; 外边距居左...像素 4) list-style:none; 清除列表圆点样式 5) padding:2px; 内边距背景属性属性作用background-image设

2020-09-23 08:08:16 22

原创 css颜色属性——hsla以及css下划线

css颜色属性h: 指的是色相/色调s: 指的是饱和度l: 指的是亮度/明度a: 指的是透明度hsla:(240,100%,80%,0.3)css 中的下划线text-decoration文本修饰1、text-decoration:none;——取消下划线,没有文本线2、text-decoration:underline red;——红色下划线3、text-decoration:underline wavy red;——红色波浪线text-decoration下划线CSS单词值参数:

2020-09-22 20:04:51 23

原创 组件双绑的实现与v-model

组件双绑的实现虽然并不推荐在组件内部修改 props ,但是,有的时候确实希望组件内部状态变化的时候改变 props ,我们可以通过子组件触发事件,父级监听事件来达到这个目的,不过过程会比较繁琐,vue 提供了一些操作来简化这个过程v-modelv-model 是 vue 提供的一个用于实现数据双向绑定的指令,用来简化 props 到 data,data 到 props 的操作流程<!DOCTYPE html><html lang="en"><head>

2020-09-22 01:42:34 12

原创 插槽

插槽默认情况下,组件模板解析后会替换整个组件内容,如果我们想在组件引用被包含的内容,可以通过 vue 提供的内置组件 slot 来获取.dialog { position: fixed; left: 50%; top: 30%; transform: translateX(-50%) translateY(-50%) ; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.3); box-si

2020-09-22 01:41:40 13

原创 css字体属性与文本属性

字体属性(style里) { 字体: 样式, 加粗, 大小, 族科, 颜色(顺序不能变)}; { font: intalic , bold , 40px , '楷体' , color:red }分开写: a{ font-size:40px; font-weight:bold; font-family:'仿宋',‘楷体’,‘宋体’; font-style:italic(倾斜); color:red; }文本属性 text-indent(style里)小型大写

2020-09-22 01:37:09 7

原创 css伪元素选择器

伪元素选择器(style里)1:未激活的状态用此样式a:link {color:red;}2:激活后的状态用此样式a:visited{color:cyan;}3:鼠标悬浮的状态用此样式a:hover{color:cyan;}4:鼠标按住时用此样式a:active{color:cyan;}

2020-09-22 01:26:12 11

原创 结构性伪类选择器与倒序版的

css结构性伪类选择器结构性伪类选择器 (style)1:a标签中第一个儿子b采用此样式a b:first-child{color:red}2:a标签中最后一个儿子b采用此样式a b:flast-child{color:red}3:a标签中唯一的一个儿子b采用此样式a b:only-child{color:red}4:a标签中第三个儿子b采用此样式a b:nth-child(3){color:red}5:a标签中奇数儿子b采用此样式a b:fnth-child(odd){color:r

2020-09-22 01:22:25 6

原创 css a 标签的选择器

css a标签的选择器1:a标签第一行采用此样式a:first-line{color:red}2:a标签第一个字母采用此样式a:first-letter{color:green}3:在标签前添加此内容和样式a:before{content:"你真好看"}3:在标签后添加此内容和样式a:after{content:"你真好看"}4:a标签中内容为空的采用此样式a:empty{border:1px solid red}5:a标签中除了选择器为#one的采用此样式a:not(#one){b

2020-09-22 01:15:31 44

原创 css属性选择器

css属性选择器1:匹配a标签中属性为name的采用此样式a[name]{font-size:20px ;color:red};2:匹配a标签中b属性的值是以c字母开头的采用此样式a[b^=c]{color:blue};3:匹配a标签中b属性的值是以c字母结束的采用此样式a[b$=c]{color:purple};4:匹配a标签中b属性的值包含c字母的采用此样式a[b*=c]{color:purple};5:匹配a标签中b属性的值包含c单词的采用此样式a[b~=c]{color:purp

2020-09-22 01:11:33 4

原创 html导入css的方式以及css选择器

html导入css的三种方式1:外链样式< link href="文档与被连接文档之间的关系" type="文件类型" href="被链接文档路径">作用:可用于多个文件2: 内嵌样式< style type="text/css">选择器{属性:"属性值"}</ style>**作用:**用于当前文件3:行内样式<标签名 style="css样式"></标签名>作用:作用于本行三种方式的优先级比较:1\优先级:行内样式优先级最

2020-09-22 01:05:50 10

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除