首页 前端知识 jQuery复习

jQuery复习

2024-02-01 12:02:51 前端知识 前端哥 292 424 我要收藏

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


 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1056.html
标签
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!