jQuery复习

jQuery：是一个js函数库，口号写少 做多 write less do more

  封装简化DOM操作（增删改查）/ajax

---

为什么使用：强大的选择器：方便快速查找DOM元素

---

                        隐式遍历：一次监听多个

                        读写合一：读数据（读是读第一个数据） 写数据（所有）使用的是一个方法                

                        事件处理

                        链式调用:不断通过 . 不断调用方法 因为里面都有return this 返回的是jquery对象

                        DOM（CURD）增删改、

                        样式操作

                        动画

                        浏览器兼容

---

如何使用：引入库（本地 cdn远程引入） 是有$核心函数

两个利器 jQuery函数 jQuery对象

---

选择器：是有特定语法规则的字符串，用来查找某个 些DOM元素

 选择器：$(选择器)

里面填写的内容

 基本：#id  、tagName 、.class 、selector1,selector2 并集、selector1 selector2 交集

层次：找子孙后代 、selector1 >selector2 子元素 、selector1 selector2 后代元素

过滤：在原有基础上筛选内容

        :first 、:last  、:eq(index) 、:lt  、:gt  、:odd  、:even  、:not(selector)  、:hidden 、:visible

       、[attrName]、[attrName=value]、

表单：:input 、:text 、:checkbox 、:radio 、:checked 选中的

---

属性 ：操作标签属性、标签文本

       attr(name) /attr(name,value):读写非布尔值的标签属性

        prop(name)/prop(name,value):读写布尔值的标签属性

        removeAttr(name) /removeProp :删除属性

        addClass(classValue):添加class

        removeClass(classValue)：移除class

        val()/val(value):读写标签的value

        html()/html(htmlString):读写标签文本

---

CSS模块

css模块：

        style样式

               .css(styleName) 读样式

                   .css(样式名，样式值)：设置一个样式  

                 .css({多个样式对}) ：设置多个样式

        位置坐标 左上角

                offset  ：取匹配元素在当前视口的相对偏移 相对页面左上角的坐标

                position  取匹配元素在当前视口的相对偏移 相对页面左上角的坐标

                scrollTop:读取/设置y坐标的位置 元素 或者页面

        尺寸 width height 相对于盒子模型的宽高

                innerwidth 加上内边距

                outerwidth 加上边框

---

筛选模块

        过滤：返回是新的过滤后的jQuery对象

                        根据下标过滤：first(选择器)、 last(选择器)、 eq (index)

                       根据选择器：filter(选择器)、not（选择器）  对当前元素要求并取反

                        has（选择器） ：子孙元素要求

        查找：查找子孙 兄都 父

                        children:子元素

                        find：后代元素 子孙

                        preAll：前面的兄弟

                       siblings:所有兄弟

                        parent：父元素

---

文档处理模型：

        增

                append appendTo//插入后部

                preppend    preppendTo插入前部

                before:插入前面

                after:插入后面

        删

                remove：全部为空

                empty：自己还在

        改

                replayWith替换

---

事件处理模块

                绑定事件：on  、事件名

                        常用事件名：click mouseenter mouseleave mouseover mouserout focus /blur

                                hover

                解绑事件

                        off

        事件委派（委托）;子元素事件委托给父元素

                delegate委托

                undelegate取消委托

                好处：新增元素没有监听 减少监听数量 只需要1次

        事件坐标：event事件对象

                     event.offsetX  原点是元素左上角

                    event.clientX  原点是窗口左上角

                    event.pageX   原点是页面左上角

       停止事件冒泡        event.stopPropagation()

       阻止事件默认行        为event.preventDefault()

---

动画效果：（时间 速度 动画完成的监听回调函数）在一定时间内 不断改变样式 有一个速度的过程 变一下停一下

        fadeOut():慢慢淡出  改变透明度 opcity 1--0  然后显示display:none

        fadeIn：淡入 display 0 --1 display block

        slideUp 向上收缩 主要变化的是当前元素变化的高度

        slideDown 向下展开

        show():（不）带动画的显示

        hide():（不）带动画的隐藏

        toggle:（不）带动画的切换显示/隐藏

        自定义动画

                animate({结束时的样式}，time,fun)

                stop()结束动画

---

插件机制

        $.fn.extend({

                xxx:function(){ //this是jQuery对象 $()

                }

        }

$().xxx

        )//扩展jQuery对象
         $.extend({

                xxx:function(){ //this是jQuery $

                }

         })//扩展jQuery函数

$.xxx

---