Some useful jQuery code snippet collection

The following jQuery fragments are only a small part. If you have encountered some commonly used jQuery code during your learning, please share them. Let's take a look at the code snippets below.

1. jQuery obtains the user IP Address:Copy codeThe Code is as follows: $. getJSON ("http://jsonip.appspot.com? Callback =? ", Function (data ){
Alert ("Your ip:" + data. ip );
});

2. view the width and height of an image using jQuery:Copy codeCode: var theImage = new Image ();
TheImage. src = $ ('# imageid'). attr ("src ");
Alert ("Width:" + theImage. width );
Alert ("Height:" + theImage. height );

3. jQuery search for a specified string:Copy codeThe Code is as follows: var str = $ ('*: contains ("the string ")');
4. js checks whether the browser enables cookies:
$ (Document). ready (function (){
Document. cookie = "cookieid = 1; expires = 60 ";
Var result = document. cookie. indexOf ("cookieid = ")! =-1;
If (! Result ){
Alert ("cookie not enabled in the browser ");
}
});

5. jQuery detection keyboard buttons:Copy codeThe Code is as follows: $ (document). ready (function (){
$ (This). keypress (function (e ){
Switch (e. which ){
Case 13:
Alert ("you pressed the Enter key ");
Break;
// More detect
}
});
});

Okay. Here is a summary of this article. I hope this jQuery code snippet will help you.

1. jQuery scroll to the top/Bottom
For jQuery scrolling, this site has previously published similar articles, such as: jQuery back to the top, below to sort them again:Copy codeThe Code is as follows: // scroll to the top
$ ("Html, body"). animate ({scrollTop: "0px"}, 1000 );
// Scroll to the bottom
// $ ("# Container"): the element to be rolled
$ ("Html, body"). animate ({
ScrollTop: $ ("# container"). height ()
},1000 );

2. jQuery checks whether an element exists.
How to Use jQuery to determine whether an element exists? I believe many jQuery learners will ask this question. The method is as follows:Copy codeThe Code is as follows: if ($ ("# elementid"). length ){
// Element exists
}

3. Use the abort () method to cancel Ajax requests
You can use the abort () method to cancel the previous request when executing the js asynchronous request. The method is as follows:Copy codeThe Code is as follows: var req = $. ajax ({
Type: "post ",
Url: "/article/form/comment. aspx ",
Data: {"id": 1 },
Success: function (){
// Handle
}
});
// Cancel the Ajax request
If (req ){
Req. abort ()
}

JQuery Ajax is an important part to use jQuery. If you are a beginner of jQuery, you may feel unfamiliar with the above Code. Maybe you can look at jQuery learning Summary (5) jQuery Ajax.

4. Disable right-click jQueryCopy codeThe Code is as follows: $ (document). ready (function (){
$ (Document). bind ("contextmenu", function (){
Return false;
});
});

5. Pass the parameter to the method called by setTimeout ()Copy codeThe Code is as follows: $ (document). ready (function (){
Timeout = setTimeout (function (){
ShowMess ("succeed ")
},2000 );
});
Function showMess (m ){
Alert (m );
}

1. jQuery countdownCopy codeThe Code is as follows: $ (document). ready (function (){
Var count = 10;
Countdown = setInterval (function (){
$ ("P. countdown" ).html (count + "seconds later! ");
If (count = 0 ){
ClearInterval (countdown)
Window. location = 'HTTP: // google.com ';
}
Count --;
},1000 );
});

2. jQuery determines the browser type and version number
JQuery's method of determining the browser type and version number is very simple. You can use the $. browser Method to Determine the browser type and version number. But when I tried it myself, I found that Safari was returned when I determined the Chrome browser. I found it online, so I had the following code:Copy codeThe Code is as follows: var browserName = navigator. userAgent. toLowerCase ();
Mybrowser = {
Version: (browserName. match (/. + (? : Rv | it | ra | ie) [\/:] ([\ d.] +)/) | [0, '0']) [1],
Safari:/webkit/I. test (browserName )&&! This. chrome,
Opera:/opera/I. test (browserName ),
Firefox:/firefox/I. test (browserName ),
Msie:/msie/I. test (browserName )&&! /Opera/. test (browserName ),
Mozilla:/mozilla/I. test (browserName )&&! /(Compatible | webkit)/. test (browserName )&&! This. chrome,
Chrome:/chrome/I. test (browserName) &/webkit/I. test (browserName) &/mozilla/I. test (browserName)
}
$ (Document). ready (function (){
If (mybrowser. msie ){
Alert ("browser: Internet Explorer version:" + $. browser. version );
}
Else if (mybrowser. mozilla ){
Alert ("browser: Firefox version:" + $. browser. version );
}
Else if (mybrowser. opera ){
Alert ("browser: Opera version:" + $. browser. version );
}
Else if (mybrowser. safari ){
Alert ("browser: Safari version:" + $. browser. version );
}
Else if (mybrowser. chrome ){
Alert ("browser: Chrome version:" + mybrowser. version );
}
Else {
Alert ("Shenma ");
}
});

3. jQuery element center display
For element center, you can refer to the css implementation object to fully center, understand the principle, and then look at the following to use jQuery to implement element center is relatively simple.Copy codeThe Code is as follows: // It is written as a plug-in.
(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;
}
}) (JQuery );
$ (Document). ready (function (){
// Call
$ ("# Somediv"). center ();
});

4. jQuery checks whether the image is fully loaded.Copy codeThe Code is as follows: $ ("# demoImg"). attr ("src", "demo.jpg"). load (function (){
Alert ("image loaded ");
});

If you have any practical jQuery code snippets, please share them with us!