前端开发
关注
分享
扫一扫
文章平均质量分 69
我是Dreamer啊
这个作者很懒，什么都没留下…
展开
-
vue笔记：v-for，v-model，记事本案例
v-for根据数据生成列表结构，经常与v-for使用，语法是（item,index） in数据，item和index可以和其他指令一起使用。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-02-02 13:26:03 · 311 阅读 · 0 评论 -
vue中的v-show，v-if，v-bind
v-show根据表达式的真假，切换元素的显示和隐藏。原理是修改display。指令后面的内容可以为布尔值也可以为表达式，最终都会解析为布尔值，值为true时元素显示，为false时元素隐藏。表达式的值改变后，对应元素的状态会更新。<div id="app"> <button @click="changeIsShow">显示隐藏状态切换</button> <button @click="addAge">增加年龄</but原创 2021-02-01 15:02:08 · 329 阅读 · 7 评论 -
vue中的v-text，v-html，v-on属性
v-text设置标签的文本值(textContent)，无论内容是什么，只会解析成为文本。v-text是将数据设置给标签的文本属性，替换文本属性中原来的值，例如上图，通过程序的运行可以看出，高先生替换掉了第一个h2文本属性中的陕西这个值。在v-text属性中也可以使用字符串的拼接，例如：v-htmlv-html改变innerHTML值，内容中有html结构时可以被解析为HTML标签，例如：v-onv-on为元素绑定事件，绑定的方法写在methods属性中。v-on:可以简写为@。原创 2021-01-31 20:25:29 · 1256 阅读 · 0 评论 -
jQuery显示隐藏效果、滑动效果、淡入淡出效果、animate
jQuery效果显示隐藏效果show()、hide()、toggle()show()显示效果show([speed,[easing],[fn]])参数可以全部省略，无动画直接显示。speed：三种预定速度（“slow”,“normal”,“fast”）或者表示动画时常的毫秒数值（如：1000）。easing：用来指定切换效果，默认是"swing",可用参数"linear"。fn：回调函数，在动画完成时执行的函数，每个元素执行一次。hide()隐藏效果hide([speed,[easin原创 2021-01-06 11:38:37 · 610 阅读 · 0 评论 -
jQuery案例--仿淘宝精品栏
jQuery案例–仿淘宝精品栏在淘宝（今天我去找了找没找到）之前会有这样一个小窗口，推荐一些精品的东西，左边有推荐的东西，右边会有图片，鼠标放在商品名称上，商品名称的背景颜色会变成红色，而且右边的图片会变成相对应的图片。今天我们来实现一下这个案例。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" conten原创 2021-01-05 17:46:01 · 648 阅读 · 0 评论 -
jQuery选择器--基础选择器、隐式迭代、筛选选择器、筛选方法以及排他思想、下拉菜单案例
jQuery选择器jQuery基础选择器$("选择器") //里面选择器直接写CSS选择器即可，注意加引号名称用法描述ID选择器$("#id");获取指定ID的元素。全选选择器$("*");获取所有的元素。类选择器$(".class");获取同一类的元素。标签选择器$(“div”);获取统一标签的元素。并集选择器$(“div,span,p”);获取多个元素。交集选择器$(“li.current”);获取交集元素。子代选原创 2021-01-05 16:34:20 · 287 阅读 · 0 评论 -
JavaScript动画实现的原理、动画函数的封装
JavaScript动画实现的原理、动画函数的封装动画实现的原理核心原理是通过定时器setInterval（）不断移动盒子的位置实现步骤：获得盒子当前的位置让盒子在当前位置上加1个位移距离（需要添加定位）利用定时器不断重复这个操作加一个结束定时器的操作<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewpor原创 2021-01-04 11:32:36 · 227 阅读 · 1 评论 -
JavaScript网页生日快乐
JavaScript网页生日快乐最近考试周，没怎么学JS，朋友过生日就顺手写了一个憨憨网页，假装它是一篇新闻。哈哈哈哈有一个算是粉嫩的封面吧，深得pink老师真传…点击生日快乐四个大字的话会变成新闻页有一个祝福视频，有一个背景音乐，还有一个小视频。下面有留言部分，默认三条生日快乐留言，可以删除留言，也可以留言！程序源代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-原创 2020-12-20 19:58:04 · 3365 阅读 · 1 评论 -
JavaScript中的offset、client和scroll
JavaScript中的offset、client和scroll元素偏移量offsetoffset就是元素偏移量，使用offset系列相关属性可以动态的得到该元素的位置（偏移）和大小等。 1. 获取元素距离父元素的位置2. 获得元素自身的大小3. 返回值都不带单位offset系列常用属性offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级元素没有定位则返回bodyelement.offsetTop返回元素相原创 2020-12-12 18:43:10 · 173 阅读 · 1 评论 -
JavaScript网页制作--拖动模态框
JavaScript网页制作–拖动模态框在注册页面，经常会有点击注册弹出一个注册框的情况，有时注册框遮挡住下面信息，需要看到下面信息时，可以拖动注册框。（初学JS，这部分主要做的是拖动框架，在前面的css部分做的并不是很好，望各位看官海涵）网页打开后，出现点击弹出登录框的页面点击之后，出现登录的页面（本来想法是，之前的那句话还在页面下，事不过被一个半透明的图层盖住了，但是做不大明白，在出来这个后把文字隐藏了。按下粉红色区域任何地方，拖动，登录框都会跟着拖动。程序实现：<!DOCTYPE原创 2020-12-09 15:32:36 · 341 阅读 · 1 评论 -
JavaScript网页制作--登录进入首页显示用户名
JavaScript网页制作–登录进入首页显示用户名用户在登录页面输入自己的用户名，在登录后的首页会显示用户的用户名。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录原创 2020-12-06 17:51:56 · 5708 阅读 · 5 评论 -
JavaScript网页制作--五秒后自动跳转页面
JavaScript网页制作–五秒后自动跳转页面通常在浏览一些网站时，会出现网页不存在的情况，网页不存在之后，有些网站会在5秒后自动跳转到一个新的网页，比如网站的首页。可以利用定时器和location属性写自动跳转的页面<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2020-12-06 17:44:46 · 17336 阅读 · 2 评论 -
JavaScript中的lacation对象
JavaScript的lacation对象URL统一资源定位符是互联网上标准资源的地址。互联网上每一个资源都有一个唯一的URL，它包含的信息 指出文件的位置以及浏览器应该怎么处理它。URL的一般格式为：protocol://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/index.html?name=andy&age=18#link组成说明protocol通信协议 常用的http，ftp，maito等原创 2020-12-06 17:42:09 · 241 阅读 · 1 评论 -
什么是JavaScript的同步和异步
JavaScript同步和异步JS语言的一大特点是单线程，同一时间只能做一件事。意味着一件事结束以后 才能进行下一件事。HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是有了同步和异步。同步：前一个任务结束后再执行后一个任务，程序执行顺序与任务的排列顺序是一致的、同步的。异步：在做一件事的同时可以处理其他事件。<!DOCTYPE html><html lang="zh-CN"><head> <meta c原创 2020-12-03 19:44:23 · 1217 阅读 · 0 评论 -
JavaScript网页制作--10秒后再次获取验证码
JavaScript网页制作–10秒后再次获取验证码通常在注册或者登陆页面时，都会需要短信验证码，在点击按钮获取验证码后会有一段时间无法点击按钮，避免短时间内大量的获取验证码。今天制作这样一个功能。功能实现：点击获取验证码后禁用按钮按钮中的文字内容改变，每一秒都改变按钮倒计时变为0时恢复按钮，改回文字，重置倒计时t代码实现：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="U原创 2020-12-01 21:09:49 · 562 阅读 · 1 评论 -
JavaScript网页--跨年倒计时
JavaScript网页–跨年倒计时最近学弟在追一个学妹，我在帮学弟出谋划策。学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再给你答案。于是今天我帮学弟做了一个跨年倒计时的网页，希望他能够坚持下去。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" co原创 2020-12-01 18:34:40 · 3461 阅读 · 11 评论 -
JavaScript定时器setTimeout和setInterval()以及清除定时器
JavaScript定时器setTimeout和setIntervalwindow对象提供了两种好用的计时器：setTimeout()和setInterval()setTimeout()定时器window.setTimeout(调用函数，[延迟的毫秒数])；//window在调用时可以省略延迟时间的单位是毫秒，可以省略，默认为0，立即执行函数。setTimeout()用于设置一个定时器，该定时器到期后执行调用函数。<!DOCTYPE html><html lang="zh-原创 2020-12-01 18:32:38 · 1172 阅读 · 1 评论 -
JavaScript网页制作--京东快递单号查询
JavaScript网页制作–京东快递单号查询上篇讲到了京东网页的一个可能不被大多数人熟知的小功能，S键自动获得焦点，相比于那个功能，这个快递单号查询的功能可能更明了一点，虽然我也觉得很鸡肋。在网页搜索京东快递单号查询后，会出现这样的一个功能，当你在快递单号栏输入快递单号的时候，上方会出现一个较大的文本框，用较大的字体显示出你输入的快递单号。（虽然我觉得字号也没有差很多）功能实现：在输入快递单号的时候，上方出现一个盒子，这个盒子的字号更大。表单检测用户输入，添加键盘事件。将输入框快递单号的值获原创 2020-11-28 18:09:21 · 8048 阅读 · 10 评论 -
JavaScript网页制作--模拟京东按键输入
JavaScript网页制作–模拟京东按键输入在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下S键，就可以将光标定位到搜索栏进行搜索。虽然说这是一个很不错的功能，但是貌似没有几个人知道。程序实现很简单，在s键上升的时候搜索框获得焦点就可以了。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <m原创 2020-11-28 18:04:47 · 554 阅读 · 2 评论 -
JavaScript常用的键盘事件
JavaScript常用的键盘事件键盘事件触发条件onkeyup某个键盘按键被松开时触发onkeydown某个键盘按键被按下时触发onkeypress某个键盘按键被按下时触发（不识别功能键）<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=原创 2020-11-27 20:40:36 · 264 阅读 · 1 评论 -
JavaScript常用的鼠标事件
JavaScript常用的鼠标事件鼠标事件触发事件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠标移动触发ommouseup鼠标弹起触发onmousedown鼠标按下触发<!DOCTYPE html><html lang="zh-CN"><head>原创 2020-11-27 20:40:11 · 379 阅读 · 0 评论 -
JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托
JavaScript事件对象event就是一个事件对象，写在侦听函数的小括号里面当形参来看。事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数事件对象是我们事件的一系列相关数据的集合，根事件相关的信息，如果是鼠标点击事件里面包含了鼠标的相关信息，例如鼠标的坐标等，如果是键盘时间里面就包含了键盘时间的信息，比如用户按下了哪个键。时间对象可以自己命名，不一定非要使用event，比如可以为event、evt、e等存在兼容性问题，IE678通过window.ev原创 2020-11-26 20:53:40 · 745 阅读 · 1 评论 -
JavaScript（DOM）事件流--事件捕获、事件冒泡、阻止事件冒泡
DOM事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流分为3个阶段： 捕获阶段 当前目标段 冒泡阶段JS代码中只能执行捕获或者冒泡其中一个阶段。onclick和attachEvent只能得到冒泡阶段因此，在addEventListener()第三个参数如果是true，则表示捕获阶段调用时间处理程序。吐过第三个参数是false或者为空，则表示在事件冒泡阶段调用事件处理程序。<head> <st原创 2020-11-25 16:47:02 · 662 阅读 · 2 评论 -
JavaScript注册、删除事件的两种方式--传统注册方式、方法监听注册方式
JavaScript注册事件的两种方式–传统注册方式、方法监听注册方式注册事件有两种方式：传统方式和方法监听注册方式。（还有一种IE9以前支持的方式attachEvent注册事件，现在不常用）传统注册方式利用on开头的事件，如onclick。<button onclick = “alert(‘123’)”></button>btn.onclick = function(){}传统事件注册具有唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注原创 2020-11-25 11:20:47 · 1839 阅读 · 2 评论 -
JavaScript(JS)网页--动态生成表格
JavaScript(JS)网页–动态生成表格在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格，加入删除操作，点击删除可以删除此行。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2020-11-23 12:36:14 · 6902 阅读 · 10 评论 -
JavaScript节点操作--创建节点、添加节点、删除节点、复制节点
节点操作创建节点document.createElement('tagName')document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为动态创建元素节点。添加节点node.appendChild(child)node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css中的after伪元素。<body> <ul>原创 2020-11-22 19:36:57 · 14514 阅读 · 2 评论 -
JavaScript(JS)网页--留言板
JavaScript(JS)网页–留言板在使用网页进行冲浪时，经常会发表自己的留言。发布留言的留言板是怎么做的呢？制作一个简单的留言板。首先需要一个textarea框，旁边放置一个按钮，然后需要一个ul标签，里面不需要放置li元素，用CSS加以简单的修饰。紧接着获取元素，在点击按钮后，创建一个li，将文本框里面的赋值给li，将li插入到ul的第一个孩子的前面。<!DOCTYPE html><html lang="zh-CN"><head> <原创 2020-11-20 20:31:39 · 3108 阅读 · 4 评论 -
JavaScript（js）网页--下拉菜单制作
JavaScript（js）网页–下拉菜单制作在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。设计简单的下拉菜单栏<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt原创 2020-11-19 20:40:15 · 16925 阅读 · 10 评论 -
JavaScript（js)节点--父节点、子节点、兄弟节点
JavaScript（js)节点–父节点子节点一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。元素节点 nodeType为1。属性节点 nodeType为2。文本节点 nodeType为3。（文本节点包含文字、空格、换行等）实际开发中节点操作主要操作元素节点。<ul> <li>我是li1</li> <li>我是li2</li> <li&原创 2020-11-19 19:11:44 · 7818 阅读 · 2 评论 -
JavaScript（JS）网页--tab栏制作
JS网页–tab栏制作在网页的制作中，通常会使用到tab栏，例如淘宝，商品详情，规格参数和累计评价三个栏，点击不同的栏下面出现的内容不同。在这样的设计中，JS可以做到。根据淘宝做出默认状态下为商品介绍栏以及对应的文字，鼠标点击其他栏目，点击的栏目背景颜色变红，同时下面的栏目出现点击栏目的解释。程序源码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8">原创 2020-11-19 10:26:20 · 2008 阅读 · 2 评论 -
JavaScript（JS）网页--复选框全选和取消全选
JS网页–全选和取消全选表格，初始状态下复选框都是未选中状态，选中表头的复选框后，下面几个复选框变为选中状态，取消表头复选框选中状态后，下面几个复选框选中状态也随之取消；下面的几个复选框同时选中时，表头的复选框也随之选中。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2020-11-17 18:08:45 · 667 阅读 · 1 评论 -
JavaScript（JS）网页--鼠标经过表格某行时此行变色
鼠标经过表格行变色表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标经过原创 2020-11-17 15:18:59 · 2237 阅读 · 1 评论 -
JavaScript（JS）制作网页--点击图片换背景
JS制作网页–点击图片换背景网页中有四个图片，点击不同的图片，更换相对应的背景。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title>原创 2020-11-17 13:15:21 · 2301 阅读 · 2 评论 -
JavaScript（JS）获取元素、改变元素的内容、修改属性
文档对象模型DOM文档对象模型DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。根据ID获取元素使用getElementByld()方法可以获取带有ID的元素对象。<body> <div id="time"> 2020.11.15 </div> <script> var timer = document.ge原创 2020-11-16 16:06:19 · 21744 阅读 · 1 评论 -
JavaScript（JS）行内式写法、嵌套写法以及外部写法&&JS输入输出语句
JS行内式写法、嵌套写法以及外部写法&&JS输入输出语句JS的三种写法行内式在HTML中编写大量的JS代码时，不方便阅读代码，而且容易引号混乱，在HTML中推荐使用双引号“”，但是在JS中推荐使用单引号‘’。一般只在特殊情况下使用。内嵌JS可以将多行代码写在<script>中，在学习过程中经常使用。外部JS将JS代码写在HTML文件的外部，不仅美观，而且利于代码的复用。适用于JS代码量较大的情况。在JS的引入代码的标签<script sr原创 2020-11-10 14:50:36 · 5766 阅读 · 1 评论 -
CSS高级技巧—精灵技术、字体图标、三角、用户界面样式、表单轮廓、vertical-align属性、文字溢出省略
CSS高级技巧CSS精灵技术为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites、CSS 雪碧）精灵图技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大的图片中，移动背景图图片的位置，可以使用background-position，移动距离就是目标图片的x和y坐标，一般往上往左移动，所以一般是负值。使用精灵图的时候要精确测量每个背景图片的大小和位置。缺点：图片文件比较大；图片本身放大或者缩小会失真；一旦图片制作完成想要更换很复杂。原创 2020-11-06 17:57:54 · 429 阅读 · 1 评论 -
元素的显示与隐藏——display、visibility、overflow
元素的显示与隐藏让一个元素在页面中隐藏或者显示出来display显示隐藏display属性用于设置一个元素如何显示display: nonoe;隐藏对象display: block;除了有将元素转化为块级元素之外，还有显示元素的意思。display属性隐藏元素后，元素不再占有原来的位置。搭配JS可以做很多网页特效。visibility显示隐藏visibility属性用于设置一个元素可见还是隐藏。visibility: visible;元素可视visibility: hidden;元原创 2020-11-05 13:10:38 · 523 阅读 · 1 评论 -
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。定位的组成定位是将盒子定位在某一位置。按照定位的方式移动盒子。定位=定位模式+边偏移。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。定位模式定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：值语义static静态定位relative相对定位absolute绝对定位fixed固定原创 2020-11-05 01:10:12 · 1255 阅读 · 0 评论 -
CSS浮动——浮动的特性、清除浮动
CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示。网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。float属性用于创建浮动框，将其移动到一边，直到做边缘或右边缘触及包含块或另一个浮动框的边缘。语法：选择器: (float: 属性值;)浮动特性 浮动元素会脱离标准流（脱标）。 浮动元素会一行内显示并且元素顶部对齐。 浮动的元素会具有行内块元素的原创 2020-11-04 15:43:27 · 192 阅读 · 0 评论 -
圆角边框、盒子阴影和文字阴影
圆角边框border-radius属性用于设置元素饿外边框圆角。语法：border-radius: length;写一个矩形的盒子，然后设置border-radius: 50%即可得到圆形。圆角矩形可以设置length属性为高的一半length部分参数可以为1个，2个，3个或4个，参数为一个则修改四个角，参数为两个则对角线相同，参数为四个则从左上开始顺时针修改。可以用border-top-left-radius、border-top-right-radius、border-bottom-le原创 2020-11-04 15:42:45 · 175 阅读 · 1 评论