为博客文章加上标签
突然想给博客加个标签，然后说干就干，反正挺简单的，然后效果还不错，美滋滋........
分类：前端
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
木灵鱼儿
HTML
CSS
JavaScript
木灵鱼儿
JavaScript
DOM2级兼容旧版IE创建兼容的loadXML()和.xml方法
前言：由于DOM2不支持load()从外部加载xml文件，所以只能做loadXML()的兼容方法，有点可惜！创建兼容的loadXML()：function createXMLDom(value){ var xmlDom = null; if(typeof window.DOMParser != 'undefined') { xmlDom = (new DOMParser()).parseFromString(value,'text/xml'); //alert((new XMLSerializer()...
木灵鱼儿
JavaScript
《Yodu》预加载如何加载到自己需要的js内容
主题开启预加载可以加快访问速度，但是在一些程度上还是有一些取舍，比如js中的window.onload事件，就会只运行一次，当你进入到下一个页面的收，window.onload里面执行的内容就完全停止了，甚至可以说没有了，有点像是，你吃着吃着突然就换了一个肚子，这样虽然吃的也多，但是不一样了啊，和原来的对不上了，所以我们还是要针对这种情况，让js代码再次运行，这就相当于换了个肚子，还要接上才能用。询问了下泽泽，他说《Yodu》的预加载在footer.php中，在if (isInitialLoad === false) {}中，具体如下图：我们可以看到在这个里面其实有很多if的判断语句，这...
木灵鱼儿
JavaScript
终于给博客的搜索按钮加上了事件切换器
都是辛酸泪，这几天学这个头大，不过好在我搞定了，并且还不会冲突，兼容ie9以上，相当奈斯！2018-10-5 重新做了兼容，虽然没什么卵用，美名其曰优化代码！效果图：原理就是通过修改class的名字来达到隐藏和显示的效果，并且修复了原来动效不能显示的bug。代码部分（css部分我就不提供了）：[hide]//兼容添加事件 function addEvent(obj,type,fn) { if(obj.addEventListener) { obj.addEventListener(type,fn,false); }else if(obj.attachEve...
木灵鱼儿
HTML
修改Typecho个人设置页面的gravatar头像分辨率
因为找了一个个人非常喜欢的头像，美滋滋...提交到gravatar后，默认获取的是220分辨率的头像，压缩的不能看，加上在群里的“月宅”说可以通过头像链接后面的数字修改后就可以获得高清的了，我一想，好了，既然是通过这个获取的，那么博客本身肯定是有预先设置的，于是我就找啊找，终于找到了。[hide]修改的文件路径在：你安装的博客的目录中--admin--profile.php--有一个地方写着数字220，具体位置可以自己通过查看源代码进行对比！下图我也给你标出来了，改成你想要的分辨率，前提你在gravatar中提交的图片够清晰。[/hide]修改好后保存，然后刷新缓存，享受！
木灵鱼儿
CSS
Typecho表格的创建写法和table的css样式分享
之前就听说Typecho的md编辑器支持表格写法了，这次刚好在写一篇文章的时候用到了，所以顺带写了一个css分享出来，很简单的，有需要的可以复制到自己的css文件中。表格的创建写法是：|th内容|th内容| //内容与内容之间都是用|竖线分割 |---------|---| //这里用来分割表头和tbody |内容1|内容2| //需要几行就这样写几行 效果展示：查看有表格的文章CSS代码：table { width: 100%; border: 1px solid #e1e1e1; border-collapse: col...
木灵鱼儿
JavaScript
DOM操作表格及样式（上）
如果要通过js去创建表格元素并添加一定的内容，可以说会让人头疼死，因为你每个元素和内容都需要一个个的去创建去插入，估计写十行表格的代码就可以让你崩溃，每个tr，td都需要documen.createElement('')来创建，还有caption、thead、tbody、tfoot还有内容，于是乎便有了专门应对表格的一些属性和方法，我们一一来介绍下！首先我们要先知道一点：table、th、tbody这三个是没有可以直接创建的对应属性和方法，只能通过documen.createElement('')来创建，不过好在这三个元素重复率不是很多。table对应的属性和方法：属性或方法说明capt...
木灵鱼儿
JavaScript
利用innerHTML传入重复数据
由于每次使用innerHTML都会创建一个浏览器级别的解析器，但是要是使用innerHTML的量大的话，往往会浪费很多资源，特别是在重复传入数据的时候，所以我们可以先使用一个变量来保存这些数据，最后一口气直接传入，这样只使用了一个解析器，省资源又省心。html部分：\<ul id="box"> </ul>\ //博客直接写ul会空白，被解析到了，所以我在前后加了斜杠，这个斜杠不要管它 这是一个空的ul元素，我们给他传入十个li元素；一般写法：var box = document.getElementById('box...
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
自定义insertAfter() 在当前元素节点的后面添加新的内容
由于document中并没有insertAfter()这个功能，只有insertBefore()在当前元素节点的前面添加新的内容，在后面添加是没有的，但是我们可以自己做一个有这个功能得函数。首先有几点前提条件：该元素节点后面有其他同级得节点如果没有同级得节点他应该就是最后一个节点由于我们写html时会有换行得操作，导致产生了空白节点，所以我们还需要移除这个空白节点才能正常操作。我们先写一个简单得html代码：<body> /*这是该元素为最后一个节点*/ <div id="box"> <p>1</p> <...
木灵鱼儿
JavaScript
location.serach查询字符串参数
location.serach获取到链接地址中?后包括?的内容!此时，假设我们的地址是:https://www.mulingyuer.com/测试/?id=5&search=ok通过location.serach可以获得?id=5&search=ok这部分内容，如果我要分别拿到里面对应的内容，就需要使用字符操作了。首先，?问好是第一个要被排除的对象，我们可以利用slice、substring、substr三个区域选择符进行操作。slice，好处是负数是通过总字符数+负数得到需要的区域！substring,好处是：当只有一个负数的时候，不裁剪区域，全出输出，当其中一个数为负数的时候，默认识...
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
木灵鱼儿
JavaScript
关于面向对象判断是否原型属性的疑问
首先我们需要创建一个构建函数，并为它添加一个实例属性（实例就是被运行的函数）。function Box() {}; var box1 = new Box(); box1.name = 'mu'; 每个函数都会有一个原型，原型里的数据是共享的，多个变量box1运行同一个函数Box(),这个Box()函数原型中的数据是共有的，并且引用地址相同。加上就近原则，当实例属性中有对应的属性，会优先调用实例属性，如果没有，就会去原型中查找。那么我们要去判断这个属性是实例中的属性还是原型中的属性，有两个判断语法：hasOwnProperty() / inhasOwnProperty(...
木灵鱼儿
HTML
Phurl短网址生成美化版
在泽泽群有人找我美化一下一个短网址生成的程序，前两天我在改键盘，没来得及弄，昨天搞了一下，感觉还可以，就是nginx环境需要加伪静态才能使用，但是我个人还没到自己写伪静态的地步，所以用了很老的一个伪静态了，这就导致了进入后台时需要写完整的路径名了，这个我们待会再讲。先来点图看看效果：展示网址：点击进入安装方法：将目录内的config.php用编辑器打开，对应填好相对应的账号密码，域名这些就行，具体我都在文件内用中文说明，自行设置好就行将目录内的favicon.ico替换成自己的logo文件，格式名称一致。然后整个上传至服务器内，在面板内设置好网站的一些设置，这些就不细说了，很简单的东西。...
木灵鱼儿
CSS
控制tab的宽度tab-size
上一篇文章我们用渐变背景模拟了斑马纹，这次我们顺带简单了解下如何控制tab的宽度。浏览器默认一个tab是8个字符，这种感人的宽度简直让人吐血，你想想你在编辑器里一个tab才多宽，而且我们有时候经常是三个tab起步啊，这要是在浏览器里显示，简直突破天际，为此css3特意出了一个新属性：tab-size。目前tab-size在日常的浏览器都是支持了，but---除了微软的浏览器，微软的浏览器不知道拖了多少后腿，你想想ie....再到现在的edge，来人，做了他。嗯哼~~~有点扯远了，我们继续。tab-size目前用，建议直接用数字，虽然也能用像素单位这些，但是苹果又不行啊，所以我们还是用数字...
木灵鱼儿
CSS
用渐变来模拟斑马纹
斑马纹应用很广泛，用于表格，代码展示，列表展示等等，一般都是先给每一行加一个block的父元素，然后再用元素选择器:nth-child(odd)和:nth-child(even)来选择奇数元素和偶数元素，这样就会产生一个问题，第一行一般都是标题之类的，这样写会让标题和内容部分相同，于是又只能再加一个选择器:first-child将第一个重置。这样虽然说是可以，但是岂不是很麻烦，需要给每一个子元素加一个block，如果子元素本身就是block那好办，如果不是呢，只是纯文本呢，那不是还要用js去选择，得不偿失，于是我们可以试着用背景层去模拟，然后用em或者rem单位控制大小，这样，既可以自适...
木灵鱼儿
CSS
有趣的hue-rotate滤镜
css3的滤镜真的非常强大，比如这个hue-rotate滤镜，可以让图片的一些颜色变成想要的颜色，当然黑色白色除外，因为这个滤镜的原理就是改变图片的色相，如果你用过ps的话就会知道，再ps里面可以通过改变图片的色相来改变图片的颜色，而且效果很方便，不会有颜色与颜色之前的不自然感。下面我们来看看吧！我门先找一张图片：这张应该是红宝石的壁纸，我们先用ps颜色拾取工具或者红宝石的hsl色环角度。红色hsl为4deg，那么我们试着把他变成紫色的！已知紫色hsl色环值为282deg，我们需要添加多少的角度值才能等于282deg，于是：282-4=278，我们需要添加278deg，于是代码这么写;i...
木灵鱼儿
CSS
CSS3 object-fit/object-position简单了解
从第一次使用yodu的主题，我就很在意他是怎么让首页的文章缩略图居中且填满设置好的大小，而且不会产生形变，然后我f12查看代码的时候看到了这个：object-fit:cover；这个cover很容易理解，和background的cover是一样的，而这个object-fit又是什么意思呢？为此我特意去看了大佬“张鑫旭”的博客，从中获益匪浅！我个人的理解是这样的：首先我们要清楚img他的一些结构原理，为此我就简单画个图方便理解!我们的img是一个元素，img就像是一个div一样，他包裹着里面的图片。而img后面调用的src="xxxx.jpg"就是图片的本体，所以我们理解的时候不要想着图片...
最近评论