JQuery code snippet: some practical sample code

JQuery is currently a very popular javascript framework. Below are some practical jQuery sample code snippets collected by the help house. Of course, you can download the latest version of jQuery or read the jquery Chinese manual, to better familiarize yourself with jquery.

★Use jQuery to change the style sheet

$("link[media='screen']").attr("href", "Alternative.css");

★JQuery detects browser types

 (if( $.browser.safari)) (if ($.browser.msie && $.browser.version > 6 )) (if ($.browser.msie && $.browser.version <= 6 )) (if ($.browser.mozilla && $.browser.version >= '1.8' )) 

★JQuery verifies whether an element is null.

 if ($("#Demo").html()) { //null;} 

★JQuery obtains the index value from the set.

 $("ul > li").click(function () { var index = $(this).prevAll().length; }); 

★JQuery selects the selected option Element

 $("#someElement").find("option:selected"); 

★JQuery binds Selector

$ ("Table "). delegate ("td", "hover", function () {$ (this ). toggleClass ("hover") ;}); // After version 1.42, delegate replaces live because they provide better context support

★JQuery automatically scrolls to a certain area of the page (as a small plug-in)

JQuery. fn. autoscroll = function (sel) {$ ('html, body '). animate ({scrollTop: $ (sel ). offset (). top}, 500) ;}// call: $ ("# area_name "). autoscroll ();

★JQuery limits the number of characters in the "TextArea" field (this can be seen as a small plug-in)

(Function ($) {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 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) ;}}}) ;}) (jQuery); // call: $ ('# macoArea "). maxLength (1, 500 );

★JQuery determines whether an element is visible

If ($ ("# macoArea"). is (": visible") = "true") {// teenager, don't run}

★JQuery element center display (can be seen as a small plug-in)

(Function ($) {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 ;}) (jQuery); // call: $ ("# macoArea "). center ();

★JQuery uses. siblings () to select peer Elements

// Juvenile, have you ever performed this operation $ ('# nav li '). click (function () {$ ("# macoArea li "). removeClass ("current"); $ (this ). addClass ("current") ;}; // is it better to do this $ ("# nav li "). click (function () {$ (this ). addClass ("current "). siblings (). removeClass ("current ");});

★Select All check boxes for jQuery operations.

Var sta = false; // you know, global Dongdong $ ('A '). click (function () {$ ("input [type = checkbox]"). attr ("checked ",! Sta); sta =! Sta ;});

★JQuery obtains the cursor position x and y

 $(document).mousemove(function(e)} $(document).ready(function() { $().mousemove(function(e){ $("#macoArea").html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); }); 

★JQuery parses XML

 function ParseXml(xml) { $(xml).find("Node").each(function(){ $("#macoArea").append($(this).attr("Author") + ""); ); } 

★JQuery determines whether the image is fully loaded

$ ('# DemoImg '). attr ("src", "demo.jpg "). load (function () {alert ("Yes, what you see is true ");});

★JQuery makes Cookie expire

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

★Right-click prohibited by jQuery

 $(function(){ $(document).bind("contextmenu",function(e){ return false; }); });