JQuery serves a multitude of ways by which to create interactive websites. Utilizing jQuery into your web projects can enable you to move HTML elements around, create a variety of custom animations, and give your visitors a better end user experience.
We have collected several useful JQuery Code Snippets which you may easily copy and paste directly into your themes and create some pretty nice effects which will help you spruce up your website. Enjoy !
1. Preloading Images
(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");
2. Make Everything Mobile Friendly
var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
$('div').attr('class', '').attr('id', '').css({
'margin' : 0,
'padding' : 0,
'width': '100%',
'clear':'both'
});
};
3. Image Resizing Using jQuery
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
4. Back To Top Link
// Back To Top
$(document).ready(function(){
$('.top').click(function() {
$(document).scrollTo(0,500);
});
});
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>
5. jQuery Accordion
var accordion = {
init: function(){
var $container = $('#accordion');
$container.find('li:not(:first) .details').hide();
$container.find('li:first').addClass('active');
$container.on('click','li a',function(e){
e.preventDefault();
var $this = $(this).parents('li');
if($this.hasClass('active')){
if($('.details').is(':visible')) {
$this.find('.details').slideUp();
} else {
$this.find('.details').slideDown();
}
} else {
$container.find('li.active .details').slideUp();
$container.find('li').removeClass('active');
$this.addClass('active');
$this.find('.details').slideDown();
}
});
}
};
6. Emulate Facebook by Preloading Previous & Next Photo Gallery Images
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});
7. Auto Populating Select Boxes Using jQuery & Ajax
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})
8. Auto-Replace Broken Images
// Safe Snippet
$("img").error(function () {
$(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
$(this).attr("src", "missing_image.gif");
});
9. Fade In/Out on Hover
$(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
});
});
10. Clear Form Data
function clearForm(form) {
// iterate over all of the inputs for the form
// element that was passed in
$(':input', form).each(function() {
var type = this.type;
var tag = this.tagName.toLowerCase(); // normalize case
// it's ok to reset the value attr of text inputs,
// password inputs, and textareas
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = "";
// checkboxes and radios need to have their checked state cleared
// but should *not* have their 'value' changed
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
// select elements need to have their 'selectedIndex' property set to -1
// (this works for both single and multiple select elements)
else if (tag == 'select')
this.selectedIndex = -1;
});
};
11. Prevent Multiple Submit of Your Form
$(document).ready(function() {
$('form').submit(function() {
if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
jQuery.data(this, "disabledOnSubmit", { submited: true });
$('input[type=submit], input[type=button]', this).each(function() {
$(this).attr("disabled", "disabled");
});
return true;
}
else
{
return false;
}
});
});
12. Dynamically Add Form Elements
//change event on password1 field to prompt new input
$('#password1').change(function() {
//dynamically create new input and insert after password1
$("#password1").append("");
});
13. Make Entire Div Clickable
blah blah blah. link
The following lines of jQuery will make the entire div clickable: $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
Source
14. Equalize height or Div Elements
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
15. Load Content on Scroll Automatically
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none");
loading = false;
});
}
}
});
$(document).ready(function() {
$('#loaded_max').val(50);
});
for more detail, please refer to http://codegeekz.com/20-jquery-plugins-you-should-use-today/
相关推荐
Useful ABAP code snippets
一组 jQuery 和 javascript 片段,可轻松访问并保持内容井井有条。 在启动一个项目时,没有什么太浮华但真的很有帮助。也看看我的[Wordpress 片段合集] ( )获得社交我的网站
Brad Dayley’s jQuery and JavaScript Phrasebook brings together 100+ instantly useful code snippets and idioms for performing a wide spectrum of common web application tasks. This hands-on guide gets...
No bullshit. Full of problem, solutions & how it works! Enjoy.
useful code snippets for utilities
idea原生代码片段管理插件Live Templates无法可视化管理,个人已习惯MyEclipse的Snippets插件,无耐idea无提供相关插件,开发人员在开发过程中大部分时间都是拷贝代码,如果能有相关插件来维护常用的代码片段,可以...
130 + jQuery Snippets jQuerySnippets-1.0.zip
libgdx 代码片段的存储库 当前代码片段: :游戏介绍
eclipse-snippets.rar eclipse-snippets.rar eclipse-snippets.rar eclipse-snippets.rar
提高编码效率的java snippets,三个最常用的。打开eclipse code snippets import就可以。
Canvas Snippets 的操作手册(快捷键) PS:不是插件!
vscode corona lua snippets api 代码程序片断完全版 解压后放于目录: AppData\Roaming\Code\User\snippets
code snippets,数据库部分的
使用方法:解压放入 ~/Library/Developer/Xcode/UserData/CodeSnippets 即可
Android Snippets This repository holds code snippets used in Android documentation on developer.android.com. It is a work in progress, as many snippets are still embedded as static HTML. Quality ...
Atom-snippets.zip,Atom代码片段包代码段包,atom是一个用web技术构建的开源文本编辑器。
org.eclipse.jface.snippets
python库。 资源全名:torch_snippets-0.302.tar.gz
devtools-snippets, 浏览器devtools内部有用的代码段集合 devtools Fragment浏览器devtools内部有用的代码段集合。在单个页面上查看它们: http://bgrins.github.io/devtools-snippets/ 或者所有它们都在github的...
Mac 代码管理 下载之 www.cocoadev.cn