年度总结——jQuery

一：什么是jQuery

快速，简洁的第三方js库

二：为什么要使用jQuery

1.终极简化了DOM操作

2.屏蔽了浏览器兼容性问题

三：版本

jQuery1.X版本

         1.兼容IE8

         2.jQuery.js未压缩的代码，可读性好，适合初学者用来学习，文件大

         3.jQuery.min.js压缩版本，毫无可读性，文件小

jQuery2.X版本

         1.不再兼容性IE8

四：如何使用

先引用jQuery.js,再编写自定义脚本（两种方法）

         1.将jQuery.js下载到服务器本地，在script中使用服务器路径

         2.使用CDN网络共享的jQuery.js——产生环境中用的最多

五：查找

基本选择器：#id/.class/element/*/选择器1，选择器2/——同CSS

层次选择器：选择器1空格选择器2/>/+/~——同CSS

过滤选择器：

         1.基本过滤（位置过滤）：

         根据元素在查找结果集合中的下标选择元素，和元素在其父元素下的位置无关

：first/last——选择结果集合中第一个/最后一个元素

：even/odd——选择结果集合中下标为偶数或者奇数的元素，下标从0开始

：eq/gt/lt(i)——选择结果集合中下标等于/大于/小于i位置的元素

         2.子元素过滤：同CSS

         根据元素在其度元素中的位置选择，和元素在查找中的位置无关

：first-child——过滤选择结果集合中第一个

：last-child——过滤选择结果集合中最后一个

：nth-child（n/odd/even/2n/2n+1）——过滤自定义下标元素，下标从1开始，且仅限于当前父元素内

：only-child——过滤选中的唯一一个元素

否定选择器：

         ：not（任意selector）

内容过滤：

         ：contains(文本)——比如: span:contains("购物车")

         ：empty——比如: span:empty 选择内容为空的span

         ：parent——比如: span:parent 选择包含子内容或元素的span   ——是:empty的反义

         ：has("selector")——比如: div:has(.active) 选择包含class为active的子元素的父元素div  

可见性过滤：

         ：visible——匹配所有可见的元素

         ：hidden——所有不可见元素（4种）

         CSS：display：none；visibility：hidden；opacity：0；

         HTML：type="hidden"

强调: :hidden只能匹配 display:none; 和type="hidden"

属性过滤——其实就是css中的属性选择器

         [属性名] 匹配包含指定属性的元素

         [属性名=值] 匹配指定属性的值为指定值得元素

         [属性名!=值] 匹配指定属性的值不是指定值得元素

         [属性名^=值] 匹配指定属性的值以指定内容开头的元素

         [属性名$=值] 匹配指定属性的值以指定内容结尾的元素

         [属性名*=值] 匹配指定属性的值包含指定内容的元素

         [属性选择器1][属性选择器2]... 匹配同时满足属性选择器1，,2的元素

表单过滤：

         ：input——选择所有input  textarea  select  button

         ：type属性——：text/password/:checkbox/:radio/:button/:submit/:reset/:image/:file

        表单属性过滤：

         ：disabled/:enabled/:checked/:selected

节点间关系：

            1.父子关系：

$("...").children(["selector"])——仅找“直接”子元素中符合selector条件的

$("...").find("selector")——在“所有后代”中查找符合selector条件的

$("...").parent()——获得当前元素的父元素

         2.后代关系：

$("...").next/prev(["selector"])——紧邻的前一个或后一个兄弟元素，必须紧邻

$("...").nextAll/prevAll(["selector"])——之后/之前所有符合条件的兄弟

$("...").siblings(["selector"])——除自己之外的左右兄弟

六：API通用属性

1.几乎所有API自带forEach的效果——对$("...")执行的操作，相当于自动应用到查询结果中每个元素上

2.每个API都返回jQuery对象本身——$("...")之后可使用链式操作反复调动多个API

         为什么要链式操作——1:避免重复创建jQuery对象，每次调用$都会创建新的jQuery对象；

       ——2:节省变量的使用

