木灵鱼儿

木灵鱼儿 7年前 JavaScript

JS 遮罩层

上一篇我们讲了使用伪元素来实现遮罩层，虽然很方便，但是也有一些缺点，比如：z-index需要设置好，由于伪元素是login里面的，所以哪怕伪元素的z-index：-999；也不可能穿透login元素，这样的话，form元素就要设置一下背景色了。无法为伪元素添加点击事件为此我们还可以单独创建一个遮罩层元素，这个元素一般在login元素的上面并且为同级元素，我们可以利用js创建或者先创建好再设置css，我这里选择js创建，虽然麻烦一点，但是显得有技术啊！233...效果图：css部分：.login_Masked { position: absolute; top: 0; ...

3036 0 0

JS 遮罩层

JS 登录弹窗

木灵鱼儿 7年前 JavaScript

JS 登录弹窗

我们需要做一个当用户点击登录按钮时，在页面中央弹出一个登录窗口，然后点击窗口的关闭按钮可以关闭，并且在登录窗口期间会有遮罩层防止用户点击到其他元素，而且此时浏览器是无法滚轮滑动的。先看下效果图：请输入图片描述html代码：<header id="header"> <div class="center"> <img src="https://www.mulingyuer.com/usr/themes/Yodu/images/logo.png" alt="" ...

3169 0 0

JS 登录弹窗遮罩层防止页面滚动

JS 下拉菜单

木灵鱼儿 7年前 JavaScript

JS 下拉菜单

其实普通的下拉菜单使用css就能够完成，但目前我们只是做最基础的操作，了解和学习JS的方法，所以css不太重要。首先我们看下效果图：我们先来分析一下我们js要做什么：第一眼看去，当鼠标滑入个人设置里面，就会显示下拉菜单，那么这个滑入就对应onmouseover事件，当滑入后，下拉菜单弹出，那么这里我们要控制下拉菜单的显示css。当鼠标滑出后，菜单关闭，这里对应onmouseout事件，那么依旧是使用连缀的方式来设置js。html部分：<header id="header"> <div class="center"> ...

6150 0 3

JS 下拉菜单

JS CSS封装库（下）

木灵鱼儿 7年前 JavaScript

JS CSS封装库（下）

添加class上一篇我们通过getClass()可以获取到对应的className的元素对象，现在我们要为对象添加classhtml代码：<style type="text/css"> body { margin: 0; padding: 0; } .das { background: #eee; } .b { color: red; } .a { color: green; } </style>...

3805 0 0

CSS封装库（下）

为博客文章加上标签

木灵鱼儿 7年前 HTML CSS

为博客文章加上标签

突然想给博客加个标签，然后说干就干，反正挺简单的，然后效果还不错，美滋滋........

4749 0 0

反正博客标签

JS CSS封装库（上）

木灵鱼儿 7年前 JavaScript

JS CSS封装库（上）

通过html()来获取对应的元素里的html内容，从上一篇文章继续，我们还是使用连缀的方式：html部分<div id="box" style="color:red;">id</div> <input type="radio" name="sex" value="男" /> <div id="aaa"> <p class="das">标签</p> <p cl...

3307 0 0

CSS封装库 CSS封装库（上）

JS连缀语法

木灵鱼儿 7年前 JavaScript

JS连缀语法

html部分：<div id="box">id</div> <input type="radio" name="sex" value="男" /> <p>标签</p><p>标签</p><p>标签</p><p>标签</p> js连缀写法：window.onload = function() { $().getId('box').css('col...

3964 0 0

原型 JS连缀构造函数

AJAX封装

木灵鱼儿 7年前 JavaScript

AJAX封装

笔记：//创建XHR对象 function createXHR() { if(typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); // ie7+ 及现代浏览器 }else if(typeof ActiveXObject != 'undefined') { var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0',...

3934 0 0

AJAX AJAX封装

为博客添加当你滚动后显示返回顶部等快捷键

木灵鱼儿 7年前 JavaScript

为博客添加当你滚动后显示返回顶部等快捷键

今天学习AJAX封装的时候，整个人是一脸蒙蔽，什么函数回调？传递一个对象就可以把所以内容传进去，然后为什么post无法返回值，因为作用域的问题，但是我自己设置了一个变量去保存，然后我最后也return了，结果还是undefined，索性先放着吧，今天状态不行，就来修复主题bug了，于是做了这个js效果。预览图：

4174 0 1

返回顶部等快捷键

什么是上下文节点？？？

木灵鱼儿 7年前 HTML CSS JavaScript

什么是上下文节点？？？

学html+css的时候有在书上看到过上下文节点，但是也没详细说明，看视频的时候也有人说过，但是也是一笔带过，也没在意，今天学XPath的时候就有关于上下文节点有一个说明，但是只说了一点，没啥详细，所以自己百度了下，如下：代码：<html> <body> <a id = '1'>文本节点1</a> <a id = '2'>文本节点2</a> <a id = '3'>文本节点3</a> ...

4561 0 0

代码 html 文本

DOM2级兼容旧版IE创建兼容的loadXML()和.xml方法

木灵鱼儿 7年前 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()...

3435 0 0

.xml ActiveXObject loadXML

《Yodu》预加载如何加载到自己需要的js内容

木灵鱼儿 7年前 JavaScript

《Yodu》预加载如何加载到自己需要的js内容

主题开启预加载可以加快访问速度，但是在一些程度上还是有一些取舍，比如js中的window.onload事件，就会只运行一次，当你进入到下一个页面的收，window.onload里面执行的内容就完全停止了，甚至可以说没有了，有点像是，你吃着吃着突然就换了一个肚子，这样虽然吃的也多，但是不一样了啊，和原来的对不上了，所以我们还是要针对这种情况，让js代码再次运行，这就相当于换了个肚子，还要接上才能用。询问了下泽泽，他说《Yodu》的预加载在footer.php中，在if (isInitialLoad === false) {}中，具体如下图：我们可以看到在这个里面其实有很多if的判断语句，这...

6698 0 4

《Yodu》预加载预加载

终于给博客的搜索按钮加上了事件切换器

木灵鱼儿 7年前 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...

3774 0 0

代码 css function

YoDu魔改版主题v3.1更新（修复bug）

木灵鱼儿 7年前 HTML CSS

YoDu魔改版主题v3.1更新（修复bug）

YoDu魔改版主题v3.1更新：修复了长代码在小分辨率下无法换行问题。针对表格代码做了样式调整。回复可见代码微调。修复了footer元素由于启用了css3的弹性布局，导致tim使用软件内浏览时，其内核过旧不能支持，特重新调整，改为css2特性，取消了footer的背景渐变。字体大小调整。

5105 0 0

主题样式大小

修改Typecho个人设置页面的gravatar头像分辨率

木灵鱼儿 7年前 HTML

修改Typecho个人设置页面的gravatar头像分辨率

因为找了一个个人非常喜欢的头像，美滋滋...提交到gravatar后，默认获取的是220分辨率的头像，压缩的不能看，加上在群里的“月宅”说可以通过头像链接后面的数字修改后就可以获得高清的了，我一想，好了，既然是通过这个获取的，那么博客本身肯定是有预先设置的，于是我就找啊找，终于找到了。[hide]修改的文件路径在：你安装的博客的目录中--admin--profile.php--有一个地方写着数字220，具体位置可以自己通过查看源代码进行对比！下图我也给你标出来了，改成你想要的分辨率，前提你在gravatar中提交的图片够清晰。[/hide]修改好后保存，然后刷新缓存，享受！

3w 0 36

gravatar头像分辨率

Typecho表格的创建写法和table的css样式分享

木灵鱼儿 7年前 CSS

Typecho表格的创建写法和table的css样式分享

之前就听说Typecho的md编辑器支持表格写法了，这次刚好在写一篇文章的时候用到了，所以顺带写了一个css分享出来，很简单的，有需要的可以复制到自己的css文件中。表格的创建写法是：|th内容|th内容| //内容与内容之间都是用|竖线分割 |---------|---| //这里用来分割表头和tbody |内容1|内容2| //需要几行就这样写几行效果展示：查看有表格的文章CSS代码：table { width: 100%; border: 1px solid #e1e1e1; border-collapse: col...

5698 0 0

Typecho表格css分享

DOM操作表格及样式（上）

木灵鱼儿 7年前 JavaScript

DOM操作表格及样式（上）

如果要通过js去创建表格元素并添加一定的内容，可以说会让人头疼死，因为你每个元素和内容都需要一个个的去创建去插入，估计写十行表格的代码就可以让你崩溃，每个tr，td都需要documen.createElement('')来创建，还有caption、thead、tbody、tfoot还有内容，于是乎便有了专门应对表格的一些属性和方法，我们一一来介绍下！首先我们要先知道一点：table、th、tbody这三个是没有可以直接创建的对应属性和方法，只能通过documen.createElement('')来创建，不过好在这三个元素重复率不是很多。table对应的属性和方法：属性或方法说明capt...

3509 0 0

DOM操作表格及样式

利用innerHTML传入重复数据

木灵鱼儿 7年前 JavaScript

利用innerHTML传入重复数据

由于每次使用innerHTML都会创建一个浏览器级别的解析器，但是要是使用innerHTML的量大的话，往往会浪费很多资源，特别是在重复传入数据的时候，所以我们可以先使用一个变量来保存这些数据，最后一口气直接传入，这样只使用了一个解析器，省资源又省心。html部分：\<ul id="box"> </ul>\ //博客直接写ul会空白，被解析到了，所以我在前后加了斜杠，这个斜杠不要管它这是一个空的ul元素，我们给他传入十个li元素；一般写法：var box = document.getElementById('box...

4400 0 2

innerHTML 浏览器级别的解析器

直接忽略空白节点的另一个方法 children

木灵鱼儿 7年前 JavaScript

直接忽略空白节点的另一个方法 children

之前我分享过一篇关于《自定义insertAfter() 在当前元素节点的后面添加新的内容》的文章中，我提到了在操作时，需要考虑空白节点占据一个子元素位置的说明，我们可以删除或者忽略这个节点，但是会比较麻烦，如果只是想单独获取这个元素的子元素节点数量或者是做一些简单的操作，我们其实可以使用ie的children属性，目前各大浏览器只要不是远古版本，这个属性都是兼容的，写法如下：html部分：<div id="box"> <p>1</P> <p>2</P> <p>3</P>...

3235 0 0

children

自定义insertAfter() 在当前元素节点的后面添加新的内容

木灵鱼儿 7年前 JavaScript

自定义insertAfter() 在当前元素节点的后面添加新的内容

由于document中并没有insertAfter()这个功能，只有insertBefore()在当前元素节点的前面添加新的内容，在后面添加是没有的，但是我们可以自己做一个有这个功能得函数。首先有几点前提条件：该元素节点后面有其他同级得节点如果没有同级得节点他应该就是最后一个节点由于我们写html时会有换行得操作，导致产生了空白节点，所以我们还需要移除这个空白节点才能正常操作。我们先写一个简单得html代码：<body> /*这是该元素为最后一个节点*/ <div id="box"> <p>1</p> <...

4367 0 0

length 代码 html

location.serach查询字符串参数

木灵鱼儿 7年前 JavaScript

location.serach查询字符串参数

location.serach获取到链接地址中?后包括?的内容!此时，假设我们的地址是:https://www.mulingyuer.com/测试/?id=5&search=ok通过location.serach可以获得?id=5&search=ok这部分内容，如果我要分别拿到里面对应的内容，就需要使用字符操作了。首先，?问好是第一个要被排除的对象，我们可以利用slice、substring、substr三个区域选择符进行操作。slice，好处是负数是通过总字符数+负数得到需要的区域！substring,好处是：当只有一个负数的时候，不裁剪区域，全出输出，当其中一个数为负数的时候，默认识...

5811 0 2

对象链接地址

对原型式继承的一些个人理解（不正经系列）

木灵鱼儿 7年前 JavaScript

对原型式继承的一些个人理解（不正经系列）

原型式继承是通过一个公用厕所（函数），在厕所里创建独立包间（创建构建函数），在这个包间的便器上（原型上）传入不明物体（参数），于是这个物体被现实return到你的眼中，然后他就在使用中不断重复利用。代码如下：function wc(ooxx) { function Rbq(){}; Rbq.prototype = ooxx; return new Rbq; }; var shi = { one : '很黑', two : '很硬', three : func...

2819 1 0

原型式继承

对象与原型的继承组合模式中仿冒和继承不会冲突吗？

木灵鱼儿 7年前 JavaScript

对象与原型的继承组合模式中仿冒和继承不会冲突吗？

代码部分：function Box(name) { this.name = name; this.famil = ['爷爷','奶奶','爸爸','妈妈']; }; Box.prototype.run = function() { return this.name + this.famil; }; function Desk(name) { Box.call(this,name); }; Desk.prototype = new Box(); 通过对象仿冒，将Box的属...

4113 1 0

对象爷爷代码

关于面向对象判断是否原型属性的疑问

木灵鱼儿 7年前 JavaScript

关于面向对象判断是否原型属性的疑问

首先我们需要创建一个构建函数，并为它添加一个实例属性（实例就是被运行的函数）。function Box() {}; var box1 = new Box(); box1.name = 'mu'; 每个函数都会有一个原型，原型里的数据是共享的，多个变量box1运行同一个函数Box(),这个Box()函数原型中的数据是共有的，并且引用地址相同。加上就近原则，当实例属性中有对应的属性，会优先调用实例属性，如果没有，就会去原型中查找。那么我们要去判断这个属性是实例中的属性还是原型中的属性，有两个判断语法：hasOwnProperty() / inhasOwnProperty(...

6042 0 2

代码地址 alert

Phurl短网址生成美化版

木灵鱼儿 7年前 HTML

Phurl短网址生成美化版

在泽泽群有人找我美化一下一个短网址生成的程序，前两天我在改键盘，没来得及弄，昨天搞了一下，感觉还可以，就是nginx环境需要加伪静态才能使用，但是我个人还没到自己写伪静态的地步，所以用了很老的一个伪静态了，这就导致了进入后台时需要写完整的路径名了，这个我们待会再讲。先来点图看看效果：展示网址：点击进入安装方法：将目录内的config.php用编辑器打开，对应填好相对应的账号密码，域名这些就行，具体我都在文件内用中文说明，自行设置好就行将目录内的favicon.ico替换成自己的logo文件，格式名称一致。然后整个上传至服务器内，在面板内设置好网站的一些设置，这些就不细说了，很简单的东西。...

5679 0 2

Phurl 短网址生成网址压缩

木灵鱼儿

JS 遮罩层

JS 登录弹窗

JS 下拉菜单

JS CSS封装库（下）

为博客文章加上标签

JS CSS封装库（上）

JS连缀语法

AJAX封装

为博客添加当你滚动后显示返回顶部等快捷键

什么是上下文节点？？？

DOM2级兼容旧版IE创建兼容的loadXML()和.xml方法

《Yodu》预加载如何加载到自己需要的js内容

终于给博客的搜索按钮加上了事件切换器

YoDu魔改版主题v3.1更新（修复bug）

修改Typecho个人设置页面的gravatar头像分辨率

Typecho表格的创建写法和table的css样式分享

DOM操作表格及样式（上）

利用innerHTML传入重复数据

直接忽略空白节点的另一个方法 children

自定义insertAfter() 在当前元素节点的后面添加新的内容

location.serach查询字符串参数

对原型式继承的一些个人理解（不正经系列）

对象与原型的继承组合模式中仿冒和继承不会冲突吗？

关于面向对象判断是否原型属性的疑问

Phurl短网址生成美化版

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

JS 遮罩层

JS 登录弹窗

JS 下拉菜单

JS CSS封装库（下）

为博客文章加上标签

JS CSS封装库（上）

JS连缀语法

AJAX封装

为博客添加当你滚动后显示返回顶部等快捷键

什么是上下文节点？？？

DOM2级兼容旧版IE创建兼容的loadXML()和.xml方法

《Yodu》预加载如何加载到自己需要的js内容

终于给博客的搜索按钮加上了事件切换器

YoDu魔改版主题v3.1更新 （修复bug）

修改Typecho个人设置页面的gravatar头像分辨率

Typecho表格的创建写法和table的css样式分享

DOM操作表格及样式（上）

利用innerHTML传入重复数据

直接忽略空白节点的另一个方法 children

自定义insertAfter() 在当前元素节点的后面添加新的内容

location.serach查询字符串参数

对原型式继承的一些个人理解（不正经系列）

对象与原型的继承组合模式中仿冒和继承不会冲突吗？

关于面向对象判断是否原型属性的疑问

Phurl短网址生成美化版

最近评论

博客文章RSS订阅

博客评论RSS订阅

YoDu魔改版主题v3.1更新（修复bug）