JavaScript&jQuery经常使用要领小记

1.Javascript 函数撙节
用处：如调解浏览器大小，或许用户输入信息，致使重复提交接口

function throttle(method,context) {
clearTimeout(method.tId);
method.tId=setTimeout(function() {
method.call(context);
},500);
}

挪用要领：

window.Onresize= function() {
throttle(winResize);
}

2.Javascript推断手机端接见

function isPhone() {
var sUserAgent = navigator.userAgent;
if (sUserAgent.indexOf('Android') > -1
&& sUserAgent.indexOf('Mobile') > -1
||sUserAgent.indexOf('iPhone') > -1
||sUserAgent.indexOf('iPod') > -1
|| sUserAgent.indexOf('Symbian') > -1
|| sUserAgent.indexOf('IEMobile') > -1){
//coding...
}
}

3.猎取URL地址栏参数

function GetQueryString(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}


4.jQuery返回顶部

$(function() {
//当滚动条的位置处于距顶部100像素以下时，跳转链接涌现，不然消逝
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back_to_top").fadeIn(1500);
}
else
{
$("#back_to_top").fadeOut(1500);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#back_to_top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
});

5.正则检测手机号,邮箱

var reg= /^[1][0-9]\d{9}$/;
mReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;邮箱
qqReg = /^[1-9][0-9]{4,9}$/
if(!reg.test(mobilephone)||mobilephOne== null){
alert("请输入准确的手机号！");
return false;
};

6.天生随机数函数

function getRandom(n){
return Math.floor(Math.random()*n+1)
}

1）猎取0-100的随机数——getRandom(100);

2）猎取0-999的随机数——getRandom(999);

7.jQuery模仿鼠标点击事宜

$("#a").trigger("click");//模仿实行id=a的事宜

8.jQuery-onload让第一次页面加载时图片是淡入体式格局显现

$("#load img").load(function() {
//图片默许隐蔽
$(this).hide();
//运用fadeIn殊效
$(this).fadeIn("5000");
})






9.推断微信浏览器

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
event.preventDefault();
...
}

10.锚点滑动结果

$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 400);
return false;
});

11.多行文本溢出显现省略号

.figcaption {
background: #EEE;
width: 410px;
height: 3em;
margin: 1em;
}
.figcaption p {
margin: 0;
line-height: 1.5em;
}
//////css
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
word-break: break-all;


12.倒计时

var lastTime = 0; // 剩余时间 （秒）
var Timer = null
function calTime(){
if(lastTime <= 0){
clearTimeout(Timer);
$leftTime.html('已超时');
return false;
}
var minute = parseInt(lastTime / 60, 10);
var secOnd= lastTime%60;
var mm = minute<10 ? ('0'+minute) : minute;
var ss = second<10 ? ('0'+second) : second;
$leftTime.html(mm +'分'+ss+'秒');
lastTime--;
setTimeout(function(){
calTime();
},1000)
}
var $leftTime = $('#leftTime');
if($leftTime.length){
lastTime = Number($('#leftTime').data('resttime'));
Timer = setTimeout(function(){
calTime();
},1000);
}

13.点击发送验证码倒计时

//倒计时60s
var wait=60;
function time(o) {
console.log(o);
if (wait == 0) {
o.removeAttr("disabled");
o.val("免费猎取验证码");
wait = 60;
} else {
o.attr("disabled", true);
o.val("从新发送(" + wait + ")");
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}


14.jquery 弹出层

dom:


//点击弹窗以外部份隐蔽
$(document).click(function(event) {
var _con = $(".pop");
if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
$(".pop").hide();
}
});

15.Javascript COOKIE操纵

