jquery Practical Skills Essentials (top) _jquery

Source: Internet
Author: User

This example summarizes the classic and practical jquery code development techniques. Share to everyone for your reference. Specifically as follows:

1. No Right click

$ (document). Ready (function () {
 $ (document). Bind ("ContextMenu", function (e) {return
 false;
 };
});

2. Hide Search text box text
Hide when clicked in the Search field, the value. (example can be found below in the comment fields)

$ (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);}}
 );
}

3. Open a link in a new window
The XHTML 1.0 Strict doesn ' t allow this attribute in the code, and so, the code keep.

$ (document). Ready (function () {
 //example 1:every Link would open in a new window
 $ (' a[href^= ' http://"]"). attr (" Target "," _blank ");
 
 Example 2:links with the rel= "external" attribute would only be open in a new window
 $ (' a[@rel $= ' External ']). Click (Fun Ction () {
 this.target = "_blank";
 });
};
How to use
<a href= "http://www.jb51.com" Rel=external>open link</a>

4. Detection browser
Note: In version jquery 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
}

/ /Target Anything above IE6
if ($.browser.msie && $.browser.version > 6) {
 //do something
}
   });

5. Pre-loading pictures
This piece of code would prevent the loading of all images, which can is useful if you have a site with lots of images.

$ (document). Ready (function () {
jquery.preloadimages = function ()
{for
 (var i = 0; i<arguments. LENGTH; JQuery (? ). attr ("src", arguments[i]);
 }
How to use
$.preloadimages ("image1.jpg");
};

6. Page Style Switching

$ (document). Ready (function () {
 $ ("A.styleswitcher"). Click (function () {
 //swicth the LINK REL attribute with The value in A REL attributes
 $ (' link[rel=stylesheet] '). attr (' href ', $ (this). attr (' REL ');
 });
your header
<link rel=stylesheet type=text/css href= "Default.css" >//
The links
<a class=styleswitcher href= "#" Rel=default.css>default theme</a> <a class=
Styleswitcher href= "#" rel=red.css>red theme</a>
<a class=styleswitcher href= "#" rel=blue.css> Blue theme</a>
});

7. Column height is the same
If you use two CSS columns, this can be the same height as the two columns.

$ (document). Ready (function () {
function equalheight (group) {
 tallest = 0;
 Group.each (function () {
 Thisheight = $ (this). Height ();
 if (Thisheight > tallest) {
  tallest = Thisheight;
 }
 });
 Group.height (tallest);
}
How do you
$ (document). Ready (function () {
 equalheight ($ (". Left"));
 Equalheight ($ (". Right"));};

8. Dynamically control page Font size
User can change page font size

$ (document). Ready (function () {
 //Reset the font size (back to default)
 var originalfontsize = $ (' html '). CSS (' Font-size ');
 $ (". Resetfont"). 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, ten);
 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, ten);
 var newfontsize = currentfontsizenum*0.8;
 $ (' HTML '). CSS (' font-size ', newfontsize);
 return false;
 });

9. Return to the top of the page function
For a smooth (animated) ride, or any location).

$ (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 do I//place this
where you want to scroll to
<a name=top></a>
//the link
<a href= "#top" >go to Top</a>
});

10. Get the mouse pointer xy value
Want to know where your mouse cursor is?

$ (document). Ready (function () {
 $ (). MouseMove (function (e) {
 //display the x and Y axis values inside the div with th E ID XY
 $ (' #XY '). HTML ("X Axis:" + E.pagex + "| Y Axis "+ e.pagey);
 }";
How to use
<div id=xy></div>

});

11. Return Top button
You can use animate and scrolltop to achieve a return to the top of the animation, without the need to use other plug-ins.

Back to top
$ (' A.top '). Click (function () {
 $ (document.body). Animate ({scrolltop:0},);
 return false;
});
<!--Create an anchor tag-->
<a class= ' top ' href= ' # ' >back to Top</a>

Changing the value of the scrolltop adjusts the distance from the top of the return distance, while the second parameter of animate is the time (in milliseconds) it takes to perform the return action.

Today for you to introduce a part of jquery skills, follow-up articles will continue to update, I hope you continue to pay attention.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.