jQuery介绍@disandu.com

jQuery 介绍 05/23/10 www.disandu.com

目录 jQuery 简介 jQuery 选择器及 DOM 基本操作事件处理及动画用 jQuery 改进现有代码插件介绍 jQuery 学习资源

使用 JavaScript 的困境 JavaScript 太难写了！糟糕的 DOM 操作： getElementsByTagName 、 getElementById 、 document 、 innerHTML 。。。各个浏览器各自为政浪费大量时间处理跨浏览器的问题代码难重用、难维护在网上东抄西抄，代码风格不统一，代码难维护，仅仅实现功能，缺乏重用机制。

jQuery 是什么？ jQuery 是一个开放源代码的 JavaScript 框架，它能简化 HTML 与 JavaScript 程序之间的交互。 ——— jQuery 作者 John Resig

为什么选择 jQuery? 好学好用，还很轻巧完全支持 CSS 3 的选择器，方便的包装集和函数链。完整的源码大小（压缩后）仅仅 24Kb( 最新版本 v1.4.2) 跨浏览器支持 IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome 开放的架构核心库仅仅包含大多数页面需要的功能，易于附加功能进行扩展，通过扩展 jQuery 库，可以利用核心库提供的强大功能（选择器、包装集）。强大的社区完善的文档与数以千计的插件。

jQuery 能做什么？找到特定元素操作这些元素 $(“div p”).addClass(“special”); jQuery 对象 $=jQuery

