实用Jquery代码

### 实用Jquery代码知识点详解 #### 一、预加载图片 **知识点**: 预加载图片是为了确保图片能在需要时立即显示，提高用户体验。在实际应用中，尤其是在需要大量图片资源快速展示的情况下（如相册、轮播图等），预加载显得尤为重要。 **代码示例**: ```javascript (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"); })(jQuery); ``` **解析**: 1. **闭包**: 使用一个自执行函数包裹整个功能，避免污染全局作用域。 2. **缓存数组** (`cache`): 用于存储加载过的图片对象。 3. **创建并加载图片** (`cacheImage`): 创建`<img>`元素，并设置其`src`属性，将图片加入缓存。 4. **调用示例**: 调用`jQuery.preLoadImages`方法，并传入图片路径进行预加载。 #### 二、让页面中的每个元素都适合在移动设备上展示 **知识点**: 移动端优化是前端开发中的一个重要环节。通过调整CSS样式，可以使页面在移动设备上呈现更好的视觉效果。 **代码示例**: ```javascript 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' }); }; ``` **解析**: 1. **动态加载jQuery库**: 通过创建`<script>`标签并将其插入文档中，实现异步加载jQuery库。 2. **等待加载完成**: 使用`onload`事件监听器确保jQuery库加载完成后才执行后续操作。 3. **清除样式**: 移除所有`<div>`元素的类名和ID，以防止意外的样式冲突。 4. **设置CSS样式**: 将所有`<div>`元素的外边距、内边距设为0，宽度设为100%，并对齐方式设为两边清除，使得页面内容能够适应移动设备屏幕。 #### 三、图像等比例缩放 **知识点**: 图片的等比例缩放可以确保图片在不同尺寸的屏幕或容器中展示时不失真。这在响应式设计中尤为关键。 **代码示例**: ```javascript $(window).bind("load", function() { $('#product_cat_listimg').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; } }); }); ``` **解析**: 1. **绑定`load`事件**: 当页面加载完毕后执行此功能。 2. **遍历图片元素**: 使用`each`方法遍历指定的图片元素。 3. **计算宽高比**: 根据图片的原始尺寸与目标尺寸计算出缩放比例。 4. **设置宽高**: 根据计算出的比例设置图片的宽度和高度，确保图片等比例缩放。 #### 四、返回页面顶部 **知识点**: 页面滚动到顶部是网页导航中常见的功能之一，通常用于提供更方便的用户交互体验。 **代码示例**: ```javascript // BackToTop $(document).ready(function() { $('.top').click(function() { $(document).scrollTo(0, 500); }); }); // Create a link defined with the class top <a href="#" class="top">BackToTop</a> ``` **解析**: 1. **初始化**: 使用`$(document).ready`确保DOM完全加载后再绑定点击事件。 2. **绑定点击事件**: 给带有`top`类的元素绑定点击事件。 3. **滚动至顶部**: 使用`scrollTo`方法平滑滚动到页面顶部。 #### 五、使用jQuery打造手风琴式的折叠效果 **知识点**: 手风琴式折叠效果广泛应用于导航栏、FAQ列表等场景中，它可以帮助用户更高效地浏览和获取信息。 **代码示例**: ```javascript 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(); } }); } }; ``` **解析**: 1. **初始化**: 设置初始状态，隐藏非第一个`<li>`下的`.details`元素，并给第一个`<li>`元素添加`active`类。 2. **绑定点击事件**: 给所有`<li>`元素下的`<a>`标签绑定点击事件。 3. **处理点击逻辑**: - 如果当前`<li>`已激活，则根据其下的`.details`元素是否可见来决定是展开还是折叠。 - 如果当前`<li>`未激活，则先折叠所有其他已激活的`<li>`下的`.details`元素，然后将当前`<li>`设置为激活状态并展开其下的`.details`元素。