3.很多API两用——传一个参数是读取属性值，传两个参数就是修改属性值

七：修改

属性：

         1.访问attribute属性：

获取——var value=$("...").attr("属性名")

修改——1:只修改一个属性——$("...").attr("属性名",值)

                       ——2:同时修改多个属性——$("...").attr({属性名：值，属性名：值，...})

    2.访问三大状态：（disabled，checked，selected）

用法同attr()——$("...").prop(...)

            3.移除属性——$("...").removeAttr/removeProp("属性名")

内容：

         1.html内容——$("...").html(["html代码片段"])——两用

         2.文本内容——$("...").text(["文本内容"])——两用

         3.表单元素内容——$("...").val(["值"])——两用

         4.清除内容——$("...").empty()

样式：

         1.直接修改CSS属性

获取css样式（计算后的样式）——$("...").css("css属性名")

修改css样式——1:单个——$("...").css("css属性名"，值)

          ——2:多个——$("...").css({css属性名：值，css属性名：值，...})

         2.通过修改class批量修改样式

判断是否包含指定class——$("...").hasClass("类名")

添加class——$("...").addClass("类名")

移除class——$("...").removeClass("类名")

切换class——$("...").toggleClass("类名")

八：添加，删除，替换，复制

添加：

         1.创建新元素——var $newElem=$("html代码片段")

         2.将新元素添加到DOM树

结尾/开头出入——$(parent).append/prepend($newElem)

在某个child前后插入——$(child).before/after($newElem)

删除：

         $("...").remove()

替换：

         用右替换左——$("现有元素").replaceWith("新元素html代码")

         用左替换右——$("新元素html代码").replaceAll("现有元素")  

复制（克隆）：

         浅克隆——仅复制属性，不复制行为——$("...").clone()

         深克隆——即复制属性，又复制行为——$("...").clone(true)

九：事件

.bind("事件名",fn)

         .unbind("事件名",fn)    /    .unbind("事件名")    /    .unbind()

.one("事件名",fn)

简化版——$("...").事件名(function(e){...})

终极简化——1:仅为一个元素绑定元素——$("...").on("事件名",fn)

             ——2:利用冒泡/事件委托——$("parent").on("事件名","selector",fn)

$("parent").delegate("selector","事件名",fn)——简化了利用冒泡中：1.用selector代替了if判断；2.this->e.target；

this——1:触发事件的当前元素对象——DOM对象——$(this)——jq对象

              ——2:利用冒泡——this->e.target

模拟触发——$("...").trigger("事件名")——模拟触发所有选中元素的指定事件

页面加载后触发：

         1.window.onload=function(){...}——晚——整个页面加载完才执行——等待HTML，CSS，JS，图片...

         2.$(document).ready(fn)——1:ondomcontentloaded——早——只要DOM内容加载完成就触发——只要等待HTML，JS

          ——2:$().ready(fn)——$(fn)

   ——3:其实只要将script代码放在body结尾就可以解决

十：动画效果

简单：

    1.显示隐藏——$("...").show/hide/toggle(speed,easing.callback)

    2.上下滑动——$("...").slideUp/slideDown/slideToggle(speed,easing,callback)

    3.淡入淡出——$("...").fadeIn/fadeOut/fadeToggle(speed,easing,callback)

    4.问题——不便于维护

    5.解决——其他都应该用class+transition

万能：

    1.多个CSS属性并发改变——$("...").animate({css属性:目标值，css属性:目标值，...},speed,easing,callback)；

    2.问题——仅对数值类型的属性有效。对颜色，字体，C3的变换无效；

    3.callback中的this->正在播放动画的DOM元素

    4.多个动画串行执行——$("...").animate().animate()...

    5.停止——$("...").stop(true)

    6.选择器——:animated——匹配所有正在执行动画效果的元素

问题：

    底层依然是定时器动画，效率低

解决：

    animate.css

十一：封装自定义插件

添加jQuery全局函数

 

封装自定义Widget