js 自己常用的小小技巧（持续更新）
tab切换
1 /*-----------------tab切换--tabmenu 切换的按钮，tabwrap要切换的容器------------*/
2 function tab(tabmenu,tabwrap) {
3 $(tabmenu).click(function(){
4 var index = $(this).index();
5 $(this).addClass('on').siblings(tabmenu).removeClass('on');
6 $(tabwrap).eq(index).addClass('on').siblings(tabwrap).removeClass('on');
7 })
8 };
9
10 tab切换
弹框，滚动，页面位置
-
弹出提示框
1 /* -----------------弹出提示框-----------------*/ 2 // bg页面背景遮盖,showbtn点击此按钮,showbox显示的弹出框,close关闭弹出框 3 function popup(popbg,showbtn,showbox,close){ 4 $(showbtn).click(function(){ 5 $(popbg).css({ 6 display: 'block', 7 height: $('body').height() 8 }); 9 $showbox = $(showbox); 10 $showbox.css({ 11 //设置弹出层距离左边的位置 12 left: ($(window).width() - $showbox.width()) / 2 + "px", 13 //设置弹出层距离上面的位置 14 top: ($(window).height() - $showbox.height()) / 2 + "px", 15 display: 'block', 16 }); 17 }); 18 //点击关闭按钮的时候，遮罩层关闭 19 $(close).click(function () { 20 $(popbg).css('display','none'); 21 $(showbox).css('display','none'); 22 }); 23 }; 24 25 弹出提示框 popup -
右侧广告滚动到指定地点显示
1 /*右侧广告滚动到指定地点显示*/
2 function adsScroll(scrollbox,scrolltop,topvalue){
3 var $windowscroll= $(window).scrollTop();
4 var $threadRightAd = scrollbox.height();
5 if($windowscroll>scrolltop){
6 // $(".thread-right-ad").css({ position:"fixed",top: ($(window).height() - $threadRightAd) / 2 + "px",});
7 scrollbox.css({ position:'fixed',top: topvalue});
8 }else{
9 scrollbox.css({position:'relative',top: 0 });
10 }
11 };
12 $(window).scroll(function(){
13 adsScroll($('.rankingbox-ads'),1400,"60px");
14 });
- 自动滚动到页面中的某区域
jQuery.fn.autoscroll = function (selector) {
$('html,body').animate({ scrollTop: $(this ).offset().top}, 500 );
alert($(this ).offset().top)
}
//然后像这样来滚动到你希望去到的class/area上。
$('.test').autoscroll();
- 把一个元素放在屏幕的中心位置
jQuery.fn.center = function () { this.css('position', 'absolute'); this.css('top', ($(window).height() - this.height())
/ +$(window).scrollTop() + 'px'); this.css('left', ($(window).width() - this.width())
/ 2 + $(window).scrollLeft() + 'px'); return this; }
//这样来使用上面的函数： $(element).center();
- 滚动到底部
$(".content").scroll(function(){
if (($(".content").scrollTop()) + $(".content").height() == $(".content").get(0).scrollHeight) {
console.log('滚动到底了')
}
});
多行文字实现垂直居中
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> 多行文字实现垂直居中 </title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 body { font-size:12px;font-family:tahoma;}
8 div.wrap {
9 height:400px;
10 display:table;
11 }
12 div.content {
13 vertical-align:middle;
14 display:table-cell;
15 border:1px solid #FF0099;
16 background-color:#FFCCFF;
17 width:760px;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="wrap">
23 <div class="content">服务器名字服名字服名字服名字服务器服务器名字服名字服名字服名字服务器服务器名字服名字服名字服名字服务器服务器名字服名字服名字服名字服务器
24 }
25 </div>
26 </div>
27 </body>
28 </html>
29
30 多行文字实现垂直居
input, checkbox, radio
-
input 获得/失去焦点时隐藏/显示文字
1 /*---------------输入框获取焦点文字显示，---------------*/
2 function inputdefaule(inputbox){
3 $(inputbox).on({
4 focus:function(){
5 if (this.value == this.defaultValue){
6 this.value="";
7 }
8 },blur:function(){
9 if (this.value == ""){
10 this.value = this.defaultValue;
11 }
12 }
13 });
14 }
15
16 输入框获取焦点文字显示 inputdefaule
- input字数限制
1 /*----------word limit input. limitarea 要限制的输入框, numtips 字数提示, num 允许输入字数-----------*/
2 function words_limit(limitarea,numtips,num) {
3 var curLength=limitarea.val().length;
4 if(curLength>num) {
5 var num=limitarea.val().substr(0,num);
6 limitarea.val(num);
7 alert("超过字数限制，多出的字将被截断！" );
8 }else {
9 numtips.text(num-limitarea.val().length);
10 }
11 }
12
13 字数限制 words_limit
- input只能输入数字
1 第一种：html
2 <input id="amount" style="IME-MODE: disabled; WIDTH: 60px; HEIGHT: 15px" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="5" size="14" name="amount" type="text" />
3
4 第二种：js
5 $(function () {
6 $(".contact input").keyup(function () {
7 //如果输入非数字，则替换为''，如果输入数字，则在每4位之后添加一个空格分隔
8 this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
9 })
10 });
- 限制输入某些特殊字符
$(document).on('change', 'input[type=text], textarea', function () {
$(this).val($.trim($(this).val()));
});
$(document).on('keydown', 'input[type=text], textarea', function (e) {
var isContainsSpecialChar = /[(\`)(\~)(\^)(\<)(\>)(\/)(\$)(\—)]+/g;
if (isContainsSpecialChar.test(e.key)) {
e.preventDefault()
}
})
- AngularJS 禁止input框 输入字母，允许数字和小数点
angular
.module('acp.core')
.directive('siteNumeric', function() {
return {
restrict: 'AC',
link: function(scope, el, attr) {
el.on('keyup', function(event) {
el.val(el.val().replace(/[^0-9.]/g,''));
}).on('paste',function(){
el.val(el.val().replace(/[^0-9.]/g,''));
}).on('input', function(){
el.val(el.val().replace(/[^0-9.]/g,''));
}).css('ime-mode', 'disabled');
}
}
})
- a模拟单、复选框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>a模拟单、复选框</title>
6 <style>
7 .checkbox {
8 display: inline-block;
9 width: 15px;
10 height: 15px;
11 margin-right: 8px;
12 background: url(bankuai_index.png) no-repeat -84px -104px;
13 vertical-align: middle;
14 }
15 .checkbox.checked {
16 background: url(bankuai_index.png) no-repeat -100px -104px;
17 }
18 </style>
19 </head>
20 <body>
21 <p class="uplist size">
22 <span class="titl">尺寸</span>
23 <span class="mcsize on">
24 <span><a href="javascript:void(0)" class="checkbox"></a>64x32 </span>
25 <span><a href="javascript:void(0)" class="checkbox"></a>128x64 </span>
26 <span><a href="javascript:void(0)" class="checkbox"></a>256x128</span>
27 <span><a href="javascript:void(0)" class="checkbox"></a>512x256</span>
28 <span><a href="javascript:void(0)" class="checkbox"></a>1024x512</span>
29 </span>
30 <span class="titl"></span>
31 <span><a href="javascript:void(0)" class="checkbox"></a>添加其他尺寸</span>
32 <span class="must">*</span>
33 </p>
34 <div class="c"></div>
35 </body>
36 <script src="http://cdn.mckuai.com/js/jquery.1.10.min.js" type="text/javascript"></script><script>
37
38 // a模拟复选框
39 $(".checkbox").each(function(){
40 $(this).on('click',function(){
41 //$(this).addClass("checked").parent().siblings().children("a").removeClass("checked"); //单选
42 $(this).toggleClass("checked");
43 });
44 });
45 // 判断a.checked选中的个数
46 /*var countChecked = function() {
47 var n = $( "a.checked" ).length;
48 $( ".c" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
49 };
50 countChecked();
51 $( ".uplist" ).on( "click", countChecked );*/
52 </script>
53 </html>
54
55 a模拟单、复选框
- CheckBox 全选
/* 全选 */
javascript
$(".checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
jquery
$('input:checkbox').prop('checked', $(this).is(':checked'));
demo:
// 全选
$(".checkAll").click(function(){
$('.table-showlist :checkbox').not(this).prop('checked', this.checked);
});
$('.table-showlist td :checkbox').on('change', function(){
$(".checkAll").prop('checked', '');
});
- checkbox 反选
$("#anti-check").click(function(){
$("input[name='checkbox']").each(function(){
if($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked","true");
}
})
})
// 行选中
$('.checkboxWrap').on('click', 'tr', function(e){
let ele = $(this).find('td :checkbox');
if (e.target.type !== 'checkbox') {
if(ele.prop("checked")) {
ele.prop("checked", false);
} else {
ele.prop("checked", true);
}
ele.trigger('change');
}
})
-
input.file.images 图片添加并展示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Document</title>
6 </head>
7 <body>
8 <label class="col-sm-3 text-justify">照片∗</label>
9 <div class="col-sm-6">
10 <input type="file" class="form-control add-client-photo opacity0"/>
11 <img src="" class="client-photo" alt="" />
12 </div>
13 </body>
14 <script src="jquery-1.9.1.js"></script>
15 <script>
16 $(".add-client-photo").change(function() {
17 var $img = $(".client-photo");
18 var fileObj = $(this)[0];
19 var windowURL = window.URL || window.webkitURL;
20 var dataURL;
21 if(fileObj && fileObj.files && fileObj.files[0]){
22 dataURL = windowURL.createObjectURL(fileObj.files[0]);
23 $img.attr('src', dataURL);
24 }else{
25 dataURL = $(this).val();
26 // 两个坑:
27 // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
28 // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
29 $img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
30 $img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
31 }
32 });
33 </script>
34 </html>
背景透明内容不透明
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Document</title>
6 <style type="text/css">
7
8 .demo{
9 padding: 25px;
10 background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
11 }
12 .demo p{
13 color: #f00;
14 }
15 @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
16 .demo{
17 background-color:#000000;
18 filter:Alpha(opacity=50);
19 position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
20 *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
21 }
22 .demo p{
23 position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
24 }
25 }
26
27
28 </style>
29 </head>
30 <body scroll="no">
31 <div class="container">
32
33 <div class="demo">
34 <p>背景透明，文字不透明</p>
35 </div>
36
37
38 </div>
39 </body>
40 </html>
兼容 IE HTML5 浏览器
- 检测各种浏览器
if( $.browser.safari) //检测Safari
if ($.browser.msie && $.browser.version > 6 ) //检测IE6及之后版本
if ($.browser.msie && $.browser.version <= 6 ) //检测IE6及之前版本
if ($.browser.mozilla && $.browser.version >= '1.8' ) //检测FireFox 2及之后版本
-
解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
1 <html>
2 <head>
3
4 <!-- 使用Google的html5shiv包 （ps:最好找个国内的cdn更快）-->
5 <!--[if lt IE9]>
6 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
7 <![endif]-->
8
9 <style>
10 mxria{ color: red; }
11 /*html5 初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素*/
12 article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
13 </style>
14
15 </head>
16 <body>
17 <mxria>Hello!</mxria>
18 </body>
19 </html>
第二种：（来自MDN）
<!--[if lt IE 9]>
<script>
document.createElement("header" );
document.createElement("footer" );
document.createElement("section");
document.createElement("aside" );
document.createElement("nav" );
document.createElement("article");
document.createElement("hgroup" );
document.createElement("time" );
</script>
<noscript>
<strong>Warning !</strong>
Because your browser does not support HTML5, some elements are simulated using JScript.
Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
</noscript>
<![endif]-->
动态添加js/css文件
1 方法一：
2 <script>
3 // JavaScript Document
4 function loadjscssfile(filename, filetype){
5 if(filetype == "js"){
6 var fileref = document.createElement('script');
7 fileref.setAttribute("type","text/javascript");
8 fileref.setAttribute("src",filename);
9 }else if(filetype == "css"){
10
11 var fileref = document.createElement('link');
12 fileref.setAttribute("rel","stylesheet");
13 fileref.setAttribute("type","text/css");
14 fileref.setAttribute("href",filename);
15 }
16 if(typeof fileref != "undefined"){
17 document.getElementsByTagName("head")[0].appendChild(fileref);
18 }
19 }
20 loadjscssfile("do.js","js");
21 loadjscssfile("index.css","css");
22 </script>
23
24 方法二：
25 <script>
26 var dynamicLoading = {
27 css: function(path){
28 if(!path || path.length === 0){
29 throw new Error('argument "path" is correct required !');
30 }
31 var head = document.getElementsByTagName('head')[0];
32 var link = document.createElement('link');
33 link.href = path;
34 link.rel = 'stylesheet';
35 link.type = 'text/css';
36 head.appendChild(link);
37 },
38 js: function(path){
39 if(!path || path.length === 0){
40 throw new Error('argument "path" is correct required !');
41 }
42 var head = document.getElementsByTagName('head')[0];
43 var script = document.createElement('script');
44 script.src = path;
45 script.type = 'text/javascript';
46 head.appendChild(script);
47 }
48 }
49 //动态加载 CSS 文件
50 dynamicLoading.css("test.css");
51 //动态加载 JS 文件
52 dynamicLoading.js("test.js");
53 </script>
jq 继承对象
1 var obj1 = {
2 'a': 's1',
3 'b': [1,2,3,{'a':'s2'}],
4 'c': {'a':'s3', 'b': [4,5,6]}
5 }
6
7 var obj2 = $.extend(true, {}, obj1);
8 obj2.a='s1s1';
9 obj2.b[0]=100;
10 obj2.c.b[0]=400;
11
12 console.log(obj1);
13 console.log(obj2);
14
15 obj2 内部元素的值改变之后，如果 obj1 的相应值保持不变，就说明复制成功。
jQuery 获取当前节点的html包含当前节点的方法
1 <div class="test"><p>hello，你好！</p></div>
2 <script>
3 $(".test").prop("outerHTML");
4 </script>
5 输出结果为：<div class="test"><P>hello,你好！</p></div>
6 因为原生JS DOM里有一个内置属性 outerHTML 用来获取当前节点的html代码(包含当前节点)，所以用jQuery的prop()能拿到，经过实验attr()方法是拿不到的
- 如何设置IE特有的功能
if ($.browser.msie) { //code }
操作元素
-
未排序的集合中找出某个元素的索引号
$("ul > li").click(function () {
var index = $(this).prevAll().length;
});
按键（左键，右键）
- 禁止右键菜单即上下文菜单
document.oncontextmenu = function(){return false;}
- jQuery来检测右键和左键的鼠标单击两种情况
$("#someelement").live('click', function (e) {
if ((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)) {
alert("Left Mouse Button Clicked");
} else if (e.button == 2) {
alert("Right Mouse Button Clicked");
}
});
自定义复制剪切板内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="answer">测试数据<b>test</b></div>
<script>
function setClipboardText(event){
event.preventDefault();
var node = document.createElement('div');
//对documentfragment不熟，不知道怎么获取里面的内容，用了一个比较笨的方式
node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
var htmlData = '<div>著作权归作者所有。<br />'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。<br />'
+ '作者：tiantian<br />链接：http://segmentfault.com/u/tiantian_<br />'
+ '来源：segmentfault<br /><br />'
+ node.innerHTML
+ '</div>';
var textData = '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
+ '作者：tiantian\n链接：http://segmentfault.com/u/tiantian_\n'
+ '来源：segmentfault\n\n'
+ window.getSelection().getRangeAt(0);
if(event.clipboardData){
event.clipboardData.setData("text/html", htmlData);
event.clipboardData.setData("text/plain",textData);
}
else if(window.clipboardData){
return window.clipboardData.setData("text", textData);
}
};
var answer = document.getElementById("answer");
answer.addEventListener('copy',function(e){
setClipboardText(e);
});
</script>
</body>
</html>
金额千位分隔符
/** * 金额按千分位分割 * @param num 金额 * @returns {*} */ function formatMoney(num) { if (null == num || isNaN(num)) { return num; } var re = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g; var n1 = (num + "").replace(re, "$1,"); return n1; } /** * 千分位数字还原成正常 * @param val * @returns {*} */ function unformatMoney(val) { var temp = parseFloat((val + "").replace(/,/gi, '')); return (isNaN(temp) ? 0 : temp); }
//金额的blur 千位分隔符保留两位小数
$(this).val(parseFloat($(this).val().replace(/[^(\d\.\d{2})]/g, '')).toFixed(2).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,"))
日期格式化
/* 日期格式化 start */ Date.prototype.format = function(format) { var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(format)) { format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4- RegExp.$1.length)); } for(var k in o)if(new RegExp("("+ k +")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length==1? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); return format; } /* 日期格式化 end */
