JQuery入门与进阶概要.ppt

插件扩展 基于Jquery产生的插件非常多 其他资源： W3School：/jquery/ OSC：/apidocs/apidoc?api=jquery JQueryUI： / JQuery EasyUI： / Bootstrap：/ Jquery flexgrid Jquery插件库：/ * Inspur group 谢谢大家! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Inspur group Jquery入门与进阶 目录 一、简介 二、使用与版本 三、常用方法 四、插件扩展 JQuery简介 JQuery是免费、开源的，使用MIT许可协议。JQuery是一个兼容多浏览器的javascript框架，它是轻量级的js库 ，兼容CSS3，核心理念是write less，do more(写得更少,做得更多)。 JQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。 / JQuery简介 jQuery包含以下特点： 1.动态特效 2.AJAX 3.通过插件来扩展、成熟插件，模块化 4.方便的工具 - 例如浏览器版本判断 5.渐进增强 6.链式调用 7.多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持） 8.文档齐全、资源丰富 9.支持html内容分离，只需要定义ID即可 JQuery简介 入门实例： $(#test).hide() JQuery 的 hide() 函数，隐藏 id=test 的元素。 $(“img”).after(“iAfter/i”) 在图片后面添加文本。 $(‘#myDiv’).load(‘/jquery/test1.txt’); 通过 AJAX 改变文本。 目录 一、简介 二、使用与版本 三、常用方法 四、插件扩展 JQuery使用与版本 目前包括两个大版本1.xx.xx 和 2.xx.xx。 特别注意：JQuery2.0及后续版本将不再支持IE6/7/8浏览器。 推荐版本：jquery-1.8.3 （* min.js代表js文件已经被压缩，文件更小、更快） /oa_code/skins/dcwork/common/jquery-1.8.3.min.js 目录 一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展 6. CSS 7. 事件 8. 效果 9. Ajax 10. 工具 常用方法－核心 jQuery(html) 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。 jQuery(elements) 将一个或多个DOM元素转化为jQuery对象。 jQuery(callback) $(document).ready()的简写（当DOM加载完成后要执行的函数）。 注意：$() = jQuery() $号是jQuery“类”的一个别称。 例： 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。 $(divpHello/p/div).appendTo(body); 隐藏一个表单中所有元素。 $(myForm.elements).hide() 当DOM加载完成后，执行其中的函数。 $(function(){ // 文档就绪}); 目录 一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展 6. CSS 7. 事件 8. 效果 9. Ajax 10. 工具 常用方法－选择器 基本 $(*) 匹配所有元素 $(.myClass) 查找所有类是 myClass 的元素 $(div) 根据给定的元素名匹配所有元素 $(#myDiv) 查找 ID 为myDiv的元素 $(div,span,p.myClass) 将每一个选择器匹配到的元素合并后一起返回 层级 $(form input) 找到表单中所有的 input 元素（含多级） $(form input) 找到表单中所有的子级input元素（仅子级） $(label + input) 匹配所有跟在 label 后面的 input 元素 $(form ~ input)找到所有与form同辈的 input 元素 常用方法－选择器 属性 $(“tr:eq(1)”) 匹配