1、获取内容的兼容函数

/*
* 一: 获取内容的兼容函数
* setText(obj, str)
* 思路:
* 1、首先判断浏览器;
* 2、如果是IE浏览器,就用innerText;
* 3、如果是非IE浏览器,就用textContent;
* 参数说明:
* 1、如果是一个参数,这个函数将会用来获取内容
* 2、如果是两个参数,这个函数将会用来设置内容
* */
function getText(obj, str) {
// 判断是否是IE浏览器,如果obj.innerText == ture,则是IE浏览器,否则是非IE浏览器
if(obj.innerText) {
// 判断是否传入str,如果传入,就将传入的参数赋值给对象;如果没有传入,就直接返回对象的内容,
if(str) {
obj.innerText = str;
} else {
return obj.innerText;
}
} else {
if(str) {
obj.textContent = str;
} else {
return obj.textContent;
}
}
}

2、获取样式的兼容函数;

/*************************************************************************************************************
* 二:获取样式的兼容函数
* getStyle(obj, attr);
* 思路:
* 1,首先判断浏览器,
* 2,如果是IE浏览器,就用obj.currentStyle[attr];
* 3,如果是非IE浏览器,就用document.defaultView.getComputedStyle(obj, null)[attr];
* 参数说明:
* 参数1:是要获得样式的对象;
* 参数2:要从对象里面获取的样式,要以字符串的形式传入;
* */
function getStyle(obj, attr) {
// 判断是不是IE浏览器,如果obj.currentStyle == true,说明是IE浏览器,否则是非IE浏览器
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return document.defaultView.getComputedStyle(obj, null)[attr];
}
};

3、获取指定元素的子元素的集合和有意义的文本,默认情况为获取元素的节点;

/*************************************************************************************************************
* 三:获取指定元素的子元素的集合和有意义的文本,默认情况为获取元素的节点;
* getChild(obj, type);
* 思路:
* 获取obj的所有的子元素
* 挑选:obj.nodeType == 1说明就是元素集合,否则就是文本元素的集合
* 参数说明:
* 参数1:指定的元素;
* 参数2:指定获取元素的类型;
* true:只获取元素的节点;
* false:获取元素的节点和有意义的文本节点;
* */
function getChild(obj, type) {
var type = type == undefined ? true : false,
arr = [];
var child = obj.childNodes;
if(type) { //type==true||undefined的时候执行;
for(var i = 0; i < child.length; i++) {
if(child[i].nodeType == 1) {
arr.push(child[i]);
};
};
return arr;
} else {
for(var i = 0; i < child.length; i++) {
//replace.();把空白替换掉:str="a b c"-------str=["a","b","c"]
if(child[i].nodeType == 1 || (child[i].nodeType == 3 && child[i].nodeValue.replace(/^\s+|\s+$/g, "") != "")) {
arr.push(child[i]);
};
};
return arr;
};
};

4、获取第一个子元素

/************************************************************************************************************
* 四:获取第一个子元素;
* */
function getFirstChild(obj) {
return getChild(obj)[0];
};

5、获取最后一个子元素

/***********************************************************************************************************
* 五:获取最后一个子元素;
* */
function getLastChild(obj) {
var length = getChild(obj).length;
return getChild(obj)[length - 1];
}

6、获取任意的子元素

/**********************************************************************************************************************
* 六:获取任意的子元素;
* */
function getRandomChild(obj, num){
return getChild(obj)[num-1];
}

7、获得目标对象的下一个兄弟节点,如果有下一个兄弟节点的话,如果没有,返回false;

/***************************************************************************************************************
* 七:获得目标对象的下一个兄弟节点,如果有下一个兄弟节点的话
* getNext(obj, type);
* 思路:
* 1、判断是否有下一个兄弟节点,如果没有的话,返回false,如果有的话,继续往下进行;
* 2、判读next是否是一个有意思的文本节点或者元素节点;
* 3、更新next,即给next赋值。继续往下寻找下一个兄弟节点;
* 4、判断next是否是一个空值,如果为空,返回false,如果不为空,继续进行第二步;
* 参数说明:
* 1、obj:指定的对象;
* 2、type为true时:忽略文本,也是默认值;type为false时,不能忽略文本;
* */
function getNext(obj, type) {
var type = type == undefined ? true : type;
var next = obj.nextSibling;
checkNext(next);
if(type) {
// 忽略文本
// 当next是一个注释节点或者文本节点时,继续往下循环;
while(next.nodeType == 3 || next.nodeType == 8) {
next = next.nextSibling;
checkNext(next);
}
return next;
} else {
// 不能忽略文本
// 当next的类型是一个注释或是文本时,继续往下循环;
while(next.nodeType == 8 || (next.nodeType == 3 && next.nodeValue.replace(/^\s+|\s+$/g, '') != '')) {
next = next.nextSibling;
checkNext(next);
}
} // 返回false封装成方法
function checkNext(nextObj) {
if(nextObj == null) {
return false;
}
}
}

8、给最前面的元素插入一条元素

/*****************************************************************************************************************
* 八:给最前面的元素插入一条元素
* beforeChild(obj, ele)
* 思路:
* 1、获取第一个子元素firstChild
* 2、父元素.insertBefore(要插入的元素,firstChild);
* 参数说明:
* 1、obj:父元素;
* 2、ele:要插入的元素
* */
function beforeChild(obj, ele) {
var first = getFirstChild(obj);
obj.insertBefore(ele, first);
};

