2021-05-27

 jQuery常用的模块总结

 

1.css模块

    *style样式

        *css（styleName）：根据样式名得到对应的值

        *css（"styleName","value"):设置一个样式

        *css（{"":"" , "":""}）:设置多个样式

    *位置坐标

        *offset();读/写当前元素坐标（原点是页面左上角）

        *position():读当前元素坐标（原点是父元素左上角）

        *scrollTop()/scrollLeft():读/写元素/页面的滚动条坐标

     *尺寸

        *width()/height():width/height

        *innerWidth()/innerHeiht():----width + padding ；

        *outerWidth()/outerHeight():---width + padding +border +margin

2.筛选模块

    *过滤

       *在jQuery对象内部的元素中找出部分匹配的元素，并封装成新的jQuery对象返回

        根据下标过滤

        *first()

        *last()

        *eq(index)

        根据选择器

        *filter(selector)对当前的元素提要求   选择器过滤 

            例-$("p").filter(".selected")保留带有select类的元素

            例-$("p").filter(".selected, :first")保留第一个以及带有select类的元素

        *not（selector）对当前的元素提要求并取反

            例-$("p").not( $("#selected")[0] )从p元素中删除带有 select 的ID的元素

        *has(selector)对子孙元素提要求

            例-$('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色

    *查找

       *查找jQuery对象内部的元素的子孙/兄弟/父母元素，并封装成jQuery对象返回

       *children(selector):子元素

       *find(slelctor):后代元素

       *preAll(selector)：前面的所有兄弟

       *siblings(selector):所有兄弟

       *parent():父元素

3.文档处理（CUD)模块

     *添加

       *append()/appendTo():插入后部

       *preppend()/preppend():插入前部

       *before():插到前面

       *after():插到后面

    *删除

       *remove() 删除 将自己及内部的孩子都删除

       *empty() 掏空(自己还在)

    *更新

       *replaceWith()

4.事件模块

    *绑定事件

        *eventName(function(){  })

        *on('eventName',function(){ })

        *常用：click ， mouseenter/mouseleave mouseover/mouseout focus/blur

        *hove(function(){ }, function(){ } )

    *解绑事件

        *off("eventName")   "" 里面不写则解除所有的事件

    *事件委托

        *将子元素的事件委托给父辈元素处理

            *事件监听绑定在父元素上，单事件发生在子元素上

            *事件会冒泡到父元素

            *但最终调用的事件回调函数的是子元素：event.target

        *好处

            *新增的元素没有事件监听

            *减少监听的数量（n==>1)

        *编码

            *设置事件委托：on(selector,"eventName",function(){  })  回调函数中的this是子元素 比如是li不是ul

            *解除事件委托：off（"eventName")

    *事件坐标

        *event.offsetX: 原点是当前元素左上角

        *event.clientX: 原点是窗口左上角

        *event.pagex:   原点是页面左上角

    *事件相关

        *停止事件冒泡：event.stopPropagation()

        *阻止事件的默认行为：event.prenentDefault()