在《鋒利的jQuery》中整理的幾個現在還常用的jQuery代碼片段。
1.禁用頁面，禁用頁面的右鍵菜單
//禁用右鍵菜單
$(document).ready(function(){
$(document).bind('contextmenu',function(e){
return false;
})
})
2.新窗口打開界面
//新窗口打開界面
$(document).ready(function(){
//1.href='http://'的超鏈接將會在新窗口打開連接
$('a[href^="http://"]').attr("target","_blank")
//rel='external'的超鏈接將會在新窗口打開連接
$('a[rel$="external"]').click(function(){
this.target = "_blank";
})
})
GIF.gif
3.判斷瀏覽器類型
//判斷瀏覽器類型
$(document).ready(function(){
if(/firefox/.test(navigator.userAgent.toLowerCase())){
console.log('火狐')
}
if(/webkit/.test(navigator.userAgent.toLowerCase())){
console.log('Safari, Google Chrome,傲游3,獵豹瀏覽器,百度瀏覽器 opera瀏覽器')
}
if(/opera/.test(navigator.userAgent.toLowerCase())){
console.log('歐朋瀏覽器')
}
if(/msie/.test(navigator.userAgent.toLowerCase())){
console.log('ie')
}
//IE 6
if ('undefined' == typeof(document.body.style.maxHeight)) {
//
}
//IE 6-8
if (!$.support.leadingWhitespace) {
//
}
//IE11的檢測方法
var ua=navigator.userAgent.toLowerCase();
if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
//瀏覽器類型
browserType = "IE";
//瀏覽器版本
browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
}
})
4.輸入文本框獲取或者失去焦點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="address" value="請輸入郵箱地址"/>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
//當獲取焦點的時候
$('#address').focus(function(){
var tex = $(this).val();
if(tex == '請輸入郵箱地址'){
$(this).val('');
}
})
//當失去焦點的時候
$('#address').blur(function(){
var tex = $(this).val();
if(tex == ''){
$(this).val('請輸入郵箱地址');
}
})
</script>
</body>
</html>
5.返回頭部滑動動畫
//返回頭部滑動動畫
jQuery.fn.scrollTo = function(speed){
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({scrollTop:targetOffset},speed);
return this
}
//使用
$(".returnTop").click(function(){
$("body").scrollTo(500);
return false;
})
GIF.gif
6.獲取鼠標位置
//獲取鼠標位置
$(document).ready(function(){
$(document).mousemove(function(e){
$("#XY").html("X:"+e.pageX+" Y:"+e.pageY)
})
})
GIF.gif
7.判斷元素是否存在
//判斷元素是否存在
$(document).ready(function(){
if($('#id').length){
//do something
}
})
8.點擊div也可以跳轉
//點擊div也可以跳轉
$('div').click(function(){
window.location = $(this).find("a").attr("href");
})
//使用
<div><a href = "index.html">回到首頁</a></div>
9.設置div在屏幕中央
//設置div在屏幕中央
$(document).ready(function(){
jQuery.fn.center = function(){
this.css('position','absolute');
this.css('top',( $(window).height()-this.height() )/2 + $(window).scrollTop() +'px' )
this.css('left',( $(window).width()-this.width() )/2 + $(window).scrollLeft() +'px' )
}
//使用
$('#XY').center()
})
10.回車提交
//回車提交表單
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which=='13'){
alert('回車提交')
}
})
})
11.設置Ajax全局參數
//設置全局Ajax參數
$('#load').ajaxStart(function(){
showLoading();//顯示loading
disableButton();//禁用按鈕
})
$('#load').ajaxComplete(function(){
hideLoading();//隱藏按鈕
enableButtons();//啟用按鈕
})
12.獲取選中的下拉框
//獲取攢中的下拉框
$('#element').find('option:selected');
$('#element option:selected')
