10 awesome jQuery snippets
12029 단어 jquery
Preloading images
Preloading images is useful: Instead of loading an image when the user request it, we preload them in the background so they are ready to be displayed. Doing so in jQuery is very simple, as shown below:
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
→ Source: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
target=”blank” links
The following snippet will open all links with the
rel="external" attribute in a new tab/window. The code can be easily customized to only open links with a specific class. $('a[@rel$='external']').click(function(){
this.target = "_blank";
});
/*
Usage:
<a href="http://www.catswhocode.com" rel="external">catswhocode.com</a>
*/
→ Source: http://snipplr.com/view/315/-jquery–target-blank-links/
Add a class to the tag if JavaScript is enabled
This snippet is just a line of code, but it is one of the easiest way to detect if JavaScript is enabled on the client browser. If yes, a
hasJS class will be added to the <body> tag. $('body').addClass('hasJS');
→ Source: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets/
Smooth scrolling to an anchor
jQuery is known for its ability to let developers easily create stunning visual effects. A simple, but nice effect is smooth sliding to an anchor. The following snippet will create a smooth sliding effect when a link with the
topLink class is clicked. $(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
→ Source: http://snipplr.com/view.php?codeview&id=26739
Fade in/out on hover
Another very cool effect – which is very popular among clients – is indeed the fade in/fade out on mouseover. The code below set opacity to 100% on hover, and to 60% on mouseout.
$(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
→ Source: http://snipplr.com/view/18606/
Equal column height
When building a column based website, you often want that all columns have the same height, as displayed in a good old table. This snippet calculate the height of the higher column and automatically adjust all other columns to this height.
var max_height = 0;
$("div.col").each(function(){
if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);
→ Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
Enable HTML5 markup on older browsers
HTML5 is definitely the future of client-side web development. Unfortunely, some old browsers do not even recognize new tags such as
header or section . This code will force old browsers to recognize the new tags introduced by HTML5. (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
A better solution is to link the .js file to the
<head> part of your HTML page: <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
→ Source: http://remysharp.com/2009/01/07/html5-enabling-script/
Test if the browser supports a specific CSS3 property
Here is a simple jQuery function to check if the client browser supports a specific CSS3 property. In this example,
border-radius is the property we want to check, but of course this can be modified easily. Note that when passing the property, you have to omit the dash to prevent syntax error. So instead of
border-radius , you have to pass “borderRadius” or “BorderRadius”. var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while(len--) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})();
if ( supports('textShadow') ) {
document.documentElement.className += ' textShadow';
→ Source: http://snipplr.com/view/44079
Get url parameters
Getting url parameters is pretty easy using jQuery. The following snippet will do the job!
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return results[1] || 0;
}
→ Source: http://snipplr.com/view/26662
Disable the “Enter” key in forms
By default, a form can be submitted by pressing the “Enter” key. Thought, on some form, this keyboard shortcut can cause problems. Here is how you can prevent unwanted form submission by disabling the “Enter” key with jQuery.
$("#form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});
→ Source: http://snipplr.com/view/10943/disable-enter-via-jquery/
전환: http://www.dzone.com/links/r/10_awesome_jquery_snippets.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
