2018年04月_dongsdh

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月

原创 ajax读取的select选中项，让页面中select对应的option成为选中项

前言：这是ajax调数据的部分代码 <p><span>连接方式</span> <select name="" class="jsaccess"> <option value="Native2">Native2</option> <option va

2018-04-26 22:22:50 3303

原创点击加载b.html,刷新后仍然加载b.html

前言：之前的知识忘记了，现在也没想起来，index.html默认加载a.html,点击导航栏b，加载对应的b.html。需求是，这个状态下，刷新页面任然加载的是b.html，之前是通过hash值判断的，现在忘记怎么做的了，罪过罪过找到资料再更新...

2018-04-23 09:48:19 370

转载实用的css代码

1，基于文件格式使用不同的样式a[href^="http://"]{ padding-right: 20px; background: red;}a[href$=pdf]{ padding-right: 20px; background: green;}<a href="http://www.baidu.com">这里是百度</a> <a href="...

2018-04-17 16:55:09 185

原创选中文本后的颜色和背景：默认是蓝底白字

前言：无意间看到这个小操作，这算什么交互cssp::selection{ color: green; background: red; }html<p>这是一段文本这是一段文本</p>

2018-04-17 15:08:12 1810

原创图片滑动效果实现，鼠标移入当前项显示全部信息

前言：整理之前做的内容，动画执行结束才执行下一个动画动作，要添加.stop(true)html<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &l

2018-04-17 14:40:14 576

原创伸缩栏菜单（左侧伸缩栏，右侧内容）

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *

2018-04-17 14:15:31 5006

转载 event.stopPropagation(); 阻止事件冒泡

html —>head ———>body —————–>div ————————>inputinput和div都有点击事件，由于事件冒泡作用，input框被点击触发事件之后，div的点击事件也要被触发。有的时候根据需要不要进行事件冒泡，需要对其进行阻止① return false; 容易与“浏览器默认动作阻止“混淆 ② event.stopPropagation(); 阻...

2018-04-16 15:22:40 2100

原创 json要用双引号！！！！

