木灵鱼儿

木灵鱼儿 7年前 JavaScript

JS 插件及控制拖拽触发区域

因为拖拽的功能并不是说常用到，基本上就是弹窗之类的会用到，而且拖拽用到的代码会比较多，如果丢到Base的封装库中，比较费资源，所以我们可以将拖拽打包成插件，然后再通过插入的方式调用。什么是插件？就是通过共有的prototype中的方法，来为这个函数添加共有的方法，也就是在Base.prototype.xxx中又创建了一个Base.prototype.xxx方法，然后名称和function通过传参的方式传入。创建插件//插件入口 Base.prototype.extend = function(name, fn) { Base.prototype[name] = fn; }将拖拽方...

2867 0 0

插件及控制拖拽触发区域

JS 修缮拖拽

木灵鱼儿 7年前 JavaScript

JS 修缮拖拽

之前有一篇js的登录框拖拽文章，后面又对事件绑定做了完善，但是当时拖拽用的还是传统事件绑定，这次就做一下修缮。首先就是将对应的事件绑定改为现代事件绑定旧版拖拽功能：Base.prototype.drag = function() { for (var i = 0; i < this.arr.length; i++) { this.arr[i].onmousedown = function(event) { preDef(event); var e = getEvent(even...

3424 0 0

修缮拖拽

JS 事件绑定（超大章）

木灵鱼儿 7年前 JavaScript

JS 事件绑定（超大章）

w3c提供了addEventListener和removeEventListener两个方法，而IE提供的是attachEvent和detachEvent;但是ie的方法有很多问题，那么我们要解决以下这些问题：支持同一个元素同一个事件绑定多个监听函数，如window.onload可以有多个，并且都是可以正常执行的。同一个元素的相同事件注册同一个函数，只会运行一次。函数体内的this应当指向调用该事件的对象本身。监听函数的执行顺序应当按照绑定的顺序执行。在函数体内event对象不使用event||window.event来标准化event对象。跨浏览器添加事件：function addEv...

2991 0 0

事件绑定

call()方法对象冒充

木灵鱼儿 7年前 JavaScript

call()方法对象冒充

call()对象冒充，最直白的记忆方法，就是更改this的指向，比如：document.onclick = function() { fn(); }; function fn() { if (this === window) alert('window'); if (this === document) alert('document'); }这里我们知道，函数里面的函数，this指向的是window，那么我们使用call便可以让this指向document，用法如下：document.onclick = function...

3226 0 0

call方法对象冒充

JS 登录框拖拽

木灵鱼儿 7年前 JavaScript

JS 登录框拖拽

登陆框拖拽是比较常用的功能，拖拽的时候要考虑到不能超出可视区域，并且ie在html的overflow:hidden;的情况下还是会产生滚动条，废话不多说，我们先看下效果图：首先做出拖拽功能：var login = document.getElementById('login'); login.onmousedown = function() { this.onmousemove = function(event) { var e = event || window.event; login.style.top = e.clien...

4078 0 0

JS 登录框拖拽

JS 遮罩层

木灵鱼儿 7年前 JavaScript

JS 遮罩层

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

3123 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="" ...

3250 0 0

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

JS 下拉菜单

木灵鱼儿 7年前 JavaScript

JS 下拉菜单

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

6308 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>...

3875 0 0

CSS封装库（下）

为博客文章加上标签

木灵鱼儿 7年前 HTML CSS

为博客文章加上标签

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

4864 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...

3397 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...

4067 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',...

3994 0 0

AJAX AJAX封装

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

木灵鱼儿 7年前 JavaScript

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

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

4264 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> ...

4663 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()...

3504 0 0

.xml ActiveXObject loadXML

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

木灵鱼儿 7年前 JavaScript

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

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

6861 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...

3862 0 0

代码 css function

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

木灵鱼儿 7年前 HTML CSS

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

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

5223 0 0

主题样式大小

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

木灵鱼儿 7年前 HTML

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

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

3.1w 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...

5811 0 0

Typecho表格css分享

DOM操作表格及样式（上）

木灵鱼儿 7年前 JavaScript

DOM操作表格及样式（上）

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

3583 0 0

DOM操作表格及样式

利用innerHTML传入重复数据

木灵鱼儿 7年前 JavaScript

利用innerHTML传入重复数据

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

4547 0 2

innerHTML 浏览器级别的解析器

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

木灵鱼儿 7年前 JavaScript

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

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

3331 0 0

children

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

木灵鱼儿 7年前 JavaScript

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

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

4475 0 0

length 代码 html

木灵鱼儿

JS 插件及控制拖拽触发区域

JS 修缮拖拽

JS 事件绑定（超大章）

call()方法对象冒充

JS 登录框拖拽

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() 在当前元素节点的后面添加新的内容

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

JS 插件及控制拖拽触发区域

JS 修缮拖拽

JS 事件绑定（超大章）

call()方法 对象冒充

JS 登录框拖拽

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() 在当前元素节点的后面添加新的内容

最近评论

博客文章RSS订阅

博客评论RSS订阅

call()方法对象冒充

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