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

This article mainly introduces the practical skills of jQuery 1.4. it has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

Do not right click

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

Hide search text box text

$(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 (');}}) Input.blur (function () {if ($.trim (input.val ()) = =') {input.val (originalvalue);});}

Open a link in a new window

$(document) .ready (function () {/ / Example 1: Every link will open in a new window $('a [external ^ = "http://"]').attr("target"," _ blank "); / / Example 2: Links with the rel=" external "attribute will only open in a new window $('a [@ rel$='external']') .click (function () {this.target =" _ blank ";});}) / / how to use open link

Detect browser

Note: in version 1. 4, $. Support replaces the $. Browser variable.

$(document) .ready (function () {/ / Target Firefox 2 and above if ($.browser.Mozilla & & $.browser.version > = "1.8") {/ / do something} / / Target Safari if ($.browser.safari) {/ / do something} / / Target Chrome if ($.browser.chrome) {/ / do something} / / Target Camino if ($.browser.camino) {/ / do something} / / Target Opera if ($.browser.opera) {/ / do something} / / Target IE6 and below if ($.browser.msie & & $.browser.version 6) {/ / do something}})

Preload picture

$(document) .ready (function () {jQuery.preloadImages = function () {for (var I = 0; I "). Attr (" src ", arguments [I]);}}; / / how to use $.preloadImages (" image1.jpg ");})

Page style switching

$(document) .ready (function () {$("a.Styleswitcher") .click (function () {/ / swicth the LINK REL attribute with the value in A REL attribute $('link [rel = stylesheet]'). Attr ('href', $(this) .attr (' rel'));}); / / how to use / / place this in your header / / the links Default Theme Red Theme Blue Theme})

The column height is the same

If two CSS columns are used, the height of the two columns can be the same in this way.

$(document) .ready (function () {function equalHeight (group) {tallest = 0; group.each (function () {thisHeight = $(this) .height (); if (thisHeight > tallest) {tallest = thisHeight;}}); group.height (tallest) } / / how to use $(document) .ready (function () {equalHeight ($(".left")); equalHeight ($(".right"));});})

Dynamically control the font size of the page

$(document) .ready (function () {/ / Reset the font size (back to default) var originalFontSize = $('html'). Css (' font-size'); $(".ready Font") .click (function () {$('html'). Css (' font-size', originalFontSize);}) / / Increase the font size (bigger font0 $(".increaseFont") .click (function () {var currentFontSize = $('html'). Css (' font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $('html'). Css (' font-size', newFontSize); return false;}) / / Decrease the font size (smaller font) $(".decreaseFont") .click (function () {var currentFontSize = $('html'). Css (' font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $('html'). Css (' font-size', newFontSize); return false;});})

Return to the top function of the page

$(document) .ready (function () {$('a [href*=#]'). Click (function () {if (location.pathname.replace (/ ^\ / /,'') = this.pathname.replace (/ ^\ / /,'') & & location.hostname = = this.hostname) {var $target = $(this.hash) $target = $target.length & & $target | $('[name=' + this.hash.slice (1) +']'); if ($target.length) {var targetOffset = $target.offset (). Top; $('html,body') .animate ({scrollTop: targetOffset}, 900); return false;}) / / how to use / / place this where you want to scroll to / / the link go to top})

Get the mouse pointer XY value

$(document) .ready (function () {$() .mousemove (function (e) {/ / display the x and y axis values inside the div with the id XY $('# XY') .html ("X Axis:" + e.pageX + "| Y Axis" + e.pageY);}); / / how to use})

Verify that the element is empty

$(document) .ready (function () {if ($('# id') .html ()) {/ / do something}})

Replace element

$(document) .ready (function () {$('# id'). ReplaceWith ('I have been replaced);})

JQuery delay loading function

$(document) .ready (function () {window.setTimeout (function () {/ / do something}, 1000);})

Remove word function

$(document) .ready (function () {var el = $('# id'); el.html (el.html (). Replace (/ word/ig, ");})

Verify that the element exists in the collection of jQuery objects

$(document) .ready (function () {if ($('# id') .length) {/ / do something}})

Make the entire DIV clickable

$(document) .ready (function () {$("div") .click (function () {/ / get the url from href attribute and launch the url _ window.location=$ (this) .find ("a") .attr ("href"); return false;}); / / how to use home}) Conversion between ID and Class when changing the size of Window, switch $(document) .ready (function () {function checkWindowSize () {if ($(window). Width () > 1200) {$('body'). AddClass (' large');} else {$('body'). RemoveClass (' large')) } $(window) .resize (checkWindowSize);})

Clone object

$(document) .ready (function () {var cloned = $('# id') .clone (); / / how to use})

Place the element in the middle of the screen

$(document) .ready (function () {jQuery.fn.center = function () {this.css ("position", "absolute"); this.css ("top", ($(window). Height ()-this.height ()) / 2ready $(window). ScrollTop () + "px") This.css ("left", ($(window). Width ()-this.width ()) / 2 million $(window). ScrollLeft () + "px"); return this;} $("# id"). Center ();})

Write your own selector

$(document) .ready (function () {$.extend ($.expr [':'], {moreThen1000px: function (a) {return $(a). Width () > 1000;}); $('.box: moreThen1000px') .click (function () {/ / creating a simple js alert box alert (' The element that you have clicked is over 1000 pixels wide');}) })

Count the number of elements

$(document) .ready (function () {$("p") .size ();})

Use your own Bullets

$(document) .ready (function () {$("ul"). AddClass ("Replaced"); $("ul > li") .prepend ("-"); / / how to use ul.Replaced {list-style: none;}})

Reference the jQuery class library on the Google host

/ / Example 1 google.load ("jquery", "1.2.6"); google.setOnLoadCallback (function () {/ / do something}); / / Example 2: (the best and fastest way)

Disable jQuery (animation) effect

$(document) .ready (function () {jQuery.fx.off = true;})

Conflict resolution with other JavaScript class libraries

$(document) .ready (function () {var $jq = jQuery.noConflict (); $jq ('# id'). Show ();}). Thank you for reading this article carefully. I hope the article "what are the practical skills of jQuery 1.4" shared by the editor will be helpful to you. At the same time, I hope you will support us, pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

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.