9、给某个元素后面插入一条子元素;

/************************************************************************************************************************
* 九:给某个元素后面插入一条子元素
* insertAfter(obj,ele,type)
* 思路:
* 1、首先获取第一个兄弟节点,调用之前的getNext(obj, type)函数;
* 2、看是否有下一个兄弟节点,如果有,往下一个兄弟节点的前面插入元素。如果没有,直接插入到父元素的后面;
* 参数说明:
* 1、obj:要插入的位置;
* 2、ele:要插入的元素;
* 3、type:
* true:忽略文本(元素节点和false是getNext(obj, type)返回的值)
* false:不能忽略文本;
* */
function insertAfter(obj, ele, type) {
// 初始化参数
var type = type == undefined ? true : type,
next = getNext(obj, true),
parent = obj.parentNode;
if(next) {
// next == true时,将ele插入到next后面;
parent.insertBefore(ele, next);
} else {
// next == false时,将ele直接插入到parent即可;
parent.appendChild(ele);
}
}

10、获取上一个兄弟节点;与获取下一个兄弟节点类似。

/************************************************************************************************
* 十、获取上一个兄弟节点;
* getPrevious(obj, type);
* */
function getPrevious(obj, type) {
var type = type == undefined ? true : type,
next = obj.previousSibling;
checkNext(next);
if(type) {
// 忽略文本
// 当next的类型是一个注释或是文本时,继续往下循环;
while(next.nodeType == 8 || next.nodeType == 3) {
next = next.previousSibling;
checkNext(next);
}
return next;
} else {
// 不忽略文本
// 当next的类型是一个注释或是文本时,继续往下循环;
while(next.nodeType == 8 || (next.nodeType == 3 && !(next.nodeValue.replace(/^\s+|\s+$/g, '')))) {
next = next.previousSibling;
checkNext(next);
}
return next;
}
// 判断next的函数
function checkNext(nextObj) {
if(nextObj = null) {
return false;
}
};
}

11、

关于js的函数的更多相关文章

  1. JS回调函数全解析教程

    转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...

  2. 学习js回调函数

    <!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...

  3. 如何理解JS回调函数

    1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...

  4. Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针

    Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针   1.1. java方法引用(Method References) 与c#委托与脚本语言js ...

  5. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

  6. js引出函数概念的案例

    js引出函数概念的案例   1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  7. prototype.js $F()函数介绍

    $F()是一个能够简化编码量的函数, 对于字段输入控件有效,包括input.textarea.select等,该函数的输入参数为这些输入控件元素对象的id或元素对象本身,函数负责返回 这些输入控件元素 ...

  8. JS匿名函数的理解

    js匿名函数的代码如下:(function(){ // 这里忽略jQuery 所有实现 })(); 半年前初次接触jQuery 的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的 ...

  9. js回调函数(callback)理解

    Mark! js学习 不喜欢js,但是喜欢jquery,不解释. 自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函 ...

  10. JS回调函数(callback)

    在使用Jquery的时候,用到Callback(),回调函数的概念.而且很多. 比如: $.ajax({ url:"test.json", type: "GET" ...

随机推荐

  1. 常用js正则表达式大全

    常用js正则表达式大全.一.校验数字的js正则表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和 ...

  2. ssm又乱码

    以前用mybatis的时候是这样的 mysql.connection.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characte ...

  3. [BZOJ3011][Usaco2012 Dec]Running Away From the Barn

    题意 给出一棵以1为根节点树,求每个节点的子树中到该节点距离<=l的节点的个数 题解 方法1:倍增+差分数组 首先可以很容易的转化问题,考虑每个节点对哪些节点有贡献 即每次对于一个节点,找到其第 ...

  4. 【AtCoder】ARC077

    C - pushpush 如果是按下标说的话 如果是偶数个 那么是 \(N,N - 2,N - 4...1,3,5...N - 1\) 如果是奇数个 \(N,N - 2,N - 4...2,4,6.. ...

  5. net core体系-web应用程序-4asp.net core2.0 项目实战(1)-8项目加密解密方案

    本文目录1. 摘要2. MD5加密封装3. AES的加密.解密4. DES加密/解密5. 总结 1.  摘要 C#中常用的一些加密和解密方案,如:md5加密.RSA加密与解密和DES加密等,Asp.N ...

  6. Python学习(二十四)—— 前端基础之Bookstrap

    转载自:http://www.cnblogs.com/liwenzhou/p/8214637.html 一.Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.Jav ...

  7. docker inspect命令

    docker inspect -f {{.NetworkSettings.Networks.crawling_pro.NetworkID}} crawling_internationalmacro_p ...

  8. 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组

    题目描述: 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明:初始化 nums1 和 nums2 的元素数量分别为 m ...

  9. 在jsp页面上方定义<style> 可以自定义class的样式

    <style>.border-orange{ border:1px solid orange; width:120px; box-sizing: border-box; margin-bo ...

  10. 实现Java简单继承

    面向对象练习-简单继承 一.完成教师类的创建 说明: id 代表身份证号 name 表示姓名 birth 表示出生日期 title 表示职称(讲师,副教授,教授等) 二.完成学生类的创建 说明: ma ...