26 practical tips under jquery (jquery tips, tricks solutions)

For example, you can disable right-click, hide text in the search text box, open a link in a new window, check the browser, pre-load the image, switch the page style, set the height of all columns, dynamically control the page font size, and obtain the X value y of the mouse pointer, whether the verification element is null, the replacement element, the delayed loading, the validation element exists in the jquery set, the DIV clickable, the cloned object, and the element is centered calculate the number of elements, use the jquery class library on the Google host, disable the jquery effect, and solve the conflict between the jquery Class Library and other JavaScript class libraries.

The details are as follows:

1. Right-click prohibitedCopyCodeThe Code is as follows: $ (document). Ready (function (){
$ (Document). BIND ("contextmenu", function (e ){
Return false;
});
});

2. hide the text in the search text box copy the Code the code is as follows: $ (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 ('') ;}< BR >});
input. blur (function () {
if ($. trim (input. val () = '') {input. val (originalvalue) ;}< BR >});
}

3 open the link in the new window copy Code the code is as follows: $ (document ). ready (function () {
// Example 1: every link will open in a new window
$ ('a [href ^ = "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.tar get = "_ blank";
});
// how to use
open link

4 check the browser
note: In jquery 1.4, $. Support replaced the $. browser variable. copy Code the code is as follows: $ (document ). ready (function () {
// target Firefox 2 and above
if ($. browser. mozilla & $. browser. version >=" 1.8 ") {
// do something
}< br> // target safari
if ($. browser. safari) {
// do something
}< br> // target chrome
if ($. browser. chrome) {
// do something
}< br> // target Camino
if ($. browser. camino) {
// do something
}< br> // target opera
if ($. browser. opera) {
// do something
}< br> // target IE6 and below
if ($. browser. MSIE & $. browser. version <= 6) {
// do something
}< br> // target anything above IE6
if ($. browser. MSIE & $. browser. version> 6) {
// do something
}< BR >});

5 pre-Loaded Images copy Code the code is as follows: $ (document ). ready (function () {
jquery. preloadimages = function ()
{< br> for (VAR I = 0; I "). ATTR ("src", arguments [I]);
}< BR >};
// how to use
$. preloadimages ("image1.jpg");
});

6. Page Style switching copy Code the code is as follows: $ (document ). ready (function () {
$ (". 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
});

seven columns with the same height
If two CSS columns are used, the height of the two columns can be the same. copy Code the code is as follows: $ (document ). ready (function () {
function lateral height (Group) {
tallest = 0;
group. each (function () {
thisheight = $ (this ). height ();
If (thisheight> tallest) {
tallest = thisheight;
}< BR >});
group. height (tallest);
}< br> // how to use
$ (document ). ready (function () {
specify height ($ (". left ");
adjust height ($ (". right ");
});

8. dynamically control the page font size
you can change the page font size. copy Code the code is as follows: $ (document ). ready (function () {
// reset the font size (back to default)
var originalfontsize = fill ('html').css ('font-size ');
$ (". resetfont "). click (function () {
values ('html'0000.css ('font-size', originalfontsize);
});
// increase the font size (bigger font0
$ (". increasefont "). click (function () {
var currentfontsize = Response ('html').css ('font-size');
var currentfontsizenum = parsefloat (currentfontsize, 10 );
var newfontsize = currentfontsizenum * 1.2;
response ('html'0000.css ('font-size', newfontsize);
return false;
});
// decrease the font size (smaller font)
$ (". decreasefont "). click (function () {
var currentfontsize = Response ('html').css ('font-size');
var currentfontsizenum = parsefloat (currentfontsize, 10 );
var newfontsize = currentfontsizenum * 0.8;
response ('html'0000.css ('font-size', newfontsize);
return false;
});
});

9 return to the top of the page copy Code the code is as follows: $ (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;
}< BR> });
// how to use
// place this where you want to scroll to

// link
go to top
});

10. Obtain the XY value of the mouse pointer.Copy codeThe Code is as follows: $ (document). Ready (function (){
$ (). Mousemove (function (e ){
// Display the X and Y axis values inside the DIV with the ID XY
Certificate ('{xy'{.html ("X axis:" + E. pagex + "| Y axis" + E. Pagey );
});
// How to use
<Div id = xy> </div>
});

11. Whether the verification element is nullCopy codeThe Code is as follows: $ (document). Ready (function (){
If ((('your id'}.html ()){
// Do something
}
});

12. replacement elementCopy codeThe Code is as follows: $ (document). Ready (function (){
$ ('# Id'). replacewith ('
<Div> I have been replaced </div>
');
});

13 jquery delayed LoadingCopy codeThe Code is as follows: $ (document). Ready (function (){
Window. setTimeout (function (){
// Do something
},1000 );
});

14. Remove wordsCopy codeThe Code is as follows: $ (document). Ready (function (){
VaR El = $ ('# id ');
El.html(el.html (). Replace (/word/ig ,""));
});

15. verify whether the element exists in the jquery object setCopy codeThe Code is as follows: $ (document). Ready (function (){
If ($ ('# id'). Length ){
// Do something
}
});

16 make the entire Div clickableCopy codeThe Code is as follows: $ (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
<Div> <a href = "index.html"> Home </a> </div>
});

17. Switch between ID and Class. When the window size is changed, switch between ID and class.Copy codeThe Code is as follows: $ (document). Ready (function (){
Function checkwindowsize (){
If ($ (window). Width ()> 1200 ){
$ ('Body'). addclass ('large ');
}
Else {
$ ('Body'). removeclass ('large ');
}
}
$ (Window). Resize (checkwindowsize );
});

18. Clone objectCopy codeThe Code is as follows: $ (document). Ready (function (){
VaR cloned = $ ('# id'). Clone ();
// How to use
<Div id = ID> </div>
});

19 place elements in the middle of the screenCopy codeThe Code is as follows: $ (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;
}
$ ("# ID"). Center ();
});

20 write your own SelectorCopy codeThe Code is as follows: $ (document). Ready (function (){
$. Extend ($. expr [':'], {
Morethen1000px: function (){
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 ');
});
});

21 count the number of elementsCopy codeThe Code is as follows: $ (document). Ready (function (){
$ ("P"). Size ();
});

22. Use your own bulletsCopy codeThe Code is as follows: $ (document). Ready (function (){
$ ("Ul"). addclass ("replaced ");
$ ("Ul> li"). prepend ("success ("‒");
// How to use
Ul. Replaced {list-style: none ;}
});

23 reference the jquery class library on the Google host let Google host the jquery script for you. This can be done in 2 ways.Copy codeThe Code is as follows: // Example 1
<SCRIPT src = "http://www.google.com/jsapi"> </SCRIPT>
<SCRIPT type = text/JavaScript>
Google. Load ("jquery", "1.2.6 ");
Google. setonloadcallback (function (){
// Do something
});
</SCRIPT> <SCRIPT src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type = text/JavaScript> </SCRIPT>
// Example 2 :( the best and fastest way)
<SCRIPT src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type = text/JavaScript> </SCRIPT>

24. Disable jquery (animation) EffectsCopy codeThe Code is as follows: $ (document). Ready (function (){
Jquery. FX. Off = true;
});

25. Conflict Solution with other JavaScript Class LibrariesCopy codeThe Code is as follows: $ (document). Ready (function (){
VaR $ JQ = jquery. noconflict ();
$ JQ ('# id'). Show ();
});

26. Use the load () function (page loading prompt ):

> First, write the CSS file and go to the upper right corner of the page.Copy codeThe Code is as follows: # loading {
Position: absolute; Z-index: 900; text-align: center;
Background-color: # eef2fa; Border: 1px solid # d8e3e8;
Color: #000; font-size: 12px; padding: 3px; width: 80px;
Right: 0; top: 0;
}

> Then, use jquery to hide the loading Div after all the images are loaded.
> Don't forget to load the jquery library. The address was wrong when I tested the code. I almost went crazy.Copy codeThe Code is as follows: <SCRIPT>
Jquery (document). Ready (function ($ ){
$ ('Img '). Load (function (){
Certificate ('{loading'{.css ("display", "NONE ");
});
});
</SCRIPT>

just insert a div somewhere and O (partition _ partition) O haha.