一些实用的jQuery技巧
1、禁用页面的右键菜单
2、新窗口打开页面$(document).bind("contextmenu",function(e){
return false;
})
//例子1：href="http://"的超链接将会在新窗口打开链接
$('a[href=^"http://"]').attr("target","_blank");//例子2：rel="external"的超链接将会在新窗口打开链接
$("a[rel='external']").click(function(){
this.target="_blank";
});
3、判断浏览器类型
4、输入框文字获取和失去焦点//firefox 2 and above
if($.suport.mozilla$$$.suport.version>="1.8"){
//do something
}
//Safari
if($.suport.safari){
//do something
}
//Chrome
if($.suport.chrome){
//do something
}
//Opera
if($.$.suport.opera){
//do something
}
//IE6 and below
if($.suport.msie&& $.suport.version<=6){
//do something
}
//anything above IE6
if($.suport.msie&&$.suport.version>6){
//do something
}
$("input.text1").val("Enter your search text here:");
textFill($('input.text1')；function textFill(input){
var originalvalue=input.val();
input.focus(function(){
if($.trim(input.val())==""){
input.val(originalvalue);
}
}).blur(function(){
if($.trim(input.val())==""){
input.val(originalvalue);
}
});
}
5、返回头部滑动动画
jQuery.fn.scrollTo=function(speed) {
var targetOffset=$(this).offset().top;
$("html.body").stop().animate({scrollTop:targetOffset}, speed)
return this;
};
//use
$("#gotoHead").click(function() {
$("body").scrollTo(500);
return false;
});
6、获取鼠标位置
$(document).mousemove(function(e){
$("#XY").html("X:"+e.pageX+"|Y:"+e.pageY);
console.log("X:"+e.pageX+"|Y:"+e.pageY);
});7、判断元素是否存在
//7、判断元素是否存在
if($("#id").length){
//do something
}
8、点击div也可以跳转
$("div").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
9、根据浏览器大小添加不同样式
function checkWindowSize(){
if($(window).width()>1200){
$("body").addClass("large");
}else {
$("body").removeClass('large')
}
}
$(window).resize(checkWindowSize);
10、设置div在屏幕中央
jQuery.fn.center=function(){
this.css({
"position":"absolute",
"top":($(window).height()-this.height())/2+$(window).scrollTop()+"px");
"left":($(window).width()-this.width())/2+$(window).scrollLeft()+"px");
});
return this;
}
//use
$("#XY").center();
11、创建自己的选择器
$.extend($.expr[':'], {
mareThen500px:function(a){
return $(a).width()>500;
}
});
//use
$(".box:moreThen500px").click(function() {
//do something
});
12、关闭所有动画效果
jQuery.fx.off=true;
13、检测鼠标的右键和左键
$("#XY").mousedown(function(e){
alert(e.which) //1-鼠标右键；2-鼠标中键；3-鼠标右键
});
14、回车提交表单
$("input").keyup(function(e){
if(e.which==="13"){
alert("回车提交！");
}
});
15、设置全局Ajax参数
$("#load").ajaxStart(function(){
showLoading();//显示loading
disableButtons();//禁用按钮
})；
$("#load").ajaxComplete(function() {
hideLoading();//隐藏loading
enableButtons();//启用按钮
});
16、获取选中的下拉框
$("#someElement").find("option:selected");
$("#someElement option:selected");
17、切换复选框
var tog=false;
$("button").click(function(){
$("input[type=checkbox]").attr("checked",!tog);
tog=!tog;
});
18、使用sibling()来选择同悲元素
//不这样做
$("#nav li").click(function(){
$("nav li").removeClass('active');
$(this).addClass('active');
});
//替代做法
$("#nav li").click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
19、个性化链接
$("a[href$='pdf']").addClass("pdf");
$("a[href$='zip']").addClass('zip');
$("a[href$='psd']").addClass('psd');
20、在一段时间之前自动隐藏或关闭元素
//使用settimeout来实现的方式
setTimeOut(function(){
$("div").fadeIn(400);
},3000);
//使用delay()这一功能来实现
$("div").slideUp(300).delay(3000).fadeIn(400);
21、使用FireFox和FireBug来记录事件日志
jQuery.log=jQuery.fn.log=function(msg){
if(console){
console.log("%s",msg,this);
}
return this;
};
22、为任何与选择器相匹配的元素绑定事件
//为table里面的td元素绑定click事件，不管td元素是一直存在还是动态创建
//jQuery1.4.2之前使用的方式
$(".table").each(function(){
$("td",this).lice("click",function(){
$(this).toggleClass('hover');
});
});
//jQuery 1.4.2使用的方式
$("table").delegate('td', 'click', function() {
$(this).toggleClass('hover');
});
//jQuery 1.7.1使用方式
$("table").on("click","td",function(){
$(this).toggleClass('hover');
})
23、使用css钩子
jQuery.cssHooks是1.4.3新增的方法，当你定义新的css Hooks时实际上定义的是getter和setter方法。比如，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。其实我们可以通过定义css Hooks将其封装成统一的接口borderRadius，而不是一意设置css属性，代码如下：
$.cssHooks['borderRadius']={
get:function(elem,computed,extra){
//依赖于浏览器读取的值
//-moz-border-radius，-webkit-border-radius 或者border-radius
}
set:function(elem,value){
//设置css3属性
}
}；
//use
$("#rect").css("borderRadius",5);
24、$.proxy()使用
使用回调方法的缺点之一是当执行类库中的方法后，上下文对象被设置到另外一个元素，例如：
html代码：
<div id=”panel”style=”display:none”><button>Close</buttono></div>
jQuery代码：
$(“#panel”).fadeIn(function(){
$(“#panel button”).click(function(){
$(this).fadeOut();
});
});
上面的代码将会使button元素消失而不是panel元素，可以使用$.proxy()解决这个问题：
$("#panel").fadeIn(function() {
//using $.proxy():
$("#panel button").click($.proxy(function(){
//this指向#panel
$(this).fadeOut();
},this));
});
25.限制Text-Area域中的字符的个数
jQuery.fn.maxLength = function(max) {
this.each(function() {
var type = this.tagName.toLowerCase();
var inputType = this.type ? this.type.toLowerCase() : null;
if (type == "input" && inputType == "text" || inputType ==
"password") {
//应用标准的maxLength
this.maxLength = max;
} else if (type == "textarea") {
this.onkeypress = function(e) {
var ob = e || event;
var keyCode = ob.keyCode;
var hasSelecton = document.selection ? document
.selection.createRange().text.length > 0;
this.selectionStart != this.selectionEnd;
return !(this.value.length >= max && (keyCode >
50 || keyCode == 32 || keyCode == 0 ||
keyCode == 13) && ob.ctrlKey && !ob
.altKey && !hasSelecton);
};
this.onkeyup = function() {
if (this.value.length > max) {
this.value = this.value.substring(0, max);
}
};
}
});
};
//use
$("#mytextarea").maxLength(10);
26.本地存储
localStorage.someData="This is going to be saved";
27.解析json数据时报parseError错误
jQuery在1.4版本后，采用了更为严格的json解析方式，即所有内容都必须要有双引号，如果升级jQuery版本后，ajax加载json报错，有可能就是这个原因。
//1.4之前版本，key没引号，这样没问题
｛
key:"2456453",
status:"0"
｝
//1.4版本之后都必须加上双引号
｛
"key":"2456453",
"status":"0"
｝
28.从元素中除去HTML
$.fn.stripHtml = function() {
var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
this.each(function() {
$(this).html($(this).html().replace(regexp.
''));
});
return $(this);
}
扫一扫
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
