自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 扶朕起来,朕还能接着编!

HTML: HTML初步认识 HTML骨架及基本语法特性CSS: CSS——关于列表 CSS——div & span CSS——表单和input标签 CSS——常见属性和基础选择器 CSS——后代选择器 CSS——其他选择器(交集/并集/儿子/序) CSS——很多让p变红的方法 CSS——继承性和层叠性 CSS——关于继承性和层叠性的练习 CSS——important和盒

2017-09-06 14:51:19 420

原创 Javascript——常用正则表达式和表单验证

用户名:/^[a-z0-9_-]{3,16}$/密码:/^[a-z0-9_-]{6,18}$/十六进制值:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/电子邮箱:/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/URL:/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/IP 地址:/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][

2020-08-31 22:56:50 47

原创 Javascript——正则表达式的创建方式和边界符

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions正则表达式:用于匹配字符串中字符组合的模式。在Javascript中,正则表达式也是对象。通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。特

2020-08-28 10:42:37 39

原创 Javascript——事件对象和常用的鼠标事件

事件对象:event对象代表事件的状态,比如键盘按键的状态/鼠标的位置/鼠标按钮的状态事件发生后,跟事件相关的一系列信息数据的集合都放到这里,这对象就是事件对象event,有很多属性和方法。事件对象只有有了事件才会存在,是系统给我们自动创建的,不需要传递参数,当我们注册事件时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。事件对象是事件的一系列相关数据的集合,跟事件相关的,比如鼠标点击里面就包含了鼠标的相关信息,如果是键盘事件里面就包含键盘事件的信息,如判断用户按下了哪个

2020-08-22 19:03:48 79

原创 Javascript——冒泡排序和阻止事件冒泡

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。JS代码中只能执行捕获或者冒泡其中的一个阶段onclick和attachEvent只能得到冒泡阶段addEventListener(type,listener[, useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。DOM事件流三个阶段JS代码中只能执行捕获或者冒泡其中的一个阶段onclick和attachE

2020-08-21 20:07:18 61

原创 Javascript——<input>: 输入(表单输入)元素的type和样式属性

<label for="name">Name (4 to 8 characters):</label><input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">label { display: block; font: 1rem 'Fira Sans', sans-serif;}input,label {

2020-08-19 21:15:03 74

原创 Web API——执行事件的步骤 & 操作元素

Javascript的DOM操作可以改变网页内容、结构和样式,可以利用DOM操作元素来改变元素里面的内容、属性等。1.改变元素内容element.innerText:从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。element.innerHTML:起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。...

2020-06-11 23:29:18 59

原创 Web API——获取元素、事件基础

1. 如何获取页面元素DOM在实际开发中主要用来操作元素获取页面中的元素可使用以下几种方式:(1)根据ID获取(2)根据标签名获取(3)根据HTML5新增的方法获取(4)特殊元素获取2. 根据ID获取使用getElementById()方法可以获取带有ID的元素对象element是一个Element对象,如果当前文档中拥有特定ID的元素不存在则返回nullid是大小写敏感的字符串,代表了所要查找的元素的唯一ID//返回的是获取过来元素对象的集合,以伪数组的形式存储document.g

2020-06-11 22:05:56 56

原创 Javascript——字符串对象

1. 基本包装类型把简单数据类型包装成了复杂数据类型,这样基本数据类型就有了属性和方法。var str = 'andy';console.log(str.length);对象才有属性和方法;复杂数据类型才有属性和方法基本包装类型://(1)把简单数据类型包装为复杂数据类型var temp = new String('andy');//(2)把临时变量的值给strstr = temp;//(3)销毁这个临时变量temp = null;为了方便操作基本数据类型,Javascript还

2020-06-07 17:06:10 43

原创 Javascript——数组去重、转换为字符串

数组去重目标:把旧数组里不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。核心算法:遍历旧数组,拿着旧数组元素去查询新数组,如果该元素在新数组里没有出现过,就添加,否则不添加。如何知道该元素有没有存在:利用新数组indexOf(数组元素)如果返回-1,则说明新数组里面没有改元素。 <script> function unique(arr){ var newArr = []; for (var i = 0; i&

2020-06-04 23:00:22 68

原创 Javascript——数组元素添加、删除、排序和索引

添加删除数组元素的方法push()在数组的末尾添加一个或多个数组元素var arr = [1,2,3];arr.push(4,‘pink’);console.log(arr);(1)push可以给数组追加新的元素(2)push()参数直接写数组元素即可(3)push完毕之后,返回的结果是新数组的长度(4)原数组也会发生变化unshift在数组开头,添加一个或多个数组元素console.log(arr.unshift(‘red’,‘purple’));console.log(arr);

2020-06-04 22:09:17 118

原创 Javascript——电商倒计时案例

格式化日期时分秒1.通过Date总的毫秒数,不是当前时间的毫秒数,而是距离1970年1月1号过了多少毫秒数通过valueOf() getTime()var date = new Date();console.log(date.valueOf());console.log(date.getTime());2.简单写法(最常用写法)var date1 = +new Date();//+new Date() 返回总的毫秒数console.log(date1);3.H5新增的获得总的毫秒数c

2020-06-03 21:35:24 63

原创 Javascript——Node属性及方法

Node是一个接口,许多 DOM API对象的类型会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象;比如继承同一组方法,或者用同样的方式测试。在方法和属性不相关的特定情况下,这些接口可能返回 null。当将子节点添加到不允许子节点存在的节点时,它们可能会抛出异常。属性概念Node.baseURI返回一个表示base URL的DOMString。不同语言中的...

2020-02-19 21:28:28 107

原创 Javascript——Document

Document接口表示任何在浏览器中载入的网页,并作为网页内容的入口,也就是DOM树。DOM树包含了像 <body> 、<table>这样的元素,以及大量其他元素。属性概念Document.anchors返回文档中所有锚点元素的列表Document.body返回当前文档的<body> 或 <frameset> 节点...

2020-02-18 21:34:27 45

原创 Javascript——为元素注册事件案例

例:为元素注册事件 <input type="button" value="分离html" id="btn1"/> 先有按钮,才能获取,获取之后才能注册事件 <script> //根据id属性的值从文档中获取元素 var btnObj=document.getElementById("btn"); //...

2020-02-13 21:25:43 69

原创 Javascript——GlobalEventHandlers

参考:https://developer.mozilla.org/en-US/docs/Web/API/ElementGlobalEventHandlers描述了一系列web worker(如HTMLElement, Document, Window或 WorkerGlobalScope)的事件接口。这里面每一个接口都可添加更多的事件句柄。事件属性描述abortonab...

2020-02-09 18:07:24 94

原创 Javascript——KeyboardEvent keyMap

keycodeKeyCodeEscapeEscape27F1F1112(新建标签帮助)F2F2113F3F3114F4F4115F5F5116(快捷键刷新)F6F6117F7F7118F8F8119(debug)F9F9120F10F10121F11F11122(...

2020-02-09 16:08:40 68

原创 JavaScript——构造函数和实例对象之间的关系

实例对象中有个属性,proto,也是对象,叫原型,不是标准属性,浏览器使用的构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用实例对象的原型__proto__和构造函数的原型prototype指向是相同的实例对象中的__proto__原型指向的是构造函数中的原型prototypeconsole.log(per.__proto__==Person.proto...

2019-12-15 17:31:39 59

原创 VUE——生命周期函数组建运行和销毁

</html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/vue-2.4.0.js"></script>...

2019-11-25 22:10:22 324

原创 VUE——使用钩子函数

指令定义函数提供几个钩子函数bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。update:所在组件的VNode更新时调用,但可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可以通过比较更新前后的值来忽略不必要的...

2019-11-24 16:40:56 33

原创 VUE——定义格式化时间的全局过滤器

使用品牌案例部分的代码,修改部分如下。 <td>{{ item.ctime | dateFormat }}</td> <td> <a href="" @click.prevent="del(item.id)">删除</...

2019-11-21 21:04:38 52

原创 VUE——全局过滤器的基本使用

过滤器:Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustachc插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示; //过滤器调用时的格式,{{ name | 过滤器名称 }} Vue.filter('过滤器名称', function(){}) //过滤器中...

2019-11-18 21:46:15 58

原创 VUE——案例同上。根据关键字实现数组过滤

<tbody> <!--之前,v-for中的数据,都是直接从data上的list中直接渲染过来的--> <!--现在,我们自定义一个search方法,同时把所有关键字通过传参的形式,传递给了search方法--> <!--在search方...

2019-11-17 22:44:47 55

原创 VUE——品牌列表案例。这什么案例太难辽。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=...

2019-11-17 15:52:40 52

原创 VUE——v-for中key的使用注意事项,v-if和v-show的使用和特点

当Vue.js用v-for正在更新已渲染过的元素列表时,默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并确保它在特定索引下显示已被渲染过的每个元素。为了给Vue提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一key属性。v-for循环中key属性的使用 <div id=...

2019-11-16 15:57:58 116

原创 VUE——v-for指令的四种使用方式

<div id="app"> <p v-for="(item i) in list">索引值: {{i}} --- 每一项: {{item}}</p> </div> <script> //创建Vue实例,得到ViewModel var vm = new Vue({ ...

2019-11-12 22:31:48 103

原创 VUE——通过属性绑定为元素设置class类样式 /style样式

<head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/vue-2.4.0.js"></script> <style> .red{ color: red; ...

2019-11-11 20:47:07 36

原创 VUE——v-model实现双向数据绑定

<div id="app"> <h4>{{ msg }}</h4> <!--v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定--> <input type="text" v-bind:value="msg"> </div> &...

2019-11-09 18:20:43 35

原创 VUE——事件修饰符

.stop阻止冒泡<body> <div id="app"> <div class="inner" @click="div1handler"> <input type="button" value="戳他" @click="btnHandler"> <!--阻止冒泡是@c...

2019-11-07 21:52:40 47

原创 VUE——跑马灯效果制作

<body> <div id="app"> <input type="button" value="浪起来" @click="lang"> <input type="button" value="低调" @click="stop"> <h4>{{ msg }}</h4>...

2019-11-05 22:42:16 46

原创 VUE——v-bind基本使用和使用v-on指令定义Vue中的事件

v-bind<body> <div id="app"> <!--v-bind: 是vue中提供的用于绑定属性的指令--> <!--<input type="button" value="按钮" v-bind: title="mytitle">--> <input type="...

2019-11-03 17:03:47 72

原创 VUE——v-cloak、v-text和v-html基本使用

v-cloak<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none;...

2019-11-03 16:20:06 39

原创 VUE——MVC、MVVM的关系图解 & vue基本代码

MVVM是前端视图层的分层开发思想,主要把每个页面分成了M、V和VM。其中,VM是MVVM思想的核心;因为VM是M和V之间的调度者。M:保存的是每个页面中单独的数据。VM:是一个调度者,分隔了M和V。每个V层想要获取和保存数据的时候,都要由VM做中间的处理。V:就是每个页面中的HTML结构前端页面中使用MVVM的思想,主要是为了让我们开发更加方便,因为MVVM提供了数据的双向绑定;注意:...

2019-10-29 22:43:17 83

原创 Bootstrap——将菜单改为鼠标滑过(bootstrap-dropdown-hover插件)

官网:bootstrap-hover-dropdown人生有限公司<ul class="nav navbar-nav navbar-right"><!-- 按钮1 --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" d...

2019-09-20 22:09:40 328

原创 Bootstrap笔记4

图片响应式目的:各种终端都需要正常显示图片移动端应该使用更小(体积)的图片实现方式将元素中直接设置的图片背景删除,换成两个data-属性(如:data-img-sm=“小图路径”,data-img-lg=“大图路径”)通过JS的方式获取屏幕宽度判断屏幕宽度是否小于一定的值(如:768)根据判断情况决定使用具体的大图还是小图//获取屏幕宽度var windowWidth=$(wi...

2019-08-24 10:27:47 38

原创 Bootstrap笔记3

基本的轮播图实现<!--以下容器就是整个轮播图组件的整体,注意该盒子必须加上class="carousel slide" data-ride="carousel"表示当前是一个轮播图bootstrap.js会自动为当前元素添加图片轮播特效--><div id="轮播图的id" class="carousel slide" data-ride="carousel"&gt...

2019-08-22 22:16:07 33

原创 Bootstrap笔记2

栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin用于生成更具语义的布局。简介:栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。工作原理:(1)“行(row)”必须包含在.cont...

2019-08-18 21:35:16 29

原创 Bootstrap笔记1

开始使用Bootstrap下载安装:在HTML中引入相应的CSS和JS文件注意:Bootstrap的JS组件依赖于jQueryBootstrap文档:http://v3.bootcss.com/ 中文网视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;视口的...

2019-08-15 23:13:26 24

原创 jQuery——创建元素的案例 | 事件参数对象下的属性

jQuery中判断元素是否存在,是通过包装集的length属性来测试的,通过这个对象.length属性不等于0的方式来判断 <script src="jquery-1.12.1.js"></script> <script> $(function(){ if($("btn1").length!=0){ ...

2019-08-13 22:00:53 31

原创 jQuery——一些乱七八糟的案例和方法

事件触发 <script src="jquery-1.12.1.js"></script> <script> $(function(){ //文本框添加获取焦点的事件 $("#txt").focus(function(){ console.log("获...

2019-08-11 17:06:17 41

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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