JSON是基于Javascript字面量属性的表示方法，但是与Javascript字面量不同，JavaScript对象字面量的键值对可以不用双引号包裹，但是JSON的键必须用双引号包裹，值可以是字符串、数字、bool、null、对象、数组。{ title: "This is my title.", body: "This is the body."}{ 'title'...

2018-04-16 10:37:28 8900 2

看了几个小时原型，复习了一下，在想这个prototype这个在实际项目的运用，到底怎么用。jquery里面是有一大堆这个玩意儿的，但已经是封装好的东西，再说也不是自己的东西。于是，自己查了些资源，搞了个这个东西，也许以后会用上，也许不会用上，就当只是巩固了情景再现：一条鱼只有两条属性function Fish(name,color){ this.name=name; this.color=co...

2018-04-13 15:48:56 206

转载 prototype复习

前言：学习学习，有点懵下面以一个例子来介绍prototype的应用，代码如下：<script language="javascript">//定义一个空类function HelloClass(){}//对类的prototype对象进行修改，增加方法methodHelloClass.prototype.method=function(){alert("prototype测试...

2018-04-13 11:54:15 149

原创 a到b页面，b页面nav变成选中状态

前言：应该有更好的实现方式，这里是用加载资源后each()方式实现，可快速完成目前需求，后续再优化hash实现方式缺点1:要在 header 中 a 标签加 target="_blank" 否则页面header加载部分会“跳动”，体验不好 2:有多少个导航栏，就要加载多少次jquery及index.js及css，是我不想看到的目录结构css.act { background: red...

2018-04-13 10:38:04 671

原创锚点应用(点击a标签滚动到指定的位置)

css #main>div{ height: 400px; border:3px solid red; }html <ul> <li><a href="#aa">文章1</a></li> <li><a href="#bb"&gt

2018-04-12 14:31:24 2877

原创用一套模板，动态显示不同文章

html<ul> <li val="mess1">文章1</li> <li val="mess2">文章2</li> <li val="mess3">文章3</li></ul>js$(function()

2018-04-12 11:29:43 436

原创显示当前时钟及停止

<p>页面上显示时钟：</p><p id="demo"></p><button onclick="myStopFunction()">停止</button>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){

2018-04-12 10:17:30 707

转载纯css3自定义滚动条

前言：找到一个纯css3写的滚动条，以前总觉得，滚动条要用js插件写的，其实可以有更简单的方法。当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。滚动条的css样式主要有...

2018-04-11 15:26:15 437

原创原型上给数组添加一个自定义的方法

前言：创建了新的数组方法用于将数组小写字符转为大写字符。Array.prototype.myUcase=function(){ for (i=0;i<this.length;i++){ this[i]=this[i].toUpperCase(); }}myFunction();function myFunction(){ var fruits = ["Banana", "Or...

2018-04-10 13:53:46 2047

原创自定义数组

方式1var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";console.log(mycars)//["Saab", "Volvo", "BMW"]方式2var mycars = [];mycars[0] = "Saab";mycars[1] =

2018-04-10 11:58:44 974

原创获得对象中的键或值

复习：myFunction();function myFunction(){ var person={fname:"Bill",lname:"Gates",age:56}; for(var i in person){ console.log(i) //获得对象中键值对的“键” console.log(person[i]) //获得对象中键值对的“值” }}...

2018-04-10 11:11:01 8050

原创使用对象构造器应用

场景介绍：mother原来叫Sally,后来改名叫Doefunction person(firstname, lastname, age, eyecolor) { this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor; this.changeName =...

2018-04-10 11:00:15 173

原创创建直接的实例-使用对象构造器

前言：依赖库，只是应用；掌握核心，才能创造。复习JavaScript原生，一点一点记录。function fun(name,firstname,age,color){ this.name=name; this.firstname=firstname; this.age=age; this.color=color;}var people1=new fun("sudonghao","su"...

2018-04-10 10:44:51 161

原创 js一段文本，文字一个字一个字出现，像打字一样

实现方式1<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){

2018-04-10 09:32:27 10915 5

原创父与子通信

<my-label labelName="用户名"></my-label>这条数据my-login父级发给子级这条数据my-label子级接受到了props:['labelName']，这子级就接收到了<!DOCTYPE html><html><head lang="en"> <meta charset=

2018-04-09 15:59:09 126

原创 props:['myValue']接受父级的数据

<child-component :myValue="gift"></child-component><child-component myValue="money"></child-component>:myValue="gift"数据绑定和myValue="money"数据绑定是有区别的区别在于有没有签名那个冒号

2018-04-09 15:38:35 472

原创 vue绑定图片地址及其他常规dom操作

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

2018-04-09 15:12:07 1329

原创通过methods来定义需要用到的方法

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

2018-04-09 15:00:16 947

原创实例创建好之后，自定的调用的方法created

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

2018-04-09 14:56:04 920

原创选择指令

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

2018-04-09 14:53:31 245

原创 data数据为sex的value为1或0，呈现的时候显示为“男”或“女”

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

2018-04-09 14:50:52 9046

原创 vue的v-for循环指令

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

2018-04-09 14:42:22 2969

转载 loading...动画的新方式（\A换行，循环运动）

css* { margin: 0; padding: 0;}dot { display: inline-block; height: 1em; line-height: 1; vertical-align: -.25em; overflow: hidden;}dot::before { display: block; content: ...

2018-04-08 15:01:17 303

转载 :default伪类选择器只能作用在表单元素上，表示默认状态的表单元素。

前言 :default伪类选择器只能作用在表单元素上，表示默认状态的表单元素。且只有当checked为true时，:default伪类选择器才会起作用。选择其他项时，“推荐”的选项不变。根据需求，要维护的时候只需更换input的checked的属性，给予用户默认推荐。cssinput:default + label::after { content: '（推荐）';}html<p&...

2018-04-08 14:26:08 262

转载 opacity实现渐变过渡

css* { margin: 0; padding: 0;}.box { max-width: 400px; height: 200px; background: linear-gradient(to right, olive, green); position: relative; z-index: 0; }.box::before { ...

2018-04-08 14:06:03 6598

原创 background-color实现渐变过渡

css* { margin: 0; padding: 0;}.box { max-width: 400px; height: 200px; background: red linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5)); background-size: 200%; transition: backgrou...

2018-04-08 14:02:06 33655

转载 background-position实现渐变过渡

前言：前辈的想法总是那么出乎意外，background-size:200%,背景色是两个单位的位置CSS* { margin: 0; padding: 0;}.box { max-width: 400px; height: 200px; background: linear-gradient(to right, red, green, #024); background-size:...

2018-04-08 13:52:17 1380

原创精简版reset.css

前言：总结前辈的经验，写最精简实用的东西。相比于以前的reset重置，省去了太多东西有一些reset感觉还是少了一下，也许大神的想法和我们的不一样。我其实想站在别人的肩膀看得更远。比如1）a标签默认有下划线，这里是没有进行取消下划线的重置。比如2）input type=number时，框中还是有上下箭头按钮。比如3）。。。总结：按需求添加重置。也许需求不会有上面两种情况呢，对吧body{ ...

2018-04-08 10:05:19 2933 1

转载尝试一种新的布局方式

前言：总结前辈的经验，尝试一种的新的布局方式，用定位后可省去多余的层级嵌套标签，方便实用对定位要点要熟悉css *{box-sizing: border-box;margin: 0; padding: 0;} .box{ position: relative; border: 1px solid #ddd; height: 82px; ...

2018-04-08 09:25:04 145

原创 css-背景图设置大小单位可以是百分比，或者px

前言：之前只用了background-size的百分比单位，用px单位不会失真，看项目具体情况了css .box { width: 300px; height: 300px; border: 1px solid #ddd; } .imgbox { width: 100%; height: 100...

2018-04-04 11:12:42 2436

转载利用css实现鼠标经过元素，下划线由中间向两边展开

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鼠标移入下划线展开</title><style type="text/css">#underline{

2018-04-04 10:51:17 2983

原创纯css导航栏下标线跟随效果

前言:看着效果不错，仿做了一下，其实就是c3动画移动div伪装的下边框线主要：li的结束标签与第二项的li开始标签不要有空格及换行，消除间隙css* { box-sizing: border-box; } * { margin: 0; padding: 0; } #main { position: relative; ...

2018-04-04 10:38:58 2181

原创 layui中的layer模块运用

前言：layer文档中是这样解释的：再次强调 layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>2开始使用Layui中的layer模块</title..

2018-04-03 17:34:21 1782 1