《JQuery入门与进阶.ppt》由会员分享，可在线阅读，更多相关《JQuery入门与进阶.ppt（32页珍藏版）》请在三一办公上搜索。
1、2023/2/15,Inspur group,Jquery入门与进阶,目录,一、简介二、使用与版本三、常用方法四、插件扩展,JQuery简介,JQuery是免费、开源的，使用MIT许可协议。JQuery是一个兼容多浏览器的javascript框架，它是轻量级的js库，兼容CSS3，核心理念是write less，do more(写得更少,做得更多)。JQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。,http:/,JQuery简介,jQuery包含以下特点：1.动态特效2.AJAX3.通过插件来扩展、成熟插件，模块化
2、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.t
3、xt);通过 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.CSS7.事件8.效果9.Ajax10.工具,常用方法核心,jQue
4、ry(html)根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。jQuery(elements)将一个或多个DOM元素转化为jQuery对象。jQuery(callback)$(document).ready()的简写（当DOM加载完成后要执行的函数）。注意：$()=jQuery()$号是jQuery“类”的一个别称。例：动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。$(Hello).appendTo(body);隐藏一个表单中所有元素。$(myForm.elements).hide()当DOM加载完成后，执行其中的
5、函数。$(function()/文档就绪);,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.CSS7.事件8.效果9.Ajax10.工具,常用方法选择器,基本$(*)匹配所有元素$(.myClass)查找所有类是 myClass 的元素$(div)根据给定的元素名匹配所有元素$(#myDiv)查找 ID 为myDiv的元素$(div,span,p.myClass)将每一个选择器匹配到的元素合并后一起返回层级$(form input)找到表单中所有的 input 元素（含多级）$(form input)找到表单中所有的子级input元素（
6、仅子级）$(label+input)匹配所有跟在 label 后面的 input 元素$(form input)找到所有与form同辈的 input 元素,常用方法选择器,属性$(“tr:eq(1)”)匹配一个给定索引值的元素（查找第二行）$(“tr:first”)匹配找到的第一个元素（查找表格的第一行）$(“tr:last”)匹配找到的最后一个元素（查找表格的最后一行）$(“input:not(:checked)”)去除所有与给定选择器匹配的元素（查找所有未选中的 input 元素）内容$(div:contains(John)匹配包含给定文本的元素可见性$(tr:hidden)查找所有不可见
7、的 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
8、 元素 属性子元素表单表单对象属性*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.CSS7.事件8.效果9.Ajax10.工具,常用方法属性,属性操作css类操作Html操作文本值*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.CSS7.事件8.效果9.Ajax10.工具,常用方法筛选,过滤查找串联*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.CSS7.事件8.效果9.Aj
9、ax10.工具,常用方法文档处理,内部插入外部插入包裹替换删除复制*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.CSS7.事件8.效果9.Ajax10.工具,常用方法CSS,CSS位置宽高*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.CSS7.事件8.效果9.Ajax10.工具,常用方法事件处理,页面载入事件处理交互处理事件*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.
10、CSS7.事件8.效果9.Ajax10.工具,常用方法效果,基本滑动淡入淡出自定义*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理6.CSS四、插件扩展,7.事件8.效果9.Ajax10.工具11.遍历,常用方法Ajax,请求事件其他*参照API文档,目录,一、简介二、使用与版本三、常用方法1.核心2.选择器3.属性4.筛选5.文档处理四、插件扩展,6.CSS7.事件8.效果9.Ajax10.工具,常用方法工具,浏览器数组和对象测试字符串操作*参照API文档,目录,一、简介二、使用与版本三、常用方法四、插件扩展,插件扩展,基于Jquery产生的插件非常多,其他资源：,W3School：http:/,OSC：http:/,JQueryUI：http:/EasyUI：http:/flexgrid,Jquery插件库：http:/,2023/2/15,Inspur group,谢谢大家!,
