Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "jQuery practical sample code analysis". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

★ uses jQuery to switch stylesheets $("Linkmedia = 'screen']") .attr ("href", "Alternative.css") ★ jQuery detects the browser type (if ($.browser.safari)) (if ($.browser.msie & & $. Browser.version > 6)) (if ($.browser.msie & & $. Browser.version = '1.8') ★ jQuery verifies whether an element is empty if ($("# Demo"). Html ()) {/ / null } ★ jQuery gets the index value $("ul > li") .click (function () {var index = $(this). PrevAll (). Length;}) from the collection; ★ jQuery selects the selected option element $("# someElement"). Find ("option:selected"); ★ jQuery binds the selector method $("table"). Delegate ("td", "hover", function () {$(this) .toggleClass ("hover";})) / / after version 1.42, delegate replaces live because they provide a better context for ★ jQuery to automatically scroll to an area of the page (which can be thought of as a widget) 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 (can be seen as a widget)

(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") {/ / Application 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 (500)

★ jQuery determines whether an element is visible or not

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

★ jQuery element centered display (can be seen as a mini 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 percent $(window). ScrollLeft () + 'px'); return this;}) (jQuery)) / / call: $("# macoArea") .center ()

★ jQuery uses .siblings () to select peer elements

/ / teenager, have you ever done $('# nav li') .click (function () {$("# macoArea li"). RemoveClass ("current"); $(this) .addClass ("current");}); / / wouldn't it be better to do so $("# nav li") .click (function () {$(this) .addClass ("current"). Siblings (). RemoveClass ("current");})

★ jQuery operation check box all check box reverse selection

Var sta = false; / / you know, global things $('a') .click (function () {$("input [type=checkbox]"). Attr ("checked",! sta); sta =! sta;})

★ jQuery gets mouse cursor positions 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})

★ jQuery disables the right mouse button

(function () {$(document) .bind ("contextmenu", function (e) {return false;});}); "jQuery practical sample code analysis" ends here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.