js常用的工具函数
JS选取DOM元素的方法
注意:原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素
document.getElementById('myid');
2、通过CLASS选取元素
document.getElementsByClassName('myclass')[0];
3、通过标签选取元素
document.getElementsByTagName('mydiv')[0];
4、通过NAME属性选取元素(常用于表单)
document.getElementsByName('myname')[0];
JS修改CSS样式
document.getElementById('myid').style.display = 'none';
JS修改CLASS属性
document.getElementById('myid').className = 'active';
如果有多个CLASS属性,即用空格隔开////////
document.getElementById('myid').className = 'active div-1';
移除该元素上的所有CLASS
document.getElementById('myid').className = ''
注意:使用classList会优于使用className
document.getElementById('myid').classList.item(0);//item为类名的索引
document.getElementById('myid').classList.length;//只读属性
document.getElementById('myid').classList.add('newClass');//添加class
document.getElementById('myid').classList.remove('newClass');//移除class
document.getElementById('myid').classList.toggle('newClass');//切换,有则移除,没有则添加
document.getElementById('myid').classList.contains('newClass');//判断是否存在该class
JS修改文本
document.getElementById('myid').innerHTML = '123';
数组去重的方法
Array.prototype.unique = function(){
var tem = {}, //新建一个空对象,给数组中没出现过的数添加一个属性
arr = [], //去重后的数组
len = this.length; //要进行去重数组的长度
for(var i=0;i<len;i++){
if(!temp[this[i]]){ // 判断数组中的数作为属性名在temp里有没有属性值
temp[this[i]]="abc";//如果没有属性值,则说明没出现过给他一个属性值
arr.push(this[i]);//同时把这个数添加到去重后的数组里
}
}
return arr; //最后返回这个数组,这是hash算法
}
删除数组中存在重复的元素
function getUnique(someArray) {
tempArray = someArray.slice(0); //复制数组到临时数组
for (var i = 0; i < tempArray.length; i++) {
for (var j = i + 1; j < tempArray.length;) {
if (tempArray[j] == tempArray[i])
//后面的元素若和待比较的相同,则删除并计数;
//删除后,后面的元素会自动提前,所以指针j不移动
{
tempArray.splice(j, 1);
}
else {
j++;
}
//不同,则指针移动
}
}
return tempArray;
}
判断某个值是否在数组中
Array.prototype.in_array = function (e) {
for (i = 0; i < this.length; i++) {
if (this[i] == e)
return true;
}
return false;
}
判断某个值在数组中的位置
Array.prototype.indexOf = function (e) {
for (i = 0; i < this.length; i++) {
if (this[i] == e)
return i;
}
return -1;
}
圣杯模式=继承(继承自他,更改自己又不会影响到他)
function inherit(Target,Origin){ //目标元素和初始元素
function F(){}; //创建一个中间函数
F.prototype = Origin.prototype; //中间函数的原型继承自原始函数
Target.prototype = new F(); //构造函数F 目标函数继承自此
Target.prototype.constructor = Target; //使目标函数的构造器指向他自己
Target.prototype.uber = Origin.prototype; //在uber里存储目标函数真正继承自哪里
}
Father.prototype.lastName ="hui";
function Father(){}
function Son(){}
inherit(Son,Father);
var son = new Son();
var father new Father();
时间戳转为格式化时间
function formatDate(timestamp, formats) {
/*
formats格式包括
1. Y-M-D
2. Y-M-D h:m:s
3. Y年M月D日
4. Y年M月D日 h时m分
5. Y年M月D日 h时m分s秒
示例:console.log(formatDate(1500305226034, 'Y年M月D日 h:m:s')) ==> 2017年07月17日 23:27:06
*/
formats = formats || 'Y-M-D';
var myDate = timestamp ? new Date(timestamp) : new Date();
var year = myDate.getFullYear();
var month = formatDigit(myDate.getMonth() + 1);
var day = formatDigit(myDate.getDate());
var hour = formatDigit(myDate.getHours());
var minute = formatDigit(myDate.getMinutes());
var second = formatDigit(myDate.getSeconds());
return formats.replace(/Y|M|D|h|m|s/g, function(matches) {
return ({
Y: year,
M: month,
D: day,
h: hour,
m: minute,
s: second
})[matches];
});
// 小于10补0
function formatDigit(n) {
return n.toString().replace(/^(\d)$/, '0$1');
};
}
千分位显示,常用于价格显示
function toThousands(num) {
return parseFloat(num).toFixed(2).replace(/(\d{1,3})(?=(\d{3})+(?:\.))/g, "$1,");
}
Js获取页面地址参数
function getParameter(param) {
var query = window.location.search;// 获取URL地址中?后的所有字符
var iLen = param.length;// 获取你的参数名称长度
var iStart = query.indexOf(param);// 获取你该参数名称的其实索引
if (iStart == -1)// -1为没有该参数
return "";
iStart += iLen + 1;
var iEnd = query.indexOf("&", iStart);// 获取第二个参数的其实索引
if (iEnd == -1)// 只有一个参数
return query.substring(iStart);// 获取单个参数的参数值
return query.substring(iStart, iEnd);// 获取第二个参数的值
}
判断是否数字
function IsNumeric(txt) {
if (txt == "") {
return false;
}
if (txt.indexOf(",") > 0) {
txt = txt.replace(",", "");
}
if (isNaN(txt)) {
return false;
}
else {
return true;
}
}
设置cookie
function setCookie(name, value, iDay)
{
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';expires='+oDate;
}
读取cookies
function getCookie(name)
{
var arr=document.cookie.split('; ');
for(var i=0;i<arr.length;i++)
{
var arr2=arr[i].split('=');
if(arr2[0]==name)
{
return arr2[1];
}
}
return '';
}
删除cookies
function removeCookie(name)
{
setCookie(name, 1, -1);
}
jquery trim()函数的用法
recordList = $.trim(recordList);
缓冲图片 loading效果
$("#loading",navTab.getCurrentPanel()).ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});
字符串超出省略
String.prototype.cutstr = function (len) {
var restr = this;
var wlength = this.replace(/[^\x00-\xff]/g, "**").length;
if (wlength > len) {
for (var k = len / 2; k < this.length; k++) {
if (this.substr(0, k).replace(/[^\x00-\xff]/g, "**").length >= len) {
restr = this.substr(0, k) + "...";
break;
}
}
}
return restr;
}
加入收藏夹
function AddFavorite(sURL, sTitle) {
try {
window.external.addFavorite(sURL, sTitle)
} catch (e) {
try {
window.sidebar.addPanel(sTitle, sURL, "")
} catch (e) {
alert("加入收藏失败,请使用Ctrl+D进行添加")
}
}
}
设为首页
function setHomepage(homeurl) {
if (document.all) {
document.body.style.behavior = 'url(#default#homepage)';
document.body.setHomePage(homeurl)
} else if (window.sidebar) {
if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
} catch (e) {
alert("该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入about:config,然后将项 signed.applets.codebase_principal_support 值该为true");
}
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage', homeurl)
}
}
跨浏览器绑定事件
function addEventSamp(obj, evt, fn) {
if (!oTarget) { return; }
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + evt, fn);
} else {
oTarget["on" + sEvtType] = fn;
}
}
跨浏览器删除事件
function delEvt(obj, evt, fn) {
if (!obj) { return; }
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (oTarget.attachEvent) {
obj.attachEvent("on" + evt, fn);
} else {
obj["on" + evt] = fn;
}
}
判断是否移动设备访问
function isMobileUserAgent() {
return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
}
获取页面高度
function getPageHeight() {
var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement;
return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
}
获取页面宽度
function getPageWidth() {
var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement;
return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
}
获取页面scrollLeft
function getPageScrollLeft() {
var a = document;
return a.documentElement.scrollLeft || a.body.scrollLeft;
}
获取页面滚动距离
function getScrollOffset(){
if(window.pageXOffset){
return{
X : window.pageXOffset;
Y : window.pageYOffset
}
}else{//IE8及以下
return{
X : document.body.scrollLeft+document.documentElement.scrollLeft;
Y : document.body.scrollTop+document.documentElement.scrollTop;
}
}
}
获取窗体可见范围的宽与高
function getViewportOffset() {
if(window.innerWidth){
return{
X : window.innerWidth;
Y : window.innerHeight
}
}else{//IE8及以下
if(document.compatMode == "BackCompat"){//如果是怪异模式、混杂模式
return{
X : document.body.clientWidth;
Y : document.body.clientHeight;
}
}else{
return {
X : document.documentElement.clientWidth;//标准模式
Y : document.documentElement.clientHeight
}
}
}
}
查看元素的几何尺寸
domEle.getBoundingClientRect();//6个值 left top right bottom width height 不是实时监控的
查看元素的视觉尺寸
div.offsetWidth
div.offsetHeight
div.offsetLeft //对于无定位的父集返回文档的坐标,对于有定位的父集返回相对最近有定位父集的坐标
div.offsetTop
div.offsetParent //返回最近的有定位的父集
返回一个元素在文档中的坐标
function getElmentPosition(div){
if(div.offsetParent == body){
return {
X : div.offsetLeft;
Y : div.offsetTop
}
}else{
}
}
让滚动条滚动
scrollTo();//滚动到xxx
scrollBy();//累加滚动xxxx
行间样式-可以写入
div.style.width //必须写到css style里面,获取的都是style里的
div.style.cssFloat//浮动
window.getComputedStyle(div,null) //返回的计算样式都是计算过的,不存在相对单位,只读
window.getComputedStyle(div,null).width
window.getComputedStyle(div,"after") //获取伪元素的样式表
ele.currentStyle//ie专用,获取显示显示样式,只读
ele.currentStyle.width
获取样式属性
function getStyle(elem,prop){
if(window.getcomputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
随机数时间戳
function uniqueId() {
var a = Math.random, b = parseInt;
return Number(new Date()).toString() + b(10 * a()) + b(10 * a()) + b(10 * a());
}
匹配国内电话号码(0511-4405222 或 021-87888822) ////////
function istell(str) {
var result = str.match(/\d{3}-\d{8}|\d{4}-\d{7}/);
if (result == null) return false;
return true;
}
匹配身份证(15位或18位)
function isIdCardNo(num) {
num = num.toUpperCase();
//身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X。
if (!(/(^/d{15}$)|(^/d{17}([0-9]|X)$)/.test(num)))
{
alert('输入的身份证号长度不对,或者号码不符合规定!/n15位号码应全为数字,18位号码末位可以为数字或X。');
return false;
}
}
移动电话
function checkMobile(str) {
if (!(/^1[3|5|8][0-9]\d{4,8}$/.test(str))) {
return false;
}
return true;
}
判断输入是否是有效的电子邮件
function isemail(str) {
var result = str.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/);
if (result == null) return false;
return true;
}
拆分整数与小数
function splits(tranvalue) {
var value = new Array('', '');
temp = tranvalue.split(".");
for (var i = 0; i < temp.length; i++) {
value = temp;
}
return value;
}
JS创建元素并向其中追加文本
var newdiv = document.createElement('div');
var newtext = document.createTextNode('123');
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);
////////同理:removeChild()移除节点,并返回节点////////
cloneNode()//复制节点
insertBefore()//插入节点(父节点内容的最前面)
//注意:insertBefore()有两个参数,第一个是插入的节点,第二个是插入的位置
//例子:
var list = document.getElementById('myList');
list.insertBefore(newItem,list.childNodes[1]);
//插入新节点newItem到list的第二个子节点
//////insertAfter//////
Element.prototype.insertAfter = function(targetNode,afterNode){
var beforeNode = afterNode.nextElementSibling;
if(beforeNode == null){
afterNode.appendChild(targetNode);
}else{
this.insertBefore(targetNode,beforeNode);
}
}
浮点数加法运算
function FloatAdd(arg1, arg2)
{
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
浮点数乘法运算
function FloatMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
function toFixed(num, s) {
var s = 2;
var times = Math.pow(10, s)
var des = num * times + 0.5
des = parseInt(des, 10) / times
return des + ''
}
点击空白处消失
$("#a").on("click", function(e){
$("#menu").show();
$(document).one("click", function(){
$("#menu").hide(); }); e.stopPropagation();
});
$("#menu").on("click", function(e){ e.stopPropagation(); });
常见的运动框架
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
startMove(0);
};
oDiv.onmouseout = function() {
startMove( - 150);
};
};
var timer = null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if (oDiv.offsetLeft > iTarget) {
speed = -10;
} else {
speed = 10;
}
if (oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},
30);
}
js常用的工具函数的更多相关文章
- js 常用的工具函数
1 类型判断 isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } i ...
- 常用的工具函数助力JavaScript高效开发
前言 日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率. 1.校验数据类型 export const typeOf = func ...
- js常用加解密函数汇总
1. JS自定义加密解密函数,及用法 function compile(code) { )+code.length); ;i<code.length;i++){ c+=String.fromCh ...
- 【JS】403- JavaScript 工具函数大全(新)
前言 一线大厂笔试题灵感来源 目录: 第一部分:数组 第二部分:函数 第三部分:字符串 第四部分:对象 第五部分:数字 第六部分:浏览器操作及其它 筛选自以下两篇文章: <127 Helpful ...
- JS几个常用的工具函数
一个项目中JS也不可避免会出现重用,所以可以像Java一样抽成工具类,下面总结了几个常用的函数: 1.日期处理函数 将日期返回按指定格式处理过的字符串: function Format(now,mas ...
- js常用关键字和函数
document.createElement("div"): 创建一个div元素申明一个变量 document.body.appendChild(div); 将创建好的div添 ...
- js常用的封装函数
1.使用childNodes获取元素的元素节点 //使用childNodes获取元素节点 function cNodes(obj){ var arr=new Array(); for(var i=0; ...
- youku的js脚本的工具函数和初始化方法
定义日志输出函数 (function(){ if(window['console']){ return; } window['console'] = { log: function(){} ,clea ...
- js常用自编函数整理
1.替换js地址栏参数值 //destiny是目标字符串,比如是http://www.huistd.com/?id=3&ttt=3 //par是参数名,par_value是参数要更改的值,调用 ...
随机推荐
- JavaScript利用递归和循环实现阶乘
[实现方法] 1.利用while循环来做,当然for循环也可以. 2.递归 [代码内容] 偷懒,直接用onkeyup事件来限制来页面的输入 循环代码: //第一种方法 while循环 oCount.o ...
- HDU1711-KMP-水题
纯KMP,入门题,不知道读入挂加朴素匹配能不能过 #include <cstdio> #include <algorithm> #include <cstring> ...
- Debug时含有的子元素,在代码里获取不到的问题
比如,Debug时如下图展示: 我想要获取的是:ansList.get(i).getComponent().getConnectorId() debug时明明有这个元素,但是当我写出来的时候却发现:a ...
- emwin之多次删除同一窗口导致死机现象
@218-7-24 [现象] 使用函数 GUI_EndDialog() 多次删除同一窗口,导致系统死机,调试发现代码会卡死在以下两处 > 1.启动文件中 > 2.HardFault中断内 ...
- A1056. Mice and Rice
Mice and Rice is the name of a programming contest in which each programmer must write a piece of co ...
- 【模板】倍增+Floyd
题目大意:给定一个 N 个顶点的邻接矩阵.起点顶点.终点顶点,求至少经过 K 条边(边可以重复)从起点到终点的最短路长度,若不能到达,输出 -1. 题解:至少经过 K 条边和恰好经过 K 条边的初始条 ...
- Java逐行写入字符串到文件
下边是写东西到一个文件中的Java代码.运行后每一次,一个新的文件被创建,并且之前一个也将会被新的文件替代.这和给文件追加内容是不同的. 1. public static void writeFile ...
- 引入springboot的两种方式以及springboot容器的引入
一.在项目中引入springboot有两种方式: 1.引入spring-boot-starter-parent 要覆盖parent自带的jar的版本号有两种方式: (1)在pom中重新引入这个jar, ...
- Python基础数据类型-字符串(string)
Python基础数据类型-字符串(string) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客使用的是Python3.6版本,以及以后分享的每一篇都是Python3.x版 ...
- 远程客户端连接MysqL数据库太慢解决方案
远程客户端连接MysqL数据库太慢解决方案局域网客户端访问mysql 连接慢问题解决. cd /etc/mysql vi my.conf [mysqld] skip-name-resolve 此选项禁 ...