//设置COOKIE
function setCOOKIE(COOKIEName,COOKIEValue,COOKIEExpires,COOKIEPath)
{
COOKIEValue = escape(COOKIEValue);//编码latin-1
if(COOKIEExpires=="")
{
var nowDate = new Date();
nowDate.setMonth(nowDate.getMonth()+6);
COOKIEExpires = nowDate.toGMTString();
}
if(COOKIEPath!="")
{
COOKIEPath = ";Path="+COOKIEPath;
}
document.COOKIE= COOKIEName+"="+COOKIEValue+";expires="+COOKIEExpires+COOKIEPath;
}
//猎取COOKIE
function getCOOKIEValue(COOKIEName)
{
var COOKIEValue = document.COOKIE;
var COOKIEStartAt = COOKIEValue.indexOf(""+COOKIEName+"=");
if(COOKIEStartAt==-1)
{
COOKIEStartAt = COOKIEValue.indexOf(COOKIEName+"=");
}
if(COOKIEStartAt==-1)
{
COOKIEValue = null;
}
else
{
COOKIEStartAt = COOKIEValue.indexOf("=",COOKIEStartAt)+1;
COOKIEEndAt = COOKIEValue.indexOf(";",COOKIEStartAt);
if(COOKIEEndAt==-1)
{
COOKIEEndAt = COOKIEValue.length;
}
COOKIEValue = unescape(COOKIEValue.substring(COOKIEStartAt,COOKIEEndAt));//解码latin-1
}
return COOKIEValue;
}

16.页面初始化渐变

17.用iframe模仿ajax上传文件

1.
//这里是重点。要上传文件enctype这个属性不可少，target的值改成iframe的name的值。
2.
3.Response.Write("






iframe推断手机是不是装置app，装置翻开，未装置下载


function show(){
if( navigator.userAgent.indexOf('MicroMessenger') != -1 ){
document.getElementById("openBrowser").style.display = "block";
}else{
}
} function clik(){
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或许uc浏览器
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var isIpad = u.indexOf('iPad') > -1; //是不是iPad
var isIPhOne= u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1; //是不是为iPhone或许QQHD浏览器
if(isAndroid){
var ifrSrc = "jsmcc://H/5"+"?json={'urlorClass':'http://wap.js.10086.cn/activity/482','type':'0','description':'0','isLogin':'1','title':'晋级4G，抱走6GB超大流量','isurlComplete':'0','isShare':'0'}";
//运用iframe体式格局触发jsmcc://
var ifr = document.createElement('iframe');
ifr.src = ifrSrc ;
ifr.style.display = 'none';
document.body.appendChild(ifr);
//当iframe加载5秒后，不管是不是能切换到APP窗口（未装置或许版本不对，是不会翻开APP的），页面继承跳转
setTimeout( function(){
window.location.href="http://wap.js.10086.cn/userfiles/wapapp/jsmcc.apk";
//固然也能够回退到前一页面
//window.history.go(-1);
},3000);

}else if(isIOS || isIpad || isIPhone){
var ifrSrc = "jsmcc://H/5"+"?json={'urlorClass':'http://wap.js.10086.cn/activity/482','type':'0','description':'0','isLogin':'1','title':'晋级4G，抱走6GB超大流量','isurlComplete':'0','isShare':'0'}";
//运用iframe体式格局触发jsmcc://
var ifr = document.createElement('iframe');
window.location = ifrSrc ;
ifr.style.display = 'none';
document.body.appendChild(ifr);
//当iframe加载5秒后，不管是不是能切换到APP窗口（未装置或许版本不对，是不会翻开APP的），页面继承跳转
setTimeout( function(){
window.location.href="https://itunes.apple.com/cn/app/id446332125?mt=8&t";
//固然也能够回退到前一页面
//window.history.go(-1);
},3000);
}else{
//电脑端 不做处置惩罚
}
}


js字符串乘法

// 字符串乘法
String.prototype.times = function(n) {
return Array.prototype.join.call({length:n+1}, this);
};
"*".times(5) => *****

Javascript多线程

var worker;
function startWorker(){
if(typeof(Worker)!=="undefined"){
// if(typeof(worker)=="undefined"){
// }
//比较主要的js，零丁安排
worker = new Worker("./js/countdown.js");
worker.Onmessage= function (event) {

};
}
else{
}
} //烧毁
function stopWorker(){
worker.terminate();
}


// 推断浏览器是不是支撑placeholder

var isPlaceholer = function(){
var input = document.createElement('input');
return "placeholder" in input;
}
var editPlaceholder = function(){
var $phOne= $('.phone');
if (!isPlaceholer()) {
$phone.val('请输入准确的手机号码');
$phone.focus(function(event) {
var msg = $phone.val();
if (msg == '请输入准确的手机号码') {
$phone.val('');
}
});
$phone.blur(function(event) {
var msg = $phone.val();
if (msg == '') {
$phone.val('请输入准确的手机号码');
}
});
}
};