Skip to content

Instantly share code, notes, and snippets.

View JobbyM's full-sized avatar
🎯
Focusing

JobbyM

🎯
Focusing
View GitHub Profile
@JobbyM
JobbyM / 26.js
Created June 27, 2017 01:34
倒序排列节点n 的子节点
// 倒序排列节点n 的子节点
function reverse(n){
// 创建一个DocumentFragment 作为临时容器
var f = document.createDocumentFragment()
// 从后至前循环子节点,将每一个子节点自动到文档片段中
// n 的最后一个节点变成f 的第一个节点,反之亦然
// 注意,给f 添加一个节点,该节点自动地会从n 中删除
while(n.lastChild) f.appendChild(n.lastChild)
// 最后,把f 的所有子节点一次性全部移回n 中
@JobbyM
JobbyM / 25.js
Created June 27, 2017 00:47
replaceChild() 的另一种个用法
// 用一个新的<b> 元素替换n 节点,并使n 成为该元素的子节点
function embolden(n){
// 假如参数为字符串而不是节点,将其当作元素的id
if(typeof n === "string") n = document.getElementById(n);
var parent = n.parentNode; // 获得n 的父节点
var b = document.createElement("b"); // 创建一个<b> 元素
parent.replaceChild(b, n); // 用该<b> 元素替换节点n
b.appendChild(n); // 使n 称为<b> 元素的子节点
}
@JobbyM
JobbyM / 24.js
Created June 27, 2017 00:14
从指定的URL,异步加载和执行脚本
// 从指定的URL,异步加载和执行脚本
function loadasync(url){
var head = document.getElementsByTagName("head")[0]; // 查找文档的<head> 标签
var s = document.createElement("script"); // 创建一个<script> 元素
s.src = url; // 设置它的src 属性
head.appenChild(s); // 将该<script> 插入到head 中
}
@JobbyM
JobbyM / 23.js
Created June 26, 2017 08:56
查找元素的后代中节点中的所有Text 节点
// 返回元素e 的纯文本内容,递归进入其子元素
// 该方法的效果类似于textContent 属性
function textContent(e){
var child, type, s = ""; // s 保存所有子节点的文本
for(child = e.firstChild; child != null; child = child.nextSibling){
type = child.nodeType;
if(type === 3 || type === 4) // Text 和CDATASection 节点
s += child.nodeValue;
else if(type === 1) // 递归Element 节点
s += textContent(child);
@JobbyM
JobbyM / 22.js
Created June 26, 2017 08:42
textContent 方法
/**
* 一个参数,返回元素的textContent 或innerText
* 两个参数,用value 参数的值设置元素的textContent 或innerText
*/
function textContent(element, value){
var conent = element.textContent; // 检测textContent 是否有定义
if(value === undefined){ // 没传递value,因此返回当前文本
if(content !== undefined) return content
else return element.innerText;
}else{ // 传递了value, 因此设置文本
@JobbyM
JobbyM / 21.js
Created June 26, 2017 03:52
可移植的文档的遍历函数
/**
* 返回元素e 的第n 层祖先元素,如果不存在此类祖先后祖先不是Element,
* (例如Document 或者DocumentFragment)则返回null
* 如果n 为0, 则返回e 本身。如果n 为1(或省略),则返回其父元素
* 如果n 为2,则返回其祖父元素,以此类推
*/
function parent(e, n){
if(n === undefined) n = 1;
while(n-- && e) e = e.parentNode;
if(!e || e.nodeType !== 1) return null;
@JobbyM
JobbyM / 20.js
Created June 23, 2017 08:04
提取URL 的搜索字符串中的参数
/*
* 这个函数用来解析来自URL 的查询串中的name=value 参数对
* 它将name=value 对存储在一个对象的属性中,并返回该对象
* 这样来使用它
*
* var args = urlArgs(); // 从URL 中解析参数
* var q = args.q || ""; // 如果参数定义了的话就使用参数,否则使用一个默认值
* var n = args.n ? parseInt(args.n) : 10
*/
function urlArgs(){
@JobbyM
JobbyM / 19.js
Created June 23, 2017 07:15
定时器应用函数
* 安排函数f()在未来的调用模式
* 在等待了若干秒之后调用f()
* 如果设置了interval 并没有设置end 参数,则对f() 的调用将不会停止
* 如果没有设置interval 和end,只在若干毫秒后调用f() 一次
* 只有指定了f(), 才会从start=0 的时刻开始
* 注意,调用invoke() 不会阻塞,它会立即返回
*/
function invoke(f, start, interval, end){
if(!start) start = 0; // 默认设置为0 毫秒
if(arguments.length <= 2) // 单次调用模式
@JobbyM
JobbyM / 18.js
Created June 23, 2017 03:21
onLoad(), 当文档载入完成时调用一个函数
// 注册函数f,当文档载入完成时执行这个函数f
// 如果文档已经载入完成,尽快以异步方式执行它
function onLoad(f){
if(onLoad.loaded) // 如果文档已经载入完成
window.setTimeout(f, 0) // 将f 放入异步队列,并尽快执行它
else if(window.addEventListener) // 注册事件的标准方法
window.addEventListener("load", f, false)
else if(window.attachEvent) // IE8 以及更早的IE 版本浏览器注册事件的方法
window.attachEvent("onload", f)
}
@JobbyM
JobbyM / 17.js
Created June 23, 2017 02:06
异步载入并执行脚本
// 异步载入并执行一个指定URL 中的脚本
function loadasync(url){
var head = document.getElementsByTagName("head")[0]; // 找到<head> 元素
var s = document.createElement("script"); // 创建一个<script> 元素
s.src = url; // 设置其src 属性
head.appendChild(s); // 将script 元素插入head 标签中
}