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. 记录一次因代理Controller产生的404问题

    spring 3.2.4 为了给每一个controller配置一个拦截器链 import com.google.common.collect.Lists; import org.aopalliance ...

  2. [转] babel-plugin-react-css-modules配置

    自己的react项目用到了css-modules,由于不太想在写className时写style.xxx于是google解决方案,找到了这货->babel-plugin-react-css-mo ...

  3. day6.python字典练习题

    1.有如下变量(tu是个元组),请实现要求的功能 tu = (“alex”, [11, 22, {“k1”: ‘v1’, “k2”: [“age”, “name”], “k3”: (11,22,33) ...

  4. scrapy 基础使用以及错误方案

    原先用的是selenium(后面有时间再写),这是第一次使用scrapy这个爬虫框架,所以记录一下这个心路历程,制作简单的爬虫其实不难,你需要的一般数据都可以爬取到. 下面是我的目录,除了main.p ...

  5. 浏览器iscroll

    ::-webkit-scrollbar{width:4px;height:4px;background:transparent}::-webkit-scrollbar-track{background ...

  6. 053 kafka自带的生产者与消费者测试

    1.命令 2.启动生产者 bin/kafka-console-producer.sh --topic beifeng --broker-list linux-hadoop01.ibeifeng.com ...

  7. scrapy 命令行创建 启动 跟踪

    不是python文件中的,而是在虚拟机中运行的命令行,先要workon进入虚拟环境 2.scrapy 框架的使用 -1.新建项目 命令:scrapy startproject <project_ ...

  8. 爬虫之xpath用法

    导包用: from lxml import etree

  9. 003.Ceph扩展集群

    一 基础准备 参考<002.Ceph安装部署>文档部署一个基础集群. 二 扩展集群 2.1 扩展架构 需求:添加Ceph元数据服务器node1.然后添加Ceph Monitor和Ceph ...

  10. Xamarin Essentials教程使用加速度传感器Accelerometer

    Xamarin Essentials教程使用加速度传感器Accelerometer   加速度传感器是一种能够测量加速度的传感器,用于检测设备状态的改变.在Xamarin中,如果开发者想要使用加速度传 ...