关于js的函数
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的函数的更多相关文章
- JS回调函数全解析教程
转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...
- 学习js回调函数
<!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...
- 如何理解JS回调函数
1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...
- Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针
Atitit java方法引用(Method References) 与c#委托与脚本语言js的函数指针 1.1. java方法引用(Method References) 与c#委托与脚本语言js ...
- 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数
来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...
- js引出函数概念的案例
js引出函数概念的案例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...
- prototype.js $F()函数介绍
$F()是一个能够简化编码量的函数, 对于字段输入控件有效,包括input.textarea.select等,该函数的输入参数为这些输入控件元素对象的id或元素对象本身,函数负责返回 这些输入控件元素 ...
- JS匿名函数的理解
js匿名函数的代码如下:(function(){ // 这里忽略jQuery 所有实现 })(); 半年前初次接触jQuery 的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的 ...
- js回调函数(callback)理解
Mark! js学习 不喜欢js,但是喜欢jquery,不解释. 自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函 ...
- JS回调函数(callback)
在使用Jquery的时候,用到Callback(),回调函数的概念.而且很多. 比如: $.ajax({ url:"test.json", type: "GET" ...
随机推荐
- 前端本地存储localStorage
1.突破cookie 4K限制,一般浏览器支持5M 2.增 删 改 查 <!DOCTYPE html> <html lang="en"> <head& ...
- ElementLayer support not implemented for native rendering. Layer ID:
在 arcgis runtime for wpf 添加标注闪烁动画时(实现方法参考:http://blog.csdn.net/arcgisserver_book/article/details/805 ...
- 五种UML工具
ProcessOn是一款在线流程图软件(https://www.processon.com/),能够高效的完成在线流程图.UI原型图.UML以及组织图,网络拓扑图的构建.该软件最大的特点是,无需安装, ...
- Qt错误 —— 无法启动此程序 因为计算机丢失QtCore5.dll 以及 无法定位程序输入点于动态链接库QtCore5.dll
首先,设置计算机的环境变量Path,计算机=>右键属性=>高级设置=>环境变量=>系统变量=>双击Path,在Path后面增加C:\Qt\Qt5.8.0\5.8\ming ...
- Tp-validate进阶
阶段1:基础 application/controller/v1/Banner.php <?php namespace app\api\controller\v1; use think\Cont ...
- hexo添加404公益界面
http://hellolb.top/2018/08/16/hexo添加404公益界面/ hexo个人博客添加404公益界面,这里我使用的腾讯404公益界面 我的博客主题是hexo+yilia,其实所 ...
- 一个简单需求:HashMap实现相同key存入数据后不被覆盖
做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 看似是一个简单的问题,其实里面包含很多的东西! 需求: 实现一个在HashMap中存入(任意类型)相同的key值后,key ...
- RFC2616-HTTP1.1-Header Field Definitions(头字段规定部分—译文)
part of Hypertext Transfer Protocol -- HTTP/1.1 RFC 2616 Fielding, et al. 14 头字段规定 该章节定义了HTTP1.1标准所包 ...
- Scrapy基础(九)————将不定长度的URL进行固定长度写入Item中
前面讲到将每篇文章的URL写入Item,但是每个url的长度是不同的,可以在Item中设置一个字段怎样使得每个URL的长度相同,这就需要对每个URL进行md5运算,使得长度统一,再加入到设定的Item ...
- Lock锁与Condition监视器(生产者与消费者)。
/*生产者与消费者第二次敲,本人表示很郁闷,以后要经常读这个 * Condition 将Object类中的监视器(wait notify notifyAll)分解成不同的对象.例如condition_ ...