$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
<a href="http://www.cssrain.cn" >新窗口</a>
<a href="http://www.cssrain.cn" rel="external">新窗口</a>
<a href="29.扩展String对象的方法.html" >当前窗口</a>
<a href="#name">当前窗口</a>
$(document).ready(function() {
//例子1: href=”http://”的超链接将会在新窗口打开链接
$('a[href^="http://"]').attr("target", "_blank");
//例子2: rel="external"的超链接将会在新窗口打开链接
$("a[rel$='external']").click(function(){
this.target = "_blank";
});
});
$(document).ready(function() {
// Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
// do something
}
// Safari
if( $.browser.safari ){
// do something
}
// Chrome
if( $.browser.chrome){
// do something
}
// Opera
if( $.browser.opera){
// do something
}
// IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
alert("ie6")
}
// anything above IE6
if ($.browser.msie && $.browser.version > 6){
alert("ie6以上")
}
});
<input type="text" class="text1" />
$(document).ready(function() {
$("input.text1").val("Enter your search text here.");
textFill( $('input.text1') );
});
function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){
input.val('');
}
}).blur( function(){
if( $.trim(input.val()) == '' ){
input.val(originalvalue);
}
});
}
<div style="width:100%;height:800px;"></div>
<a href="#nogo" id="goheader">返回顶部</a>
jQuery.fn.scrollTo = function(speed) {
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({scrollTop: targetOffset}, speed);
return this;
};
// use
$("#goheader").click(function(){
$("body").scrollTo(500);
return false;
});
<div id="XY" ></div>
$(document).ready(function () {
$(document).mousemove(function(e){
$('#XY').html("X : " + e.pageX + " | Y : " + e.pageY);
});
});
<div id="XY" ></div>
$(document).ready(function() {
if ($('#XY').length){
alert('元素存在!')
}else{
alert('元素不存在!')
}
});
<div style="width:200px;height:40px;background:#eee;cursor:pointer;">
<a href="http://www.cssrain.cn">home</a>
</div>
$(document).ready(function() {
$("div").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
body.large{
font-size:20px;
}
body.large a{
font-size:20px;
color:red;
}
<ul>
<li><a title="百　度" target="_blank" href="http://www.baidu.com/index.php?tn=monline_5_dg">百　度</a></li>
<li><a title="Google" target="_blank" href="http://i.firefoxchina.cn/parts/google_rdr.html">Google</a></li>
<li><a title="新浪" target="_blank" href="http://www.sina.com.cn/">新浪</a></li>
</ul>
$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() > 900 ) {
$('body').addClass('large');
}else{
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
});
#XY{
width:460px;
height:300px;
background:#aaa;
}
<div id="XY"></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");
return this;
}
//use
$("#XY").center();
});
#XY1{
width:560px;
height:300px;
background:#aaa;
}
#XY2{
width:360px;
height:300px;
background:#aaa;
}
<div id="XY1" class="box"></div>
<div id="XY2" class="box"></div>
$(document).ready(function() {
$.extend($.expr[':'], {
moreThen500px: function(a) {
return $(a).width() > 500;
}
});
$('.box:moreThen500px').click(function() {
alert();
});
});
#XY{
width:40px;
height:100px;
background:#aaa;
}
<button id="XY1" class="box">开始动画</button>
<button id="XY2" class="box">关闭动画</button>
<button id="XY3" class="box">开启动画</button>
<div id="XY" class="box"></div>
$(document).ready(function() {
$("#XY1").click(function(){
animateIt();
});
$("#XY2").click(function(){
jQuery.fx.off = true;
});
$("#XY3").click(function(){
jQuery.fx.off = false;
});
});
function animateIt() {
$("#XY").slideToggle("slow");
}
#XY{
width:40px;
height:100px;
background:#aaa;
}
<div id="XY" class="box"></div>
$(document).ready(function() {
$("#XY").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
})
});
#XY{
width:40px;
height:100px;
background:#aaa;
}
<input type="input" />
$(document).ready(function() {
$("input").keyup(function(e){
if(e.which=="13"){
alert("回车提交!")
}
})
});
#load{
display:none;
}
<div id="load">加载中...</div>
<input type="button" id="send1" value="ajax"/>
<div id="resText1"></div>
$(document).ready(function() {
$('#send1').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){
$("#resText1").empty();
$.each(data.items, function( i,item ){
$("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
if ( i == 3 ) {
return false;
}
});
}
);
});
$.ajaxPrefilter(function( options ) {
options.global = true;
});
$("#load").ajaxStart(function(){
showLoading(); //显示loading
disableButtons(); //禁用按钮
});
$("#load").ajaxComplete(function(){
hideLoading(); //隐藏loading
enableButtons(); //启用按钮
});
});
function showLoading(){
$("#load").show();
}
function hideLoading(){
$("#load").hide();
}
function disableButtons(){
$("#send1").attr("disabled","disabled");
}
function enableButtons(){
$("#send1").removeAttr("disabled");
}
<input type="button" id="send1" value="get" onclick="getObj()"/>
<select id="someElement">
<option>一班</option>
<option>二班</option>
<option>三班</option>
</select>
function getObj(){
var $obj = $('#someElement').find('option:selected');
alert( $obj.val() );
}
<button >toggle</button>
<input type="checkbox" value="1" />篮球
<input type="checkbox" value="2" />足球
<input type="checkbox" value="3" />羽毛球
var tog = false;
$('button').click(function(){
$("input[type=checkbox]").attr("checked",!tog);
tog = !tog;
});
li.active{
font-size:20px;
color:red;
}
<ul id="nav">
<li>Google</li>
<li>百　度</li>
<li>新浪</li>
</ul>
/* 不这样做
$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});
*/
//替代做法是
$('#nav li').click(function(){
$(this).addClass('active')
.siblings().removeClass('active');
});
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
color: #999999;
}
a {
color:#333399;
}
a:hover {
text-decoration: none;
}
a.pdf {
background: url(img/file-red.gif) no-repeat;
padding-left: 16px;
}
a.zip {
background: url(img/file-orange.gif) no-repeat;
padding-left: 16px;
}
a.psd {
background: url(img/file-blue.gif) no-repeat;
padding-left: 16px;
}
<p><a href="http://www.webdesignerwall.com/file/wdw-logo.pdf">PDF file</a> (wdw-logo.pdf)</p>
<p><a href="http://www.webdesignerwall.com/file/wdw-logo.psd">PSD file</a> (wdw-logo.psd)</p>
<p><a href="http://www.webdesignerwall.com/file/wdw-logo.zip">Zip file</a> (wdw-logo.zip)</p>
$(document).ready(function(){
$("a[href$='pdf']").addClass("pdf");
$("a[href$='zip']").addClass("zip");
$("a[href$='psd']").addClass("psd");
});
<p><button>Run</button></p>
<div class="first">Test</div>
$(document).ready(function(){
$("button").click(function() {
$("div").slideUp(300).delay(3000).fadeIn(400);
});
/*
//这是1.3.2中我们使用setTimeout来实现的方式
setTimeout(function() {
$('div').fadeIn(400)
}, 3000);
*/
//而在1.4之后的版本可以使用delay()这一功能来实现的方式
//$("div").slideUp(300).delay(3000).fadeIn(400);
});
<p><button>Run</button></p>
<div class="first">Test</div>
// 在firebug上查看
jQuery.log = jQuery.fn.log = function (msg) {
if (console){
console.log("%s: %o", msg, this);
}
return this;
};
$(document).ready(function(){
$("button").click(function() {
$('#someDiv').hide().log('div被隐藏');
});
});
.hover{
background:#f60;
}
<table >
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
</table>
$(document).ready(function(){
/*
// 为table里面的td元素绑定click事件，不管td元素是一直存在还是动态创建的
// jQuery 1.4.2之前使用的方式
$("table").each(function(){
$("td", this).live("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");
});
});
.box{
width:200px;
height:200px;
margin:10px;
background:#333;
}
<div id="rect" class="box"></div>
/*! Copyright (c) 2010 Burin Asavesna (http://helloburin.com)
* Licensed under the MIT License (LICENSE.txt).
*/
(function($) {
// borderRadius get hooks
var div = document.createElement('div'),
divStyle = div.style,
support = $.support,
dirs = "TopLeft TopRight BottomRight BottomLeft".split(" ");
// WebKit supports "borderRadius" as well as "WebKitBorderRadius", weird
support.borderRadius =
divStyle.MozBorderRadius === ''? 'MozBorderRadius' :
(divStyle.MsBorderRadius === ''? 'MsBorderRadius' :
(divStyle.WebkitBorderRadius === ''? 'WebkitBorderRadius' :
(divStyle.OBorderRadius === ''? 'OBorderRadius' :
(divStyle.borderRadius === ''? 'BorderRadius' :
false))));
div = null;
function borderCornerRadius(direction, prefix) {
prefix = prefix === undefined || prefix === '' ? 'border' : prefix + 'Border';
if ( support.borderRadius && support.borderRadius == "MozBorderRadius" ) {
// e.g. MozBorderRadiusTopleft
return prefix + "Radius" + direction.charAt(0).toUpperCase()+direction.substr(1).toLowerCase();
} else {
// e.g. WebKitBorderTopLeftRadius, borderTopLeftRadius, etc
return prefix + direction + "Radius";
}
}
if ( support.borderRadius && support.borderRadius !== "BorderRadius" ) {
var vendor_prefix = support.borderRadius.replace('BorderRadius','');
$.cssHooks.borderRadius = {
get: function( elem, computed, extra ) {
// return each of the directions, topleft, topright, bottomright, bottomleft
return $.map(dirs, function( dir ) {
return $.css(elem, borderCornerRadius( dir, vendor_prefix ));
}).join(" ");
},
set: function( elem, value ) {
// takes in a single value or shorthand (just letting the browser handle this)
// e.g. 5px to set all, or 5px 0 0 5px to set left corners
elem.style[ borderCornerRadius( '', vendor_prefix ) ] = value;
}
};
$.each(dirs, function( i, dir ) {
$.cssHooks[ "borderRadius" + dir ] = {
get: function( elem, computed, extra ) {
return $.css(elem, borderCornerRadius( dir, vendor_prefix ));
},
set: function( elem, value ) {
elem.style[ borderCornerRadius( dir, vendor_prefix ) ] = value;
}
};
});
}
})(jQuery);
//use
$('#rect').css('borderRadius',10);
<div id="panel" style="display:none">
<button>Close</button>
</div>
$('#panel').fadeIn(function(){
// Using $.proxy :
$('#panel button').click($.proxy(function(){
// this 指向 #panel
$(this).fadeOut();
},this));
});
<textarea id="mytextarea"></textarea>
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 hasSelection = 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 && !hasSelection);
};
this.onkeyup = function(){
if(this.value.length > max){
this.value = this.value.substring(0,max);
}
};
}
});
};
//use
$('#mytextarea').maxLength(10);
<p><a href="#nogo">jQuery</a></p>
</div>
(function($) {
$.fn.stripHtml = function() {
var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
this.each(function() {
$(this).html( $(this).html().replace(regexp,'') );
});
return $(this);
}
})(jQuery);
//用法：
$('div').stripHtml();
<input type="text" /><button >check</button>
</div>
$.extend(String.prototype, {
isPositiveInteger:function(){
return (new RegExp(/^[1-9]\d*$/).test(this));
},
isInteger:function(){
return (new RegExp(/^\d+$/).test(this));
},
isNumber: function(value, element) {
return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));
},
trim:function(){
return this.replace(/(^\s*)|(\s*$)|\r|\n/g, "");
},
trans:function() {
return this.replace(/</g, '<').replace(/>/g,'>').replace(/"/g, '"');
},
replaceAll:function(os, ns) {
return this.replace(new RegExp(os,"gm"),ns);
},
skipChar:function(ch) {
if (!this || this.length===0) {return '';}
if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}
return this;
},
isValidPwd:function() {
return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));
},
isValidMail:function(){
return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));
},
isSpaces:function() {
for(var i=0; i<this.length; i+=1) {
var ch = this.charAt(i);
if (ch!=' '&& ch!="\n" && ch!="\t" && ch!="\r") {return false;}
}
return true;
},
isPhone:function() {
return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));
},
isUrl:function(){
return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&=:]*)$/).test(this));
},
isExternalUrl:function(){
return this.isUrl() && this.indexOf("://"+document.domain) == -1;
}
});
$("button").click(function(){
alert( $("input").val().isInteger() );
});
相关推荐
jQuery技巧总结.pdf jQuery jQuery技巧
jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送
jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结
jQuery技巧，比较经典的几种用法总结。
jQuery 技巧总结,是经验的系统总结，对新手很有帮助，如果你是老手就不要下了，句句实话。jQuery 技巧总结,是经验的系统总结，对新手很有帮助，如果你是老手就不要下了，句句实话。jQuery 技巧总结,是经验的系统总结...
jQuery教程14个实用的jQuery技巧
jQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.docjQuery技巧总结.doc
jQuery技巧大放送，jQuery下拉菜单，jQuery切换菜单
JQuery技巧学习附带API文档,有demo演示，帮你快速学习应用JQuery
jQuery技巧大放送.pdf jQuery技巧大放送.pdf
jQuery技巧大放送.chm,jQuery学习型的简单使用留记说明，大家也可以看看。
jQuery 技巧大放送,多个使用技巧，推荐参考文档。
jquery技巧总结
jQuery技巧大放送很实用.doc jQuery技巧大放送很实用.doc
25个实用的jQuery技巧和解决方案 前端开发不得不知道的事
本人收集的jQuery技巧，希望希望对你有帮助。