_我就是愛自由-CSDN博客

原创 vue子组件和父组件传值

vue子组件和父组件传值近期在学习vue，总结了一下子组件和父组件间传值的方法：父组件向子组件传值子组件向父组件传值父组件向子组件传值父组件向子组件传递数据主要通过props来进行传递。子组件想使用子组件的方法，要通过$emit来调用。示例在父组件中使用子组件，并且向其传递数据，子组件同时调用父组件的方法页面中：&lt;div id="a...

2018-06-19 15:33:33 1625

原创前端自动化构建工具gulp

最近闲来没事，研究了一下前端自动化构建工具gulp，只需五步，你就可以掌握并使用它简化你的前端开发任务。第一步：安装node（nodeJS官网：https://nodejs.org/en/） gulp依赖于node环境，进入官网，点击下载，然后进行安装。安装的同时，npm也会随着安装包一起安装。第二步：使用命令行（如果不知道命令行，可使用快捷键：window+R之后输入cmd点击确定或者点击电

2016-11-07 15:33:53 617

原创 app framework 内置图标

ul class="list inset"> li class="icon add">添加li> li class="icon busy">繁忙li> li class="icon chat">信息li> li class="icon close">关闭li> li class="icon database">数据库li> li class="ico

2016-04-12 16:49:56 984

转载 document.body.clientHeight返回值为0的解决方案

最近在做一个div内容高度在不同浏览器下的高度自适应，发现document.body.clientHeight的返回值为0.网上查了一下，貌似有很多个解决方案。 1. 使用document.documentElement.clientHeight获取。当使用html5的时候，就会有documentElement在document下。如上图所示，左边为c

2016-01-12 10:03:32 16104

原创 HTML5之拖放属性实现图片的拖放

HTML5中实现拖放操作，至少经过如下步骤 1）设置被拖放对象元素的draggable属性设置为true 2）编写与拖放有关的事件处理代码事件产生事件的元素描述dragstart被拖拽物体开始拖放dragenter被拖拽物体开始进入区域进入范围dragover拖放过程中鼠标经过的

2015-12-30 11:24:20 5232 1

原创纯css3实现点击缩略图切换背景图

1：html页面部分：html>html lang="en">head> meta charset="UTF-8"> title>纯css3实现背景图片切换效果title> link rel="stylesheet" href="css/main.css">head>body>main role="main"> 缩略图【start】

2015-12-22 16:20:55 3982

原创 css3实现不一样的下拉菜单框

