- 博客(43)
- 资源 (1)
- 收藏
- 关注
原创 vue子组件和父组件传值
vue子组件和父组件传值近期在学习vue,总结了一下子组件和父组件间传值的方法:父组件向子组件传值子组件向父组件传值父组件向子组件传值 父组件向子组件传递数据主要通过props来进行传递。子组件想使用子组件的方法,要通过$emit来调用。示例在父组件中使用子组件,并且向其传递数据,子组件同时调用父组件的方法页面中:<div id="a...
2018-06-19 15:33:33 1638
原创 前端自动化构建工具gulp
最近闲来没事,研究了一下前端自动化构建工具gulp,只需五步,你就可以掌握并使用它简化你的前端开发任务。第一步:安装node(nodeJS官网:https://nodejs.org/en/) gulp依赖于node环境,进入官网,点击下载,然后进行安装。安装的同时,npm也会随着安装包一起安装。第二步:使用命令行(如果不知道命令行,可使用快捷键:window+R之后输入cmd点击确定或者点击电
2016-11-07 15:33:53 629
原创 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 1003
转载 document.body.clientHeight返回值为0的解决方案
最近在做一个div内容高度在不同浏览器下的高度自适应,发现document.body.clientHeight的返回值为0.网上查了一下, 貌似有很多个解决方案。 1. 使用document.documentElement.clientHeight获取。 当使用html5的时候,就会有documentElement在document下。 如上图所示 , 左边为c
2016-01-12 10:03:32 16307
原创 HTML5之拖放属性实现图片的拖放
HTML5中实现拖放操作,至少经过如下步骤 1)设置被拖放对象元素的draggable属性设置为true 2)编写与拖放有关的事件处理代码事件产生事件的元素描述dragstart被拖拽物体开始拖放dragenter被拖拽物体开始进入区域进入范围dragover拖放过程中鼠标经过的
2015-12-30 11:24:20 5267 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 3998
原创 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 492
原创 纯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 934
转载 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 9570 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 472
转载 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 404
转载 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 556
原创 jQuery过滤性选择器
:first过滤选择器 $(“li:first”)注意:书写时以“:”号开头。运行结果: 使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.:first过滤选择器的功能是获取第一个元素,常常与其它选择器一起使用,获取指定的一组元素中的第一个元素。:last选择器 $("li:last").css("bac
2015-09-22 16:33:25 727
原创 jQuery 基础选择器
#id 选择器(使用身份证号来找人)jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id")其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。例如:在浏览器中显示的效果:从图中可以看出,通过#id选择器的方式获取元素,并在元素中调用html()方
2015-09-22 16:29:53 440
原创 纯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 539
原创 js之DOM操作(创建文本节点createTextNode)
创建文本节点createTextNodecreateTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。语法:document.createTextNode(data)参数:data : 字符串值,可规定此节点的文本。demo:无标题文档.message{ width:200px; height:100px; bac
2015-09-21 18:13:45 3734
原创 js之DOM操作(创建元素节点createElement)
创建元素节点createElementcreateElement()方法可创建元素节点。此方法可返回一个 Element 对象。语法:document.createElement(tagName)参数:tagName:字符串值,这个字符串用来指明创建元素的类型。注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。
2015-09-21 18:05:22 6062
原创 js之DOM操作(替换元素节点replaceChild())
替换元素节点replaceChild()replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 语法:node.replaceChild (newnode,oldnode ) 参数:newnode : 必需,用于替换 oldnode 的对象。 oldnode : 必需,被 newnode 替换的对象。demo:无标题文档 Java
2015-09-21 17:48:27 15058
原创 js之DOM操作(删除节点removeChild())
删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。语法:nodeObject.removeChild(node)参数:node :必需,指定需要删除的节点。注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。
2015-09-21 17:32:06 28716 1
原创 js之DOM操作(插入节点insertBefore())
插入节点insertBefore()insertBefore() 方法可在已有的子节点前插入一个新的子节点。语法:insertBefore(newnode,node);参数:newnode: 要插入的新节点。node: 指定此节点前插入节点。我们在来看看下面代码,在指定节点前插入节点。无标题文档 JavaScript HTML
2015-09-21 12:18:08 9895
原创 js之DOM操作(插入节点appendChild())
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点。语法:appendChild(newnode)参数:newnode:指定追加的节点。demo:无标题文档 JavaScript HTML var otest = document.getElementById("test"); va
2015-09-21 12:11:35 3777
原创 js之DOM操作(访问兄弟节点)
访问兄弟节点1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。语法:nodeObject.nextSibling说明:如果无此节点,则该属性返回 null。2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。语法:nodeObject.previousSibling 说明:如果无此节点,则该
2015-09-21 12:00:02 9624
原创 js之DOM操作(访问父节点parentNode)
访问父节点parentNode获取指定节点的父节点语法:elementNode.parentNode注意:父节点只能有一个。看看下面的例子,获取 P 节点的父节点,代码如下: parentNode 获取指点节点的父节点 var mynode= document.getElementById("con"); document.write(mynode.pa
2015-09-21 11:38:45 2594
原创 js之DOM操作(访问子节点和最后一个节点)
访问子结点的第一和最后项一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。语法:node.firstChild说明:与elementNode.childNodes[0]是同样的效果。 二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回
2015-09-21 11:28:21 13180
原创 js之DOM操作访问子结点childNodes
访问子结点childNodes访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。语法:elementNode.childNodes注意:如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。我们来看看下面的代码:运行结果:IE: UL子节点个数:3 节点类型:1其它浏览器:UL子节点个数:7节
2015-09-21 11:14:59 876
原创 js之节点属性
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :1. nodeName : 节点的名称2. nodeValue :节点的值3. nodeType :节点的类型一、nodeName 属性: 节点的名称,是只读的。1. 元素节点的 nodeName 与标签名相同2. 属性节点的 nodeName 是属性的名称3. 文本节
2015-09-20 16:40:55 491
原创 JS之dom操作getAttribute()方法
getAttribute()方法通过元素节点的属性名称获取属性的值。语法:elementNode.getAttribute(name)说明:1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。2. name:要想查询的元素节点的属性名字demo:getAttribute()
2015-09-20 16:10:46 2256
原创 js之DOM操作中获取属性方法
getElementsByName()方法返回带有指定名称的节点对象的集合。语法:document.getElementsByName(name)与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。注意:1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组
2015-09-18 18:04:44 4976
原创 js制作一个跳转提示页面
1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址2. 如果点击“返回”按钮则返回前一个页面。 浏览器对象 操作成功 5秒后自动跳到主页返回 window.onload=function(){ var seconds = document.getElementById("seconds").in
2015-09-18 15:48:54 743
原创 js之screen对象
screen对象screen对象用于获取用户的屏幕信息。语法:window.screen.属性对象属性:屏幕分辨率的高和宽window.screen 对象包含有关用户屏幕的信息。1. screen.height 返回屏幕分辨率的高2. screen.width 返回屏幕分辨率的宽注意:1.单位以像素计。2. window.screen 对象在编写时可
2015-09-18 09:02:16 2470
原创 js之Navigator对象
Navigator对象Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。对象属性:DEMO:无标题文档 document.write(navigator.appName + ""); document.write(navigator.platform + ""); document.write(navigator.appC
2015-09-18 08:52:05 548
原创 js之location对象
Location对象location用于获取或设置窗体的URL,并且可以用于解析URL。语法:location.[属性|方法]location对象属性图示:location 对象属性:location 对象方法:demo:location alert( location.href);
2015-09-17 18:15:31 313
原创 js之History对象
History 对象history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。语法:window.history.[属性|方法]注意:window可以省略。History 对象属性History
2015-09-17 17:23:36 3370
原创 js之计时器
计时器setInterval()在执行时,从载入页面后每隔指定的时间执行代码。语法:setInterval(代码,交互时间);参数说明:1. 代码:要调用的函数或要执行的代码串。2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。返回值:一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。调用函数
2015-09-17 16:37:20 1355
原创 js之Array数组对象属性及方法
数组属性:length 用法:.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。数组方法:常用方法详细说明:数组连接concat()concat() 方法用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组。语法arrayObject.concat(array1,array2
2015-09-17 10:02:20 896
原创 string对象之返回指定位置的字符
string对象之返回指定位置的字符 var mystr="I love JavaScript!" /* * 使用charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。 语法:stringObject.charAt(index) 注意: 1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一(stri
2015-09-17 09:19:48 2560
原创 欢迎使用CSDN-markdown编辑器
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
2015-09-17 09:18:27 348
原创 js实现两数之前加减乘除操作
事件 function count(){ //获取第一个输入框的值 var tex1 = parseInt(document.getElementById("txt1").value); //获取第二个输入框的值 var tex2 = parseInt(document.getElementById("txt2").va
2015-09-16 17:45:20 3523
原创 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 790
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人