SOALIN的博客

原创 面向对象

构造函数function person(name,sex,age){ this.name = name; //this.name属性 name参数 习惯上 属性名称==参数 this.sex = sex; this.age = age; this.show = function(){ alert(this.name+"---"+this.sex+"---"+this.a...

原创 事件

DOM2级事件可以绑定多个事件，松耦合<div id="btn">我是btn</div>var btn = document.getElementById("btn");btn.addEventListener("click", function(){ alert("btn被触发了");});btn.addEventListener("click", f...

原创 计算器

<div id="calculator"> <p> <input type="text" class="formerInput" value="1" /> <span class="sign">+</span> <input type="text" class="laterInput" value="1"...

原创 函数

for…in可以遍历数组和对象var arr = ["html", "js", "jq"];for (p in arr) { console.log(p); // 0 1 2 console.log(arr[p]); // html js jq}var arr = { "html": '结构', "css": '样式', "js": '功能'};for (p i...

原创 变量、作用域和内存

变量基本类型引用类型不可修改可以修改保存在栈内存中保存在堆内存中按值访问按引用访问比较时，值相等即相等比较时，同一引用才相对复制时，创建一个副本复制的是指针按值传递参数按值传递参数用typeof检测类型用instanceof检测类型作用域有局部作用域和全局作用域作用域链用于查询变量，从调用位置想外查询js在es...

原创 DOM操作

创建节点document.createElement() 创建节点document.createTextNode() 创建文本document.createDocumentFragment() 创建文档片段实例var fragment = document.createDocumentFragment(); // 创建文档片段var ul = document.getElement...

原创 svg

视口viewportSVG可见区域的大小，类比于画布实例<svg width="800" height="400"></svg>viewBox相当于在显示器(画布)上截屏时的框，将截取的内容显示出来viewBox="x y width height"x：左上角横坐标y：左上角纵坐标width ： 宽度height：高度坐标S...

原创 sass基础语法

变量$width: 300px; // 定义一个变量width: $width; // 使用定义的变量$str: 'hello.jpeg'; background-image: url('./img/'+$str); // 使用+拼接background-image: url('./img/#{$str}'); // 使用#{}拼接数据类型$width: 300px;/...

原创 拖拽上传

draggable=“true” 页面设置后才可以拖拽dragstart 事件 开始拖动元素时触发drop 事件 拖动过程中，释放鼠标键时触发此事件dragover 事件 被拖动的对象在另一对象容器范围内拖动时触发此事件dragenter 事件 完拖动的对象进入其容器范围内时触发此事件dragleave 事件 拖动的对象离开其容器范围内时触发此事件书写就按照上面的顺序实例&lt...

原创 flex布局

一、Flex 布局是什么？.box{ display: flex;}注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。二、基本概念容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫...

原创 Vue 中的动画特效(二)

Vue中多个元素或组件的过渡元素过渡：元素设置时注意要加上 key 来告诉 Vue 不要复用 DOM ，否则不会出现动画，我们为 transition 设置 mode 即可实现过渡效果.v-enter,.v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1...

原创 Vue 中的动画特效(一)

Vue中的CSS动画原理Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡, transition 的 name 可以替换过度的类名过渡的类名1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在...

原创 走进HTML5 新增标签

新增标签1. 结构标签2. 多媒体标签3. Web应用标签4. 其他标签1. 结构标签结构标签的实质就是有语义的div&amp;amp;lt;article&amp;amp;gt;   &amp;amp;nbsp;&amp;amp;nbsp;定义一篇文章&amp;amp;lt;header&amp;amp;gt;   定义一个页面的头部&amp;amp;lt;nav&amp;amp;gt;    &amp;amp;nbsp;

原创 深入了解 Vue 组件(四)

Vue中的插槽插槽 slot 可以使我们优雅的进行 DOM 的传递

原创 深入了解 Vue 组件(三)

非父子组件间传值定义一个bus属性，将他绑定到 prototype 上，这样每个 Vue 实例都会有 bus 这个属性，通过 bus 来向外触发事件，使用 methods 在被挂载的时候执行，需要注意的是因为作用域发生了变化所以不能直接使用 this ，记得不要修改父组件传过来的值哦&lt;child content="hello"&gt;&lt;/child&gt;&lt;child c...

原创 深入了解 Vue 组件(二)

组件参数校验可以通过 type 来指定子组件接收的参数类型，当指定参数为数字时要给 content 加上 : ,并指定 type 为 Number ，否则接受到的是字符串。 required 可以指定是否必须传参数，当没有传递参数时使用 default 的值，可以在 validator 进行自定义的校验，本例定义传递的参数长度必须大于 5 位&lt;child content="...

原创 深入了解 Vue 组件(一)

组件使用中的细节点因为浏览器的规范，所以有些自定义组件在解析时会出现问题，这时候就需要使用 is 标签来解决&amp;lt;table&amp;gt; &amp;lt;tbody&amp;gt; &amp;lt;tr is=&quot;row&quot;&amp;gt;&amp;lt;/tr&amp;gt; &amp;lt;tr is=&quot;row&quot;&am

原创 Vue 基础精讲(五)

列表渲染v-for 把一个数组对应为一组元素一个对象的 v-forkey数组更新检测setv-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item of items 形式的特殊语法，list 是源数据数组并且 item 是数组元素迭代的别名, v-for 还支持一个可选的第二个参数为当前项的索引&amp;amp;amp;lt;div v-for=...

原创 Vue 基础精讲(四)

条件渲染v-ifv-elsev-else-if用 key 管理可复用的元素v-showv-if vs v-showv-if在 Vue 中我们可以通过 v-if 指令来判断是否渲染这个对象&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &

原创 Vue 基础精讲(三)

Class 与 Style 绑定绑定 HTML Class&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=

原创 Vue 基础精讲(二)

模板语法插值可以标签中的内容替代为对应数据对象上 name 属性的值。无论何时，绑定的数据对象上 name 属性发生了改变，插值处的内容都会更新。{{}}会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令。(v-text等同与{{}})&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head

原创 Vue 基础精讲(一)

Vue 实例创建实例并对实例的数据和方法进行操作创建一个Vue实例，并让其接管id为root的DOM的显示var vm = new Vue({ el: '#root'})

原创 Vue起步

Vue.js 是什么Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。引入Vue&amp;lt;script src=&quot;https://cdn.jsdelivr.net/...

原创 jQuery 事件总结

DOM0级事件和2级事件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;demo&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &

原创 jQuery DOM元素的操作总结二

在页面中操作DOM元素

原创 jQuery DOM元素的操作总结一

创建HTML创建一个div并显示到页面上&amp;amp;lt;script&amp;amp;gt;$(function() { var div = $('&amp;amp;lt;div&amp;amp;gt;Hello&amp;amp;lt;/div&amp;amp;gt;'); console.log(div); div.appendTo('body'); //将div添加到body最后面 console.log(

原创 jQuery选择的艺术

如何使用jQuery下载jQuery &amp;amp;amp;amp;amp;lt;script src=&amp;amp;amp;amp;quot;jquery-3.1.0.js&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;gt;使用CDN

原创 JavaScript之BOM基础

BOM基础

原创 JavaScript之DOM事件

@toc

原创 JavaScript之DOM基础

文章目录标题#1级标题项目项目项目项目1项目2项目3 计划任务 完成任务Ctrl/Command + Shift + H标题

原创 关于子元素的margin-top影响父元素的问题

原创 JavaScript入门

获得元素document.getElementById() document.getElementsByTagName() document.getElementsByClassName()修改HTML内容document.getElementById(id).innerHTML = ‘helloWorld’修改HTML属性element.getAttribute() ele...