jquery_chajian资源-CSDN文库

共28个文件

gif：11个

js：8个

css：6个

需积分: 9 70 浏览量 2008-11-25 22:05:39 上传评论收藏 105KB ZIP 举报

**jQuery - 深入理解与实践** jQuery是一款强大的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在“jquery_chajian”这个主题下，我们将深入探讨jQuery的核心概念和实用技巧。 ## 1. jQuery选择器 jQuery的选择器是其强大功能之一，它们基于CSS选择器，可以方便地选取页面中的元素。例如，`$("#id")`用于选取ID为"id"的元素，`$(".class")`则选取所有class为"class"的元素。更复杂的选择器如`$("input[type='text']")`可以选取所有文本输入框。 ## 2. DOM操作 jQuery提供了丰富的DOM操作方法，如`$(selector).html()`用于获取或设置元素的HTML内容，`$(selector).append()`用于在元素末尾添加内容，`$(selector).prepend()`则是插入到元素的开头。此外，`$(selector).attr()`和`$(selector).removeAttr()`分别用于设置和移除属性。 ## 3. 事件处理 jQuery简化了事件处理，使用`$(selector).on('event', function() {...})`可以绑定事件监听器，如`$('button').on('click', function() {...})`监听按钮点击事件。`.off()`用于解除事件绑定，`.trigger()`则可以手动触发事件。 ## 4. 动画效果 jQuery的动画功能强大，`$(selector).fadeIn()`和`.fadeOut()`实现元素的淡入淡出效果，`.slideToggle()`则让元素滑动显示或隐藏。通过`$(selector).animate()`可以自定义复杂的动画效果，指定CSS属性随时间变化。 ## 5. Ajax交互 jQuery的`.ajax()`方法简化了异步数据请求。例如，`$.ajax({url: 'data.json', type: 'GET', success: function(data) {...}})`发送GET请求并处理返回的数据。`.getJSON()`和`.load()`则是对特定场景的简化版本。 ## 6. 插件和扩展 jQuery有一个庞大的插件生态系统，如`toggleElements`可能是某个插件的一部分，用于切换元素的可见性。jQuery插件通常通过扩展jQuery对象的方法来实现功能，如`$(selector).toggleElements(options)`。 ## 7. 实战应用在实际项目中，jQuery常用于交互增强和页面动态更新。例如，使用`.ready()`确保DOM加载完成后执行代码，使用`.delegate()`或`.on()`处理动态生成元素的事件，利用Ajax实现无刷新加载。 ## 8. 性能优化虽然jQuery简化了许多操作，但也可能带来性能问题。优化包括：避免过多的选择器查询，减少DOM操作，使用事件代理，以及适时使用`.stop()`防止动画堆积。 ## 9. 兼容性和未来 jQuery广泛支持各种浏览器，但随着ES6和现代前端框架的发展，它的使用在某些场景下可能会减少。然而，对于维护旧项目或简化跨浏览器兼容性问题，jQuery仍然是一个可靠的选择。总结来说，jQuery是前端开发中的得力工具，无论你是初学者还是经验丰富的开发者，都能从中受益。通过深入学习和实践，你可以更高效地编写出互动性强、用户体验优良的网页应用。

资源推荐

资源详情

资源评论

收起资源包目录

_隐藏效果的jquery插件--toggleElements.zip （28个子文件）

toggleElements

bgc.gif 8KB

image.jpg 7KB

bgi.gif 30KB

togglerch.gif 112B

toggleroh.gif 113B

download.gif 3KB

jquery.toggleElements.js 6KB

index.html 14KB

togglerc.gif 114B

jquery.toggleElements.pack.js 2KB

ext.gif 115B

pluginpage.js 1KB

toggleElements2.css 1KB

js.gif 596B

togglero.gif 115B

toggleElements.css 2KB

style.css 4KB

chili

javascript.js 1KB

chili.pack.js 4KB

html.css 735B

css.css 766B

javascript.css 862B

html.js 986B

css.js 4KB

favicon.ico 4KB

bgw.gif 260B

bgf.gif 25KB

