前端技巧与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_171/article/details/82366676

1、开发人员需要确定某个给定的节点是不是另一个节点的后代，使用contains方法，不过火狐不支持，他需要compareDocumentPosition()方法

为了使用一些浏览器和能力检测，就可以写出如下通用的contains函数

function contains(refNode, otherNode)
{
   if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engine.webkit >= 522)) {
      return refNode.contains(otherNode);
   }
    else if(typeof refNode.compareDocumentPosition == "function") {
    return !!(refNode.compareDocumentPosition(otherNode) & 16);
  } 
   else  { 
    var node = otherNode.parentNode;
   do {
      if (node == refNode) {
            return true;
      }
       else {
            node = node.parentNode;
      }
   } while(node !==null);
      return false;
   }
}

var client = function() {
	var engine = {
		// rendering engines
		ie : 0,
		gecko : 0,
		webkit : 0,
		khtml : 0,
		opera : 0,
		// specific version
		ver : null
	};
	var browser = {
		// browsers
		ie : 0,
		firefox : 0,
		safari : 0,
		konq : 0,
		opera : 0,
		chrome : 0,
		safari : 0,
		// specific version
		ver : null
		// detection of rendering engines/platforms/devices here
	};
	var system = {
		win : false,
		mac : false,
		x11 : false
	};
	// detect rendering engines/browsers
	var ua = navigator.userAgent;
	if (window.opera) {
		engine.ver = browser.ver = window.opera.version();
		engine.opera = browser.opera = parseFloat(engine.ver);
	} else if (/AppleWebKit\/(\S+)/.test(ua)) {
		engine.ver = RegExp['$1'];
		engine.webkit = parseFloat(engine.ver);
		// figure out if it’s Chrome or Safari
		if (/Chrome\/(\S+)/.test(ua)) {
			browser.ver = RegExp['$1'];
			browser.chrome = parseFloat(browser.ver);
		} else if (/Version\/(\S+)/.test(ua)) {
			browser.ver = RegExp['$1'];
			browser.safari = parseFloat(browser.ver);
		} else {
			// approximate version
			var safariVersion = 1;
			if (engine.webkit < 100) {
				safariVersion = 1;
			} else if (engine.webkit < 312) {
				safariVersion = 1.2;
			} else if (engine.webkit < 412) {
				safariVersion = 1.3;
			} else {
				safariVersion = 2;
			}
			browser.safari = browser.ver = safariVersion;
		}
	} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
		engine.ver = browser.ver = RegExp['$1'];
		engine.khtml = browser.konq = parseFloat(engine.ver);
	} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
		engine.ver = RegExp['$1'];
		engine.gecko = parseFloat(engine.ver);
		// determine if it’s Firefox
		if (/Firefox\/(\S+)/.test(ua)) {
			browser.ver = RegExp['$1'];
			browser.firefox = parseFloat(browser.ver);
		}
	} else if (/MSIE ([^;]+)/.test(ua)) {
		engine.ver = browser.ver = RegExp['$1'];
		engine.ie = browser.ie = parseFloat(engine.ver);
	}
	//detect browsers
	browser.ie = engine.ie;
	browser.opera = engine.opera;
    
    //detect platform
	var p = navigator.platform;
	system.win = p.indexOf('Win') == 0;
	system.mac = p.indexOf('Mac') == 0;
	system.x11 = (p.indexOf('X11') == 0) || (p.indexOf('Linux') == 0);
	if (system.win) {
		if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
			if (RegExp['$1'] == 'NT') {
				switch (RegExp['$2']) {
					case '5.0' :
						system.win = '2000';
						break;
					case '5.1' :
						system.win = 'XP';
						break;
					case '6.0' :
						system.win = 'Vista';
						break;
					default :
						system.win = 'NT';
						break;
				}
			} else if (RegExp['$1'] == '9x') {
				system.win = 'ME';
			} else {
				system.win = RegExp['$1'];
			}
		}
	}
	return {
		engine : engine,
		system : system,
		browser : browser
	};
}();