基本 CSS 选择器选择器描述 * 匹配任何元素 E 匹配标签名称为 E 的所有元素 E F 匹配标签名称为 F 、作为 E 的后代节点的所有元素 E > F 匹配标签名称为 F 、作为 E 的直接子节点的所有元素 E + F 匹配前面是邻近兄弟节点 E 的所有元素 F （ E 和 F 紧挨着） E - F 匹配前面是任何兄弟节点 E 的所有元素 F(E 和 F 可以不紧挨） E.C 匹配带有类名 C 的所有元素 En 。 .C 等效于 *.C E#I 匹配 id 特征值为 I 的元素 E 。 #I 等效于 *#I E[A] 匹配带有特征 A 的所有元素 E( 不管特征 A 的值是什么 )

选择器 1 HTML 元素 $(‘p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> HTML 元素加上 ID $(‘p#first’) $(‘#first’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> H TML 元素加上 class $(‘p.second’) $(‘.second’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div>

选择器 2 后代节点元素 div 节点内所有 p 结点 $(‘div p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 直接子节点元素 div 下一级的 h1 节点 $(‘div > span’) 没有匹配节点 $(‘div > h1’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> 相邻节点 h1 节点之后的 p 节点 $(‘h1 + p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>

选择器 3 混合元素取两个元素的并集 $(‘div, p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 所有元素 $(‘*’) <div> <h1> Title </h1> <p id=‘first’> <span> TEST </span> </p> <p class=“second’> TEST2 </p> </div> 兄弟节点元素取 h1 节点之后的所有 p 节点（与 h1 同一层次） $(‘h1 ~ p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>

选择器 4 选择器描述 $(‘[href]’) 属性 $(‘[target=_blank]’) 属性 + 值 $(‘a[rel]’) 元素 + 属性 $(‘[rel!=nofollow]’) 属性值不等于 $(‘[href^=http]’) 属性值以 XX 开头 $(‘[href$=jquery.com]’) 属性值以 XX 结尾 $(‘[href*=jquery]’) 属性值包括 XX $(‘[href^=jquery][target=_blank]’) 元素的多个属性条件组合

筛选器 1 $(‘p:first’) 最先匹配的元素 $(‘p:last’) 最后匹配的元素 $(‘p:not[class=bodytext]’) 对指定的筛选器求反 $(‘p:even’) 偶数次匹配的元素 $(‘p:odd’) 奇数次匹配的元素

筛选器 2 第 n 个匹配元素 $(‘p:eq(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p> 第 n 个匹配元素之后的元素 $(‘p:gt(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p> 第 n 个匹配元素之前的元素 $(‘p:lt(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p>

筛选器 3 包含文本的元素 $(‘p:contains(TEST)’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 包含节点的元素 $(‘p:has(span)’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> 包含了后代节点的元素（排除了空节点） $(‘p:parent’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>

选择器相关函数结点关系函数 next 返回下一个兄弟节点的包装集 prev 返回上一个兄弟节点的包装集 parent 返回直接父节点的包装集 children 返回子节点的包装集 nextAll 返回所有后续兄弟节点的包装集 prevAll 返回所有前面兄弟节点的包装集 siblings 返回所有兄弟节点的包装集

选择器相关函数 find wrappedSet.find(‘p cite’) === $(‘p cite’, wrappedSet) $(‘div’).addClass(‘fault’).find(‘p’).css(‘fontSize’,’16px’); filter var digitalTd = $(‘td’).filter(function() { return this .innerHTML.match(/^\d+$/)}) is var hasImage = $(‘*’).is(‘img’);

操作元素属性和特性操作属性 attr(name) $(‘#myImage’).attr(“src”); attr(attr, value) $(‘#myImage’).attr(‘src’, ‘image.jpg’); attr(attrbutesObject) $(‘#myImage’).attr({src: ‘image.jpg’ }); removeAttr(name) $(‘input’).removeAttr(‘checked’);

操作元素属性和特性添加和删除类名称 addClass(names) $(‘.question’).addClass(“fault”); removeClass(names) $(‘.question’).removeClass(‘fault’); toggleClass(name) 类名存在则删除，不存在则添加 $(‘td’).toggleClass(‘color’); hasClass(name) $(‘#questionID’).hasClass(‘fault’);

操作元素属性和特性获取和设置样式 css(name) $(‘#myImage’).css(‘width’); css(name, value) $(‘#myImage’).css(‘width’, ’200px’); $(‘#myImage’).css(‘width’,function() {return $(this).width() + 20 + “px”; }); css(propertiesObject) $(‘#myImage’).css({ “ width” : ‘200px’, “ length” : ‘300px’ ， “ border” : ‘1px solid red’ });

操作元素属性和特性替换 HTML 或文本内容 html() $(‘#id’).html() === $(‘#id’)[0].innerHTML html(text) $(‘#id’).html(text) == $(‘#id’). innerHTML = text $(‘div’).html(text); 设置所有匹配元素的 HTML 内容 text() $(‘#id’).text() === $(‘#id’)[0].innerText text(content) $(‘p’).text(‘paragraph’);

操作元素属性和特性移动和复制元素 Beyond DOM API !! append(content) 主动 $(‘.appendToMe”).append(toAppend); appendTo(target) 被动 $(‘#car’).appendTo(‘#target’); 类似的命令 prepend() 主动 prependTo() 被动 before() 主动 insertBefore() 被动 after 主动 insertAfter() 被动

操作元素属性和特性包裹元素 wrap(wrapper) wrapAll(wrapper) wrapInner(wrapper) 删除元素 remove() empty() 克隆元素 clone(copyHandlers) $(‘ul’).clone().insertBefore(‘#here’)

jQuery 事件处理绑定事件处理函数 bind 绑定事件处理函数 $(‘img’).bind(‘click’, function() { alert(“hello, jQuery”); }); unbind 解除绑定 $(‘img’).unbind(‘click’); eventName 利用事件名称绑定事件的的快捷方法 click,blur,focus,mousedown … … $(‘img’).click(function() { alert(“hello, jQuery”); });

jQuery 事件处理元素显示 \ 隐藏函数 show 显示 HTML 元素 show(“slow”); show(“normal”); show(“fast”); hide 隐藏 HTML 元素 toggle 切换显示效果 ( 包装集内显示的元素隐藏，隐藏的元素显示 )

jQuery 事件处理动画效果淡入淡出 fadeOut fadeIn fadeTo 滑上滑下 slideDown slideUp slideToggle 自定义动画 animate $(‘#img’).animate( { width: $(this).width * 2, height: $(this).height * 2 }, 2000);

用 jQuery 改进现有代码处理库冲突 “真正的 $ 请站起来？” 方法 1 ：使用 jQuery 代替 $ ，运用 $.noConflict() 将 $ 交给别的库（ Prototyper ）。方法 2 ：传递 jQuery 到定义了参数 $ 的函数 (function($) { /* 函数内容写在这里 */ } )(jQuery);

用 jQuery 改进现有代码操作 DOM 元素，不仅仅在 ready 函数 var jQuery = windows.$ = function( selector, context ) { context = context || document ; return new jQuery.fn.init( selector, context ); }; // 检查未作答题目 function CheckUnanswer() { var pframe = window.frames["mainBody"]; if ($('div#paper div',pframe.document).size() > 0) { // do something here } } var divs = document.getElementsByTagName("div”); ); If ($(divs[0]).find(‘div’).hasClass(‘answer’)) { // do something here }

用 jQuery 改进现有代码应用包装集与函数链包装集简单应用 if ($("#paper input").is(":checked")) // 判断是否有 input 控件被选择包装集与函数链综合应用 // 获得所有可作答的题目 $('div.question').filter( function() { // 筛选不包含子题目的题目 return ($('div.subquestion',this).size() == 0); } ).add(‘.subquestion’) .not(‘.errorQuestion’).fadeOut() // 答对的题淡出 .end() // 获得上一个包装集 ( 所有试题 ) .filter(‘.errorQuestion’).fadeIn(); // 答错的题淡入

用 jQuery 改进现有代码用 jQuery 访问 XML 文档 XPath vs. CSS XML 文档对象 XML 文本 XML 文件参考资料：使用 jQuery 在浏览器中处理 XML http://www.ibm.com/developerworks/cn/xml/x-feedjquery/ 在 XPath 与 jQuery 之间选择 http://www.ibm.com/developerworks/xml/library/x-xpathjquery/index.html?ca=drs- $(xmlDoc).find("[nodeName=u]").each( function() {); $(xmlString).find("[nodeName=u]").each( function() {); $.get( "http://localhost/~chrish/books.xml", function( data ) { root = data; $("p#status").text( "Loaded." ); } );

用 jQuery 改进现有代码改善用户体验 jQueryUI 库 jQuery 用户界面插件 http://www.jqueryui.com Themeroller 界面控件风格定制 http://jqueryui.com/themeroller/ 插件无尽的可能！

jQuery 学习资源中文书籍

jQuery 学习资源官方网站 jQuery 官方网站 http://www.jquery.com jQuery 代码托管 http://code.google.com/p/jqueryjs/ jQuery 官方文档 http://docs.jquery.com/Tutorials/ jQuery UI 插件库 http://jqueryui.com/ jQuery UI 代码托管 http://code.google.com/p/jquery-ui/

jQuery 学习资源中文网站 CSDN jQuery 主页 http://subject.csdn.net/jQuery/ jQuery 中文社区 http://bbs.jquery.org.cn/index.php R IA WORLDS jQuery 文章分类 http://www.51toria.cn/?cat=5

jQuery 学习资源插件汇总 jQuery Plugins http://plugins.jquery.com/ 200+ jQuery 插件（插件分类特别齐全） http://paranimage.com/jquery-plugin-list/ 50+ Amazing Jquery Examples http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html 37 个更加出色的 jQuery 插件 http://paranimage.com/37-plug-ins-even-more-outstanding-jquery/ 表格控件 http://www.comsharp.com/GetKnowledge/zh-CN/CMS_K945.aspx

jQuery介绍@disandu.com

More Related Content

What's hot

Similar to jQuery介绍@disandu.com

jQuery介绍@disandu.com