知识点预览1.jQuery加载2.jQuery选择器3.jQuery点击事件4.jQuery样式操作5.jQuery动画01-关闭函数功能：修改别人代码时避免方法中的情况同名替换，我想直接执行一个函数。使用封闭函数可以避免覆盖同名函数，避免覆盖同名变量。02-jQuery简介jQuery是一个快速简洁的JavaScript框架。框架）。jQuery的设计宗旨是“writeLess,DoMore”，提倡写更少的代码，做更多的事情。它封装了JavaScript中常用的功能代码，提供了简单的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特点可以概括为：独特的链式语法和简洁明了的多功能接口；它具有高效灵活的CSS选择器，可以扩展；具有方便的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE6.0+、FF1.5+、Safari2.0+、Opera9.0+等。03-jQuery基本使用1.http://jquery.com/官网2.https：//code.jquery.com/版本下载[AppleScript]纯文本视图__复制代码？12importCSSq<`scriptsrc="js/jquery-1.12.4.min.js">为了兼容低版本浏览器推荐使用1.x版本的jQuery**04-jQuery比较而native***WriteLess,DoMoreWriteless,domore,runfaster*Nativejs只能获取CSS内联样式中的属性*jQuery可以直接在CSS中设置或获取属性**05-jQuery的CSS属性操作***style属性用于在原生js中操作样式*在jQuery中操作CSS函数*数字类型可以不带单位，如果加单位则使用双引号*属性使用双引号*属性名在js中可以写orCSS*属性用逗号连接在jQuery中获取CSS属性时，只用双引号将属性包裹起来*在jQuery中设置CSS属性时使用大括号{}将属性和值括起来，类似于字典格式**06-jQuery选择器***常用选择器*\[AppleScript\]_纯文本查看__复制代码_[?](http://bbs.itheima.com/#)0102030405060708091011121314`/``/``1.``label``var$element``=``$``(``"div"``)``;``/``/``2.``class``$element``=``$``(``".para"``)``;``/``/``3.``ID``$element``=``$``(``"#spa"``)``;``/``/``4.``层次选择器``$element``=``$``(``".boxdiv"``)``;``/``/``5.``属性选择器``$element``=``$``(``"div[class=box3]"``)``;`***jQuery选择集过滤***has()选择后代包含xx的标签*not()选择except的标签xx*eq(cornerlabel)选择从0*开始的选择集中指定索引的标签\[AppleScript\]_纯文本查看__复制代码_[?](http://bbs.iheima.com/#)0102030405060708091011`/``/``1.``得到包含x元素的x元素``/``/``得到嵌套有p标签的``div``label``var$element``=``$``(``"div"``)``.has``(``"p"``)``;``/``/``2.``not``:``div``X标签以外的标签``/``/``选择除了类名所有``div``标签，除了box``2````$element``=``$``(``"div"``)``.``not``(``".box2"``)``;``/``/``3.``eq``(``下标``)``等于``var$eq``=``$``(``".列出li"``)``;``$eq.eq``(``6``)``.CSS``(``{``"颜色"``:``"红色"``}``)``;`***JQuery选择器传递***查找上面相邻的标签*prev()上一个*prevAll()以上*查找下面相邻的标签*next();*下一个（）；*兄弟姐妹（）;除了自己选择的所有同级标签*parent()父标签*children()获取所有直接子标签*find()查找里面的后代元素*\[AppleScript\]_plaintextView__CopyCode_[?](http://bbs.itheima.com/#)010203040506070809101112131415161718192021222324252627282930`/``/``1.``选择器移位``var$``div``=``$``(``".box4"``)``;``/``/``1.1``找到上面的可信元素``/``/``Previous``var$element``=``$``div``.prev``(``)``;``/``/``以上``$element``=``$``div``.prevAll``(``)``;``/``/``1.2``查找以下相邻元素``/``/``Next``$element``=``$``div``.next``(``)``;``/``/``所有的以下``$element``=``$``div``.nextAll``(``)``;``/``/``1.3``除了自己，其他关卡元素都选中``$element``=``$``div``.siblings``(``)``;``/``/``2.``父子关系``/``/``父元素``$element``=``$``div``.parent``(``)``;``/``/``子元素获取的所有直接子元素``$element``=``$``div``.children``(``)``;``/``/``查找里面的后代元素``$element``=``$``div``.find``(``".grandson"``)``;`***length判断是否有元素***length如果为0则表示没有这个标签*获取当前标签个数**10-点击事件***点击点击事件*当前触发该事件的标签对象*index()获取元素的角标**11-操作类样式类名***\[AppleScript\]_纯文本视图__复制代码_[?](http://bbs.iheima.com/#)0102030405060708091011`/``/``1.``添加类标签的名称``$``(``"div"``)``.addClass``(``"green"``)``;``/``2.``删除标签绑定的类名``$``(``"div"``)``.removeClass``(``"green"``)``;``/``/``3.``切换类名``/``/``如果有这个类名，删除``/``/``如果没有这样的类名，添加``$``(``"div"``)``.toggleClass``(``"green"``)``;`***Tabcase***给当前点击的按钮添加一个class，从其他按钮中删除class，没有class就没有黄色背景*通过点击的buttonindex找到index对应的div标签，然后添加class给它，同时删除其他div标签class**13-jQueryanimation***animate*jQuery是size相关的动画Color不会动画*如果要彩色动画，需要关联jQuery.colorlibrary*如果想实现连续动画，可以在动画完成后执行该函数继续在里面写动画代码
