JQuery入门与进阶.ppt

2019/10/31,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(“after”) 在图片后面添加文本。 $(#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 元素中。 $(“hello“).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)”) 匹配一个给定索引值的元素 （查找第二行） $(“tr:first”) 匹配找到的第一个元素（查找表格的第一行 ） $(“tr:last”)匹配找到的最后一个元素（查找表格的最后一行 ） $(“input:not(:checked)”)去除所有与给定选择器匹配的元素（查找所有未选中的 input 元素 ） 内容 $(“div:contains(john)“)匹配包含给定文本的元素 可见性 $(“tr:hidden“) 查找所有不可见的 tr 元素 $(“tr:visible“) 查找所有可见的 tr 元素,查找所有可见的 tr 元素,常用方法选择器,属性 $(“tr:eq(1)”) 匹配一个给定索引值的元素 （查找第二行） $(“tr:first”) 匹配找到的第一个元素（查找表格的第一行 ） $(“tr:last”)匹配找到的最后一个元素（查找表格的最后一行 ） $(“input:not(:checked)”)去除所有与给定选择器匹配的元素（查找所有未选中的 input 元素 ） 内容 $(“div:contains(john)“)匹配包含给定文本的元素 可见性 $(“tr:hidden“) 查找所有不可见的 tr 元素 $(“tr:visible“) 查找所有可见的 tr 元素 属性 子元素 表单 表单对象属性 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展,6. css 7. 事件 8. 效果 9. ajax 10. 工具,常用方法属性,属性操作 css类操作 html操作 文本 值 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展,6. css 7. 事件 8. 效果 9. ajax 10. 工具,常用方法筛选,过滤 查找 串联 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展,6. css 7. 事件 8. 效果 9. ajax 10. 工具,常用方法文档处理,内部插入 外部插入 包裹 替换 删除 复制 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展,6. css 7. 事件 8. 效果 9. ajax 10. 工具,常用方法css,css 位置 宽高 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展,6. css 7. 事件 8. 效果 9. ajax 10. 工具,常用方法事件处理,页面载入 事件处理 交互处理 事件 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展,6. css 7. 事件 8. 效果 9. ajax 10. 工具,常用方法效果,基本 滑动 淡入淡出 自定义 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 6. css 四、插件扩展,7. 事件 8. 效果 9. ajax 10. 工具 11. 遍历,常用方法ajax,请求 事件 其他 *参照api文档,目录,一、简介 二、使用与版本 三、常用方法 1. 核心 2. 选择器 3. 属性 4. 筛选 5. 文档处理 四、插件扩展,6. css 7. 事件 8. 效果 9. ajax 10. 工具,常用方法工具,浏览器 数组和对象 测试 字符串操作