Collection of some practical jQuery code snippets_jquery

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

1.jQuery gets the user IP:

Copy the code The code is as follows:

$.getJSON("http://jsonip.appspot.com?callback=?", function (data) {
alert("Your ip: " data.ip);
});

2.jQuery to view the width and height of the image:

Copy the code The code is as follows:

var theImage = new Image();
theImage.src = $('#imageid').attr("src");
alert("Width: " theImage.width);
alert("Height: " theImage.height);

3.jQuery finds the specified string:

Copy code The code is as follows:

var str = $('*:contains("the string")');
4.js Determine whether the browser enables cookies:
$(document).ready(function () {
document.cookie = "cookieid=1; expires=60";
var result = document.cookie.indexOf("cookieid=") != -1 ;
if (!result) {
alert("Browser does not enable cookies");
}
});

5.jQuery detects keyboard keys:

Copy code The 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, this article is summarized here, I hope this jQuery code snippet article It can be helpful to everyone

1. jQuery scrolling to the top/bottom
Regarding jQuery scrolling, this site has published similar articles before, such as: jQuery back to the top, and they are organized again below Here it is:

Copy the code The code is as follows:

//Scroll to the top
$( "html, body").animate({ scrollTop: "0px" }, 1000);
//Scroll to the bottom
//$("#container"): The element to be scrolled
$( "html, body").animate({
scrollTop: $("#container").height()
}, 1000);

2.jQuery determines whether the element exists
How to use jQuery to determine whether an element exists? I believe many jQuery learners will ask this question. The method is very simple, as follows:

Copy code The code is as follows:

if ($(" #elementid").length) {
//Element exists
}

3 .Use the abort() method to cancel the Ajax request
Use the abort() method to cancel the last request when executing a js asynchronous request. The method is as follows:

Copy Code The code is as follows:

var req = $.ajax({
type: "post",
url: "/article/form/ comment.aspx",
data: { "id": 1 },
success: function() {
//handle
}
});
//Cancel Ajax Request
if (req) {
req.abort()
}

jQuery Ajax is an important part of using jQuery. If you are a beginner of jQuery, you may be interested in it. The above code feels unfamiliar, maybe you can take a look at jQuery Learning Summary (5) jQuery Ajax.

4.jQuery disables the right mouse button

Copy code The code is as follows:

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

5. Pass parameters to the method called by setTimeout()

Copy the code The code is as follows:

$(document).ready(function() {
timeout = setTimeout(function() {
showMess("succeed")
}, 2000);
} );
function showMess(m) {
alert(m);
}

1.jQuery Countdown

Copy code The code is as follows:

$(document). ready(function () {
var count = 10;
countdown = setInterval(function () {
$("p.countdown").html(count "Will jump in seconds!");
if (count == 0) {
clearInterval(countdown)
window.location = 'http://google.com';
}
count--;
} , 1000);
});

2.jQuery determines the browser type and version number
jQuery determines the browser type and version number is very simple, you can directly use the $.browser method Make judgments. But when I tested it myself, I found that when I judged the Chrome browser, Safari was returned. After searching on the Internet, I got the following code:

Copy code The 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("The browser is: Internet Explorer and the version number is: " $.browser.version);
}
else if (mybrowser.mozilla) {
alert( "The browser is: Firefox and the version number is:" $.browser.version);
}
else if (mybrowser.opera) {
alert("The browser is: Opera and the version number is:" $ .browser.version);
}
else if (mybrowser.safari) {
alert("The browser is: Safari and the version number is: " $.browser.version);
}
else if (mybrowser.chrome) {
alert("The browser is: Chrome and the version number is: " mybrowser.version);
}
else {
alert("神马");
} ( See below how it is relatively simple to use jQuery to center elements.

Copy code

The code is as follows: //Written in plug-in form(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 determines whether the image is fully loaded

Copy code

The code is as follows: $("#demoImg").attr("src", "demo. jpg").load(function() { alert("Image loading completed"); });

If you have any useful jQuery code snippets, please post them in jQuery Share your learning with everyone!