zoukankan      html  css  js  c++  java
  • 15个实用的jQuery代码片

     1 (function($) {
     2 var cache = [];
     3 // Arguments are image paths relative to the current page.
     4 $.preLoadImages = function() {
     5 var args_len = arguments.length;
     6 for (var i = args_len; i--;) {
     7 var cacheImage = document.createElement('img');
     8 cacheImage.src = arguments[i];
     9 cache.push(cacheImage);
    10 }
    11 }
    12 jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
    View Code

     1 var scr = document.createElement('script');
     2 scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
     3 document.body.appendChild(scr);
     4 scr.onload = function(){
     5 $('div').attr('class', '').attr('id', '').css({
     6 'margin' : 0,
     7 'padding' : 0,
     8 'width': '100%',
     9 'clear':'both'
    10 });
    11 };
    View Code

     1 $(window).bind("load", function() {
     2 // IMAGE RESIZE
     3 $('#product_cat_list img').each(function() {
     4 var maxWidth = 120;
     5 var maxHeight = 120;
     6 var ratio = 0;
     7 var width = $(this).width();
     8 var height = $(this).height();
     9 if(width > maxWidth){
    10 ratio = maxWidth / width;
    11 $(this).css("width", maxWidth);
    12 $(this).css("height", height * ratio);
    13 height = height * ratio;
    14 }
    15 var width = $(this).width();
    16 var height = $(this).height();
    17 if(height > maxHeight){
    18 ratio = maxHeight / height;
    19 $(this).css("height", maxHeight);
    20 $(this).css("width", width * ratio);
    21 width = width * ratio;
    22 }
    23 });
    24 //$("#contentpage img").show();
    25 // IMAGE RESIZE
    26 });
    View Code

    1 $(document).ready(function(){
    2 $('.top').click(function() { 
    3 $(document).scrollTo(0,500); 
    4 });
    5 });
    6 //Create a link defined with the class .top
    7 <a href="#" class="top">Back To Top</a>
    View Code

     1 var accordion = {
     2 init: function(){
     3 var $container = $('#accordion');
     4 $container.find('li:not(:first) .details').hide();
     5 $container.find('li:first').addClass('active');
     6 $container.on('click','li a',function(e){
     7 e.preventDefault();
     8 var $this = $(this).parents('li');
     9 if($this.hasClass('active')){
    10 if($('.details').is(':visible')) {
    11 $this.find('.details').slideUp();
    12 } else {
    13 $this.find('.details').slideDown();
    14 }
    15 } else {
    16 $container.find('li.active .details').slideUp();
    17 $container.find('li').removeClass('active');
    18 $this.addClass('active');
    19 $this.find('.details').slideDown();
    20 }
    21 });
    22 }
    23 };
    View Code

    1 var nextimage = "/images/some-image.jpg";
    2 $(document).ready(function(){
    3 window.setTimeout(function(){
    4 var img = $("").attr("src", nextimage).load(function(){
    5 //all done
    6 });
    7 }, 100);
    8 });
    View Code

     1 $(function(){
     2 $("select#ctlJob").change(function(){
     3 $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
     4 var options = '';
     5 for (var i = 0; i < j.length; i++) {
     6 options += '
     7 ' + j[i].optionDisplay + '
     8 ';
     9 }
    10 $("select#ctlPerson").html(options);
    11 })
    12 })
    13 })
    View Code

    1 // Safe Snippet
    2 $("img").error(function () {
    3 $(this).unbind("error").attr("src", "missing_image.gif");
    4 });
    5 // Persistent Snipper
    6 $("img").error(function () {
    7 $(this).attr("src", "missing_image.gif");
    8 });
    View Code

     1 $(document).ready(function(){
     2 $(".thumbs img").fadeTo("slow", 0.6);
     3 // This sets the opacity of the thumbs to fade down to 60% when the page loads
     4 $(".thumbs img").hover(function(){
     5 $(this).fadeTo("slow", 1.0);
     6 // This should set the opacity to 100% on hover
     7 },function(){
     8 $(this).fadeTo("slow", 0.6);
     9 // This should set the opacity back to 60% on mouseout
    10 });
    11 });
    View Code

     1 function clearForm(form) {
     2 // iterate over all of the inputs for the form
     3 // element that was passed in
     4 $(':input', form).each(function() {
     5 var type = this.type;
     6 var tag = this.tagName.toLowerCase();
     7 // normalize case
     8 // it's ok to reset the value attr of text inputs,
     9 // password inputs, and textareas
    10 if (type == 'text' || type == 'password' || tag == 'textarea')
    11 this.value = "";
    12 // checkboxes and radios need to have their checked state cleared
    13 // but should *not* have their 'value' changed
    14 else if (type == 'checkbox' || type == 'radio')
    15 this.checked = false;
    16 // select elements need to have their 'selectedIndex' property set to -1
    17 // (this works for both single and multiple select elements)
    18 else if (tag == 'select')
    19 this.selectedIndex = -1;
    20 });
    21 };
    View Code

     1 $(document).ready(function() {
     2 $('form').submit(function() {
     3 if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
     4 jQuery.data(this, "disabledOnSubmit", { submited: true });
     5 $('input[type=submit], input[type=button]', this).each(function() {
     6 $(this).attr("disabled", "disabled");
     7 });
     8 return true;
     9 }
    10 else
    11 {
    12 return false;
    13 }
    14 });
    15 });
    View Code

    1 //change event on password1 field to prompt new input
    2 $('#password1').change(function() {
    3 //dynamically create new input and insert after password1
    4 $("#password1").append("");
    5 });
    View Code

    1 $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
    View Code

    1 var maxHeight = 0;
    2 $("div").each(function(){
    3 if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    4 });
    5 $("div").height(maxHeight);
    View Code

     1 var loading = false;
     2 $(window).scroll(function(){
     3 if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
     4 if(loading == false){
     5 loading = true;
     6 $('#loadingbar').css("display","block");
     7 $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
     8 $('body').append(loaded);
     9 $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
    10 $('#loadingbar').css("display","none");
    11 loading = false;
    12 });
    13 }
    14 }
    15 });
    16 $(document).ready(function() {
    17 $('#loaded_max').val(50);
    18 });
    View Code
  • 相关阅读:
    带有“全选”的combotree
    combotree(组合树)的使用
    根据权限显示accordion
    accordion(折叠面板)的使用
    js中substr、substring、indexOf、lastIndexOf的用法
    EasyUI中使用自定义的icon图标
    EasyUI tree的三种选中状态
    C# List集合去重使用lambda表达式
    C# DataTable去重,根据列名去重保留其他列
    win10下部署.Net Web项目到IIS10
  • 原文地址:https://www.cnblogs.com/duanxianyouyang/p/6083340.html
Copyright © 2011-2022 走看看