`

分享原生JavaScript技巧大收集(61~70)

阅读更多

文章来源:jquery教程 - http://www.jq-school.com/Show.aspx?id=308

最近边写jquery代码,边搜集一些常用、实用的原生JavaScript实用代码片段,不知不觉又整理了70多个了,希望对大家有帮助,会不断的增加的,大家继续关注哦。。。

 

61、原生JavaScript解决offsetX兼容性问题

// 针对火狐不支持offsetX/Y
function getOffset(e){
  var target = e.target, // 当前触发的目标对象
      eventCoord,
      pageCoord,
      offsetCoord;

  // 计算当前触发元素到文档的距离
  pageCoord = getPageCoord(target);

  // 计算光标到文档的距离
  eventCoord = {
    X : window.pageXOffset + e.clientX,
    Y : window.pageYOffset + e.clientY
  };

  // 相减获取光标到第一个定位的父元素的坐标
  offsetCoord = {
    X : eventCoord.X - pageCoord.X,
    Y : eventCoord.Y - pageCoord.Y
  };
  return offsetCoord;
}

function getPageCoord(element){
  var coord = { X : 0, Y : 0 };
  // 计算从当前触发元素到根节点为止,
  // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和
  while (element){
    coord.X += element.offsetLeft;
    coord.Y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}


62、原生JavaScript常用的正则表达式

//正整数
/^[0-9]*[1-9][0-9]*$/;
//负整数
/^-[0-9]*[1-9][0-9]*$/;
//正浮点数
/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;   
//负浮点数
/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;  
//浮点数
/^(-?\d+)(\.\d+)?$/;
//email地址
/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
//url地址
/^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/;
//年/月/日(年-月-日、年.月.日)
/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
//匹配中文字符
/[\u4e00-\u9fa5]/;
//匹配帐号是否合法(字母开头,允许5-10字节,允许字母数字下划线)
/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
//匹配空白行的正则表达式
/\n\s*\r/;
//匹配中国邮政编码
/[1-9]\d{5}(?!\d)/;
//匹配身份证
/\d{15}|\d{18}/;
//匹配国内电话号码
/(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/;
//匹配IP地址
/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
//匹配首尾空白字符的正则表达式
/^\s*|\s*$/;
//匹配HTML标记的正则表达式
< (\S*?)[^>]*>.*?|< .*? />;


63、原生JavaScript实现返回顶部的通用方法

function backTop(btnId) {
	var btn = document.getElementById(btnId);
	var d = document.documentElement;
	var b = document.body;
	window.onscroll = set;
	btn.style.display = "none";
	btn.onclick = function() {
		btn.style.display = "none";
		window.onscroll = null;
		this.timer = setInterval(function() {
			d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
			b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
			if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
		},
		10);
	};
	function set() {
		btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
	}
};
backTop('goTop');


64、原生JavaScript获得URL中GET参数值

// 用法:如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得:GET["t1"], GET["t2"], GET["t3"]
function get_get(){ 
  querystr = window.location.href.split("?")
  if(querystr[1]){
    GETs = querystr[1].split("&")
    GET =new Array()
    for(i=0;i<GETs.length;i++){
      tmp_arr = GETs[i].split("=")
      key=tmp_arr[0]
      GET[key] = tmp_arr[1]
    }
  }
  return querystr[1];
}


65、原生JavaScript实现全选通用方法

function checkall(form, prefix, checkall) {
	var checkall = checkall ? checkall : 'chkall';
	for(var i = 0; i < form.elements.length; i++) {
		var e = form.elements[i];
		if(e.type=="checkbox"){
			e.checked = form.elements[checkall].checked;
		}
	}
}


66、原生JavaScript实现全部取消选择通用方法

function uncheckAll(form) {
	for (var i=0;i<form.elements.length;i++){
		var e = form.elements[i];
		if (e.name != 'chkall')
		e.checked=!e.checked;
	}
}


67、原生JavaScript实现打开一个窗体通用方法

function openWindow(url,windowName,width,height){
    var x = parseInt(screen.width / 2.0) - (width / 2.0); 
    var y = parseInt(screen.height / 2.0) - (height / 2.0);
    var isMSIE= (navigator.appName == "Microsoft Internet Explorer");
    if (isMSIE) {
    	var p = "resizable=1,location=no,scrollbars=no,width=";
    	p = p+width;
    	p = p+",height=";
    	p = p+height;
    	p = p+",left=";
    	p = p+x;
    	p = p+",top=";
    	p = p+y;
        retval = window.open(url, windowName, p);
    } else {
        var win = window.open(url, "ZyiisPopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" );
        eval("try { win.resizeTo(width, height); } catch(e) { }");
        win.focus();
    }
}


68、原生JavaScript判断是否为客户端设备

function client(o){	
       var b = navigator.userAgent.toLowerCase();   
	   var t = false;
	   if (o == 'isOP'){
			 t = b.indexOf('opera') > -1;
	   }
	   if (o == 'isIE'){
			 t = b.indexOf('msie') > -1;
	   }
	   if (o == 'isFF'){
			 t = b.indexOf('firefox') > -1;
	   }
       return t;
}


69、原生JavaScript获取单选按钮的值

function get_radio_value(field){
	if(field&&field.length){	
		for(var i=0;i<field.length;i++){		
			if(field[i].checked){			
				return field[i].value;								
			}			
		}		
	}else {		
		return ;				
	}	
}


70、原生JavaScript获取复选框的值

function get_checkbox_value(field){	
	if(field&&field.length){	
		for(var i=0;i<field.length;i++){			
			if(field[i].checked && !field[i].disabled){
				return field[i].value;
			}
		}		
	}else {
		return;
	}			
}
 
分享到:
评论

相关推荐

    原生Javascript开发让你的表单亮起来

    原生JavaScript开发能帮助我们更好地控制和美化这些表单,使其更具交互性和吸引力。本文将深入探讨如何利用JavaScript来提升表单的用户体验,使其“亮起来”。 一、表单事件处理 原生JavaScript允许我们直接对表单...

    原生态纯JavaScript 100大技巧大收集

    ### 原生态纯JavaScript 100大技巧大收集 #### 1. 字符串长度截取 在处理文本时,我们常常需要对字符串进行截取,特别是当需要显示预览或者摘要时。该技巧提供了原生JavaScript实现的字符串长度截取功能。 **函数...

    JavaScript所有资料

    "javascript技巧大全.htm"和"js技巧大集合.htm"是收集了大量JavaScript编程技巧和实践经验的文档,可能包括性能优化、错误处理、代码重构以及各种实用的代码片段,这些技巧可以帮助开发者编写更高效、更简洁的...

    Javascript中55个经典技巧

    在不断演变的前端世界中,掌握一些经典的JavaScript技巧对于提升编程效率和代码质量至关重要。以下是一些基于标题"JavaScript中55个经典技巧"所涵盖的知识点: 1. **变量声明**:使用`let`和`const`替代`var`,以...

    工作中常用的javascript脚本

    这个压缩包中收集的"工作中常用的javascript脚本"涵盖了各种实用场景,帮助开发者提高工作效率。 1. **基础语法** JavaScript的基础语法包括变量声明(`var`, `let`, `const`)、数据类型(如字符串、数字、布尔、...

    JavaScript.docx

    2. **20 个使用原生 JavaScript 实现的 Web 项目**:通过实际参与项目开发,可以更深刻地理解 JavaScript 在实际应用场景中的作用。这类网站提供了从简单的 HTML/CSS 动画到复杂的单页应用等多种类型的项目实例,是...

    这个项目收集移动端开发所需要的一些资源与小技巧

    3. **工具和库**:可能会分享一些实用的JavaScript库或插件,用于优化移动开发,如性能优化、网络请求处理、动画效果等。 4. **最佳实践**:项目可能总结了移动端开发中的最佳实践,如响应式设计、离线存储策略、...

    JavaScript最常用的55个经典技巧

    这篇博客“JavaScript最常用的55个经典技巧”分享了一些实用的编程技巧,帮助开发者提高效率和代码质量。以下是对这些技巧的详细解读: 1. **变量声明与作用域**:理解var、let和const的区别,避免全局污染,正确...

    html javascript lesson7

    5. **jQuery库**:虽然原生JavaScript已经足够强大,但jQuery简化了很多常见任务,如DOM操作、事件处理和动画。学习者可能被介绍到jQuery的基本用法及其如何提高开发效率。 6. **表单处理**:HTML表单是收集用户...

    javascript学习笔记之10个原生技巧

    首先在这里要非常感谢无私分享作品的网友们,这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的。把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,...

    30secondsofcode中文版翻译收集有用的Javascript片段你可以在30秒或更少的时间里理解

    **30秒速成代码:JavaScript实用技巧** 在编程领域,效率至关重要,尤其是在JavaScript的世界里。"30 seconds of code" 是一个广受欢迎的开源项目,它汇集了一系列简洁、实用的JavaScript代码片段,旨在帮助开发者...

    web前端期末大作业——仿小米商城电商平台(6页) html+css+javascript网页设计实例 企业网站制作

    - **原生JavaScript**: 项目中提到使用了原生JavaScript技术,这意味着没有依赖任何第三方库或框架,而是直接使用浏览器内置的JavaScript功能来实现动态效果。 - **鼠标滑过特效**: 这种效果通常是通过监听鼠标...

    一本使用ES6用JavaScript编写FP的指南.zip

    结合以上知识点,"一本使用ES6用JavaScript编写FP的指南"很可能是详细讲解如何利用ES6特性来实现和理解函数式编程的书籍,包含了大量的示例和实践指导,对于提升JavaScript开发者的编程技巧和思维方式大有裨益。

    jQuery 技巧收集

    DOM对象可以使用原生JavaScript的DOM方法,而jQuery对象则可以使用jQuery提供的丰富API。 3. **获取jQuery集合的某一项** 当选取的元素集合包含多个元素时,可以使用`eq(index)`或`get(index)`方法获取特定索引的...

    原生或第三方平台上的App开发的教程、源代码项目

    ### 原生或第三方平台上的App开发教程与源代码项目详解 #### 一、原生App开发 ##### 1. Android原生App开发 **工具:** - **Android Studio:** 安卓官方推荐的集成开发环境(IDE),提供了完整的开发流程支持,...

    Pro-Android-Web-Apps-Developing-HTML5-JavaScript-CSS-and-Chrome-OS-Web-Apps.pd

    - **第9章:使用PhoneGap进行原生桥接**:讨论了如何利用PhoneGap框架将Web应用打包成原生应用,以便更好地利用设备硬件资源。 - **第10章:整合社交APIs**:讲解了如何利用社交媒体APIs增强应用的社交功能。 - *...

    大四web前端网页制作课作业——HTML+CSS+JavaScript仿小米手机商城网站(37页d

    这种设计能够帮助学生理解和实践不同类型的网页设计方法与技巧。 - **Div+CSS布局**:这是现代网页设计中非常基础且重要的一个组成部分。通过使用Div标签来进行区块划分,并结合CSS来控制样式,可以使网页布局更加...

    Weekly75, react-native iOS版奇舞周刊.zip

    React-Native作为Facebook推出的开源项目,已经成为跨平台移动应用开发的重要工具,尤其在iOS平台上,它为开发者提供了用JavaScript编写原生应用的能力。奇舞周刊,作为国内知名的IT技术分享平台,定期发布各类技术...

    BicaVM JS版 for Java

    这要求开发者在JavaScript中实现类加载系统、垃圾收集机制、方法调用以及异常处理等复杂功能。这样的实现挑战了JavaScript的边界,展示了其作为动态语言的强大能力。 项目中的**BicaVM**部分可能包含了以下几个关键...

Global site tag (gtag.js) - Google Analytics