jquery-latest.pack.js 27KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>jquery.toggleElements.js - Toggle HTML-Elements with jQuery</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="jquery.toggleElements.js - Toggle HTML-Elements with jQuery" /> <meta name="keywords" content="toggle, jQuery, Plugin, JavaScript Library, snippet, jQuery-Plugin, JavaScript, Ajax, Css" /> <meta http-equiv="keywords" content="toggle, jQuery, Plugin, JavaScript Library, snippet, jQuery-Plugin, JavaScript, Ajax, Css" /> <meta name="verify-v1" content="Eal6+fiCjgKAZb5A6pRvSLmsh9NLF2AsqxqJrLuFoAs=" /> <meta name="robots" content="index,follow" /> <meta name="revisit-after" content="7 days" /> <meta name="siteinfo" content="http://jquery.andreaseberhard.de/robots.txt" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" /> <link rel="icon" href="favicon.ico" /> <link rel="shortcut icon" href="favicon.ico" /> <script type="text/javascript" src="jquery-latest.pack.js"></script> <script type="text/javascript" src="pluginpage.js"></script> <script type="text/javascript" src="jquery.toggleElements.pack.js"></script> <link rel="stylesheet" type="text/css" href="toggleElements.css" /> <link rel="stylesheet" type="text/css" href="toggleElements2.css" /> <script type="text/javascript"> $(document).ready(function(){ $('div.toggler-1').toggleElements( ); $('ul.toggler-2').toggleElements( ); $('img.toggler-3').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('ul.toggler-4').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('div.toggler-5').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } ); $('ul.toggler-6').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } ); $('div.toggler-7').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } ); $('ul.toggler-8').toggleElements( { fxAnimation:'show', fxSpeed:'fast', className:'none' } ); $('fieldset.toggler-9').toggleElements( { fxAnimation:'show', fxSpeed:1000, className:'toggler', onClick:doOnClick, onHide:doOnHide, onShow:doOnShow } ); $('div.toggler-10').toggleElements( ); }); function doOnClick() { alert('callback: onClick'); } function doOnHide() { alert('callback: onHide'); } function doOnShow() { alert('callback: onShow'); } </script>  <script type="text/javascript" src="chili/chili.pack.js"></script> <script id="setup" type="text/javascript"> ChiliBook.recipeFolder = "chili/"; ChiliBook.stylesheetFolder = "chili/"; </script> </head> <body> <div id="page"> <div class="intro"> <h1> <a href="./index.html" title="jquery.toggleElements.js - Toggle HTML-Elements with jQuery">jquery.toggleElements.js<br />Toggle HTML-Elements with jQuery</a> </h1> <div class="introtext"> <p> <strong>toggleElements</strong> is designed to hide informations on your site and show it only when the user requests more information. </p> <h2>Features</h2> <ul> <li>unobtrusive script, simple to setup</li> <li>full customizeable via CSS</li> <li>only a class and a title-attribute must be added to your original HTML</li> <li>nesting <em>toggleElements</em> is possible</li> </ul> <p class="light">This page uses jQuery Version <script type="text/javascript">document.write(jQuery(document).jquery);</script></p> </div> <div class="sidebar"> <p> Version 1.3, 2007-09-11 </p> <p> Tested on Windows XP SP2 with<br /> - IE 5.5 + 6 + 7<br /> - Firefox 1.5.0.7 + 2.0.0.3<br /> - Opera 8.0 + 8.5 + 9.00 </p> <div class="download"><a href="http://jquery.andreaseberhard.de/download/toggleElements.zip" title="Download this site">Download</a></div> </div> </div> <div class="examples"> <h2>E x a m p l e s:</h2> <div class="toggler-1" title="Example 1: div with text and image"> <p> <img src="image.jpg" style="float:left;margin-right:30px;margin-bottom:10px;" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue. </p> </div> <ul class="toggler-2" title="Example 2: unordered list"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue. </p> <img src="image.jpg" alt="" class="toggler-3" title="Example 3: a single image with different class" /> <ul class="toggler-4" title="Example 4: unordered list with different class"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> <div class="toggler-5" title="Example 5: div with different class and subs ;-)"> <p> <img src="image.jpg" style="float:left;margin-right:30px;margin-bottom:10px;" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue. </p> <ul class="toggler-6" title="Example 6: unordered list"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> <div class="toggler-7" title="Example 7: unordered list with sub"> <ul> <li>Google</li> <li>AltaVista</li> <li> <ul class="toggler-8" title="Example 8: unordered list"> <li>Google</li> <li>AltaVista</li> <li>Fireball</li> </ul> </li> </ul> </div> </div> <fieldset class="toggler-9" title="Example 9: fieldset, with callbacks"> <legend>Lorem Ipsum</legend> <label for="foo"><input id="foo" name="foo" /></label> <input type="su

评论收藏

内容反馈