首页 / 脚本样式 / JavaScript / jQuery 常用代码集锦（必看篇）

var tog = false; // or true if they are checked on load$（"a"）.click（function（） { $（"input[type=checkbox]"）.attr（"checked",！tog）; tog = ！tog;}）;

$（document）.mousemove（function（e）{$（document）.ready（function（） {$（）.mousemove（function（e）{$（"#XY"）.html（"Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY）;}）;}）;

$（"#theGBin1Image"）.attr（"src", "image.jpg"）.load（function（） {alert（"This Image Has Been Loaded"）;}）;

var dt = new Date（）;dt.setSeconds（dt.getSeconds（） + 60）;document.cookie = "cookietest=1; expires=" + dt.toGMTString（）;var cookiesEnabled = document.cookie.indexOf（"cookietest="） ！= -1;if（！cookiesEnabled）{ //cookies have not been enabled}

var date = new Date（）;date.setTime（date.getTime（） + （x * 60 * 1000））;$.cookie（"example", "foo", { expires: date }）;

$（"#form"）.keypress（function（e） { if （e.which == 13） { return false; }}）;

function clearForm（form） { // iterate over all of the inputs for the form // element that was passed in $（":input", form）.each（function（） { var type = this.type; var tag = this.tagName.toLowerCase（）; // normalize case // it"s ok to reset the value attr of text inputs, // password inputs, and textareas if （type == "text" || type == "password" || tag == "textarea"）this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their "value" changed else if （type == "checkbox" || type == "radio"）this.checked = false; // select elements need to have their "selectedIndex" property set to -1 // （this works for both single and multiple select elements） else if （tag == "select"）this.selectedIndex = -1; }）;};

$（document）.ready（function（） { $（"form"）.submit（function（） { if（typeof jQuery.data（this, "disabledOnSubmit"） == "undefined"） {jQuery.data（this, "disabledOnSubmit", { submited: true }）;$（"input[type=submit], input[type=button]", this）.each（function（） {$（this）.attr（"disabled", "disabled"）;}）;return true; } else {return false; } }）;}）;

$（function（）{ $（"select#ctlJob"）.change（function（）{ $.getJSON（"/select.php",{id: $（this）.val（）, ajax: "true"}, function（j）{var options = "";for （var i = 0; i < j.length; i++） {options += "<option value="" + j[i].optionValue + "">" + j[i].optionDisplay + "</option>";}$（"select#ctlPerson"）.html（options）; }） }）}）

.filter（":not（:has（.selected））"） //去掉所有不包含class为.selected的元素

//jQuery 1.4.* includes support for the has method. This method will find //if a an element contains a certain other element class or whatever it is //you are looking for and do anything you want to them. $（"input"）.has（".email"）.addClass（"email_icon"）;

//Look for the media-type you wish to switch then set the href to your new style sheet $（"link[media="screen"]"）.attr（"href", "Alternative.css"）; 

//Toggle class allows you to add or remove a class //from an element depending on the presence of that //class. Where some developers would use: a.hasClass（"blueButton"） ? a.removeClass（"blueButton"） : a.addClass（"blueButton"）; //toggleClass allows you to easily do this using a.toggleClass（"blueButton"）;

$（"#thatdiv"）.replaceWith（"fnuh"）;

$（"#foo"）.bind（"click", function（） {alert（"User clicked on "foo.""）; }）; 

jQuery.preloadImages = function（） { for（var i = 0; i"）.attr（"src", arguments[i]）; } }; // Usage $.preloadImages（"image1.gif", "/path/to/image2.png", "some/image3.jpg"）; 

$（"button.someClass"）.live（"click", someFunction）; //Note that in jQuery 1.4.2, the delegate and undelegate options have been //introduced to replace live as they offer better support for context //For example, in terms of a table where before you would use.. // .live（） $（"table"）.each（function（）{ $（"td", this）.live（"hover", function（）{ $（this）.toggleClass（"hover"）; }）; }）; //Now use.. $（"table"）.delegate（"td", "hover", function（）{ $（this）.toggleClass（"hover"）;}）;

jQuery.fn.autoscroll = function（selector） { $（"html,body"）.animate（ {scrollTop: $（selector）.offset（）.top}, ）;}//Then to scroll to the class/area you wish to get to like this:$（".area_name"）.autoscroll（）;

Detect Safari （if（ $.browser.safari））,Detect IE6 and over （if （$.browser.msie && $.browser.version > 6 ））,Detect IE6 and below （if （$.browser.msie && $.browser.version <= 6 ））,Detect FireFox 2 and above （if （$.browser.mozilla && $.browser.version >= "1.8" ）

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"）{//Apply the standard maxLengththis.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）;}}; } }）;};//Usage:$（"#gbin1textarea"）.maxLength（500）;

var cloned = $（"#gbin1div"）.clone（）;

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;}//Use the above function as: $（"#gbin1div"）.center（）;

jQuery（"#meeting_tabs ul li"）.click（function（）{jQuery（this）.addClass（"tabulous_active"）.siblings（）.removeClass（"tabulous_active"）;jQuery（"#tabs_container>.pane:eq（"+jQuery（this）.index（）+"）"）.show（）.siblings（）.hide（）;}）<div id="meeting_tabs"><ul><li class="tabulous_active"><a href="#" title="">进行中</a></li><li><a href="#" title="">未开始</a></li><li><a href="#" title="">已结束</a></li><li><a href="#" title="">全部</a></li> </ul> <div id="tabs_container"> <div class="pane">1</div> <div class="pane">2</div> <div class="pane">3</div> <div class="pane">4</div> </div></div>