html>html lang="en">head> meta charset="UTF-8"> title>css3实现不一样的下拉菜单title> style> /* * css3实现不一样的下拉菜单 css */ body { background: #F3F3F3

2015-12-17 11:13:01 479

原创纯css3实现正在加载动画

html>html lang="en">head> meta charset="UTF-8"> title>加载动画title> style> /* 加载动画.html css */ #load_bg { width: 100%; height:

2015-12-16 16:21:05 922

转载 HTML5使用 getUserMedia方法调用本地摄像头拍照

html>html lang="en">head> meta charset="UTF-8"> title>html5 调用本地摄像头title>head>body>video id="video" autoplay="autoplay" style='width:640px;height:480px'>video>button id='picture'>PICTURE

2015-12-16 13:55:14 9527 3

转载 jquery操作table

Jquery Table 的基本操作（原文链接：http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html）Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table：table{ border-col

2015-12-08 11:19:05 461

转载 jquery操作select、checkbox、radio控件

Jquery 操作Html 控件 CheckBox、Radio、Select 控件（原文链接：http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html）在使用 Javascript 编写前台脚本的时候，经常会操作 Html 控件，比如 checkbox、radio、select，用 Jquery 库操作其他会方便

2015-12-08 11:17:40 396

转载 jQuery操作表格

Jquery Table 的基本操作（原文链接：http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html）Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table：table{ border-col

2015-12-08 11:12:08 550

原创 jQuery过滤性选择器

:first过滤选择器 $(“li:first”)注意：书写时以“：”号开头。运行结果：使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。:last选择器 $("li:last").css("bac

2015-09-22 16:33:25 646

原创 jQuery 基础选择器

#id 选择器(使用身份证号来找人)jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素，就可以使用如下格式的选择器：$("#my_id")其中#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。例如：在浏览器中显示的效果：从图中可以看出，通过#id选择器的方式获取元素，并在元素中调用html()方

2015-09-22 16:29:53 426

原创纯js选项卡切换

实践题 - 选项卡* { padding: 0; margin: 0; list-style:none;}#tabs{ width:60%; margin:10px auto;}.title { border-bottom: 2px solid #8B4513; height: 30px;}.title a { hei

2015-09-22 11:16:55 524

原创 js之DOM操作（创建文本节点createTextNode）

创建文本节点createTextNodecreateTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。语法：document.createTextNode(data)参数：data : 字符串值，可规定此节点的文本。demo：无标题文档.message{ width:200px; height:100px; bac

2015-09-21 18:13:45 3696

原创 js之DOM操作（创建元素节点createElement）

创建元素节点createElementcreateElement()方法可创建元素节点。此方法可返回一个 Element 对象。语法：document.createElement(tagName)参数:tagName：字符串值，这个字符串用来指明创建元素的类型。注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

2015-09-21 18:05:22 6025

原创 js之DOM操作（替换元素节点replaceChild()）

替换元素节点replaceChild()replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。语法：node.replaceChild (newnode,oldnode ) 参数：newnode : 必需，用于替换 oldnode 的对象。 oldnode : 必需，被 newnode 替换的对象。demo：无标题文档 Java

2015-09-21 17:48:27 14918

原创 js之DOM操作（删除节点removeChild()）

删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。语法:nodeObject.removeChild(node)参数:node ：必需，指定需要删除的节点。注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

2015-09-21 17:32:06 28649 1

原创 js之DOM操作（插入节点insertBefore()）

插入节点insertBefore()insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法:insertBefore(newnode,node);参数:newnode: 要插入的新节点。node: 指定此节点前插入节点。我们在来看看下面代码，在指定节点前插入节点。无标题文档 JavaScript HTML

2015-09-21 12:18:08 9737

原创 js之DOM操作（插入节点appendChild()）

插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点。语法:appendChild(newnode)参数:newnode：指定追加的节点。demo：无标题文档 JavaScript HTML var otest = document.getElementById("test"); va

2015-09-21 12:11:35 3750

原创 js之DOM操作（访问兄弟节点）

访问兄弟节点1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。语法：nodeObject.nextSibling说明：如果无此节点，则该属性返回 null。2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。语法：nodeObject.previousSibling 说明：如果无此节点，则该

2015-09-21 12:00:02 9577

原创 js之DOM操作（访问父节点parentNode）

访问父节点parentNode获取指定节点的父节点语法：elementNode.parentNode注意:父节点只能有一个。看看下面的例子,获取 P 节点的父节点，代码如下: parentNode 获取指点节点的父节点 var mynode= document.getElementById("con"); document.write(mynode.pa

2015-09-21 11:38:45 2554

原创 js之DOM操作（访问子节点和最后一个节点）

访问子结点的第一和最后项一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。语法：node.firstChild说明：与elementNode.childNodes[0]是同样的效果。二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回

2015-09-21 11:28:21 13102

原创 js之DOM操作访问子结点childNodes

访问子结点childNodes访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。语法：elementNode.childNodes注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。我们来看看下面的代码:运行结果:IE: UL子节点个数:3 节点类型:1其它浏览器:UL子节点个数:7节

2015-09-21 11:14:59 855

原创 js之节点属性

节点属性在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：1. nodeName : 节点的名称2. nodeValue ：节点的值3. nodeType ：节点的类型一、nodeName 属性: 节点的名称，是只读的。1. 元素节点的 nodeName 与标签名相同2. 属性节点的 nodeName 是属性的名称3. 文本节

2015-09-20 16:40:55 475

原创 JS之dom操作getAttribute()方法

getAttribute()方法通过元素节点的属性名称获取属性的值。语法：elementNode.getAttribute(name)说明:1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。2. name：要想查询的元素节点的属性名字demo：getAttribute()

2015-09-20 16:10:46 2233

原创 js之DOM操作中获取属性方法

getElementsByName()方法返回带有指定名称的节点对象的集合。语法：document.getElementsByName(name)与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。注意:1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组

2015-09-18 18:04:44 4920

原创 js制作一个跳转提示页面

1. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址2. 如果点击“返回”按钮则返回前一个页面。浏览器对象操作成功 5秒后自动跳到主页返回 window.onload=function(){ var seconds = document.getElementById("seconds").in

2015-09-18 15:48:54 688

原创 js之screen对象

screen对象screen对象用于获取用户的屏幕信息。语法：window.screen.属性对象属性:屏幕分辨率的高和宽window.screen 对象包含有关用户屏幕的信息。1. screen.height 返回屏幕分辨率的高2. screen.width 返回屏幕分辨率的宽注意:1.单位以像素计。2. window.screen 对象在编写时可

2015-09-18 09:02:16 2450

原创 js之Navigator对象

Navigator对象Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。对象属性:DEMO：无标题文档 document.write(navigator.appName + ""); document.write(navigator.platform + ""); document.write(navigator.appC

2015-09-18 08:52:05 533

原创 js之location对象

Location对象location用于获取或设置窗体的URL，并且可以用于解析URL。语法:location.[属性|方法]location对象属性图示:location 对象属性：location 对象方法:demo：location alert( location.href);

2015-09-17 18:15:31 301

原创 js之History对象

History 对象history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。语法：window.history.[属性|方法]注意：window可以省略。History 对象属性History

2015-09-17 17:23:36 3339

原创 js之计时器

计时器setInterval()在执行时,从载入页面后每隔指定的时间执行代码。语法:setInterval(代码,交互时间);参数说明：1. 代码：要调用的函数或要执行的代码串。2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。返回值:一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。调用函数

2015-09-17 16:37:20 1337

原创 js之window对象操作

window对象是BOM的核心，window对象指当前的浏览器窗口。window对象方法:

2015-09-17 15:50:22 4431

原创 js之Array数组对象属性及方法

数组属性：length 用法：.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。数组方法：常用方法详细说明：数组连接concat()concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。语法arrayObject.concat(array1,array2

2015-09-17 10:02:20 877

原创 string对象之返回指定位置的字符

string对象之返回指定位置的字符 var mystr="I love JavaScript!" /* * 使用charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。语法:stringObject.charAt(index) 注意： 1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（stri

2015-09-17 09:19:48 2520

原创欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2015-09-17 09:18:27 336

原创 js实现两数之前加减乘除操作

事件 function count(){ //获取第一个输入框的值 var tex1 = parseInt(document.getElementById("txt1").value); //获取第二个输入框的值 var tex2 = parseInt(document.getElementById("txt2").va

2015-09-16 17:45:20 3494

原创 js常见表单验证代码

常用JS表单验证实例 1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符！"); document.a.b.focus(); return false; } } 2. 只能是汉字 3." 只能是英文 function onlyEng()

2015-02-02 09:38:02 773

C 语言程序大全

空空如也