//usage:
if (client.engine.webkit) { // if it’s WebKit
	if (client.browser.chrome) {
		// do something for Chrome
	} else if (client.browser.safari) {
		// do something for Safari
	}
} else if (client.engine.gecko) {
	if (client.browser.firefox) {
		// do something for Firefox
	} else {
		// do something for other Gecko browsers
	}
}

2、对于重复提交问题，js可以这么处理，我对百度首页做测试，嘎嘎

直接使用扣肉浏览器，在console里面输入以下内容

var btn = document.getElementById("su");
var form = document.forms[0];
form.onsubmit = function(event) {
   event.preventDefault();
   btn.disabled = true;
}

3、对于屏蔽输入字母情况

var filed = document.forms[0].elements[0];

filed.onkeypress = function(event) {
   if(/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) {
       alert("你输入的是数字");
   }
}

4、对于textarea的字符数限制：使用jquery

//备注字符限制
		$('textarea[name="note"]').live('keyup', function() {
			var v = this.value.replace(/^\s+|\s+$/g, '');
			if (v.length > 100) {
				this.value = v.substring(0, 100);
				$('#limitCount').text('还可以输入0个字符')
			} else {
				$('#limitCount').text('还可以输入' + (100 - v.length) + '个字符')
			}
		}).live('blur', function() {
			var v = this.value.replace(/^\s+|\s+$/g, '');
			if (v.length > 100) {
				this.value = v.substring(0, 100);
				$('#limitCount').text('还可以输入0个字符')
			} else {
				this.value = v;
				$('#limitCount').text('还可以输入' + (100 - v.length) + '个字符')
			}
		});

5、对于html5，IE9一下版本浏览器，你要使用createElement方式在浏览器解析dom之前创建出IE未知元素，因为IE9一下版本浏览器碰到未知元素，他就不会正常解析，会导致dom的树结构错误，如果使用createElement方式，实现让dom知道，他们会神奇的解析正确。

<!--[if lt IE 9]>
<script>
	var e = ("abbr, article, aside, audio, canvas, datalist, details, figure, footer, header, hgroup, mark, menu,meter, nav, output, progress,section,time, video").split(',');
	for(var i = 0; i < e.length; i++) {
		document.createElement(e[i]);
	}
</script>
<![endif]-->

可以把上面这个命名为ltie9.js
然后在写html5的时候，在head中引用
<head>
......
   <script src='ltie9.js'/>
</head>

6、按钮变颜色：

<a href="javascript:void(0)" title="新增" name="pic_add_btn">
	<img alt="新增" src="res/img/btn_add.jpg" style="position: relative; left: -11px;"  width="25px;">
</a>

7、锚定扩展（回到顶部）

$('html,body').animate({
						scrollTop : $('#block'+current_block).offset().top
					}, 500, function() {
						a.addClass('current').siblings('.current').removeClass('current');
					});

可以在上面的方法基础上添加:
$('someBtn').click(调用上面的方法)

scrollTop回到里上端多远出
500是速度
function()是回到动作完成后，发生的事件

8、图片的幻灯片效果：

$(function(){
	$.fn.slider = function(op) {
		var e = this.find("img"), p = $('<p/>'), l = e.length, x = 0, h = [], ho = false;
		e.each(function(i, n) {
			h[i] = $('<span></span>').bind('mouseover', function() {
				$(this).addClass('active').siblings('.active').removeClass('active');
				e.eq($(this).index()).stop(true, true).fadeIn(500).siblings('img:visible').stop(true, true).fadeOut(500);
			}).appendTo(p);
		});
		p.appendTo(this);
		this.hover(function() {
			ho = true;
		}, function() {
			ho = false;
		});
		h[0].triggerHandler('mouseover');
		setInterval(function() {
			if (!ho) {
				if (++x == l)
					x = 0;
				h[x].triggerHandler('mouseover');
			}
		}, 5000);
	}
	$('#pd_detail_img').slider();
});

然后对p,span进行css渲染

9、忽闪忽闪的效果

$(function(){
		    freshTip();
		})
		
		function freshTip() {
		    $('span[name="fresh_tip"]').each(function(){
				$(this).toggle();
				$(this).css("color", "red");
		    }) ;
		    setTimeout("freshTip()", 600);
		}

//setTimeout只调用一次，第一个参数，调用的方法名称以及参数"freshTip("+参数+")"。