jQuery笔记 02

目录

01 jq中预定义动画的使用

02 jq中的自定义动画

03 jq的动画的停止

04 jq节点的增删改

05 属性节点的操作

06 jq中的值和内容的操作

07 jq中宽高的操作

08 jq中坐标的操作

---

01 jq中预定义动画的使用

        jq的预定义动画:

                1.显示隐藏动画

                        显示 : jq对象.show()

                               不传参数 表示直接显示 控制元素的 display属性

                                传入毫秒值 表示 元素的width/height/opacity  从0变化到本身大小

                                毫秒值表示多少毫秒变化完

                                传入毫秒值,回调函数  显示动画执行完毕  触发的回调函数

                        隐藏 : jq对象.hide() 

                                    参数用法跟show一样

                        切换: jq对象.toggle()

                                    参数用法跟show一样

        2.滑入滑出动画

                滑入动画 :  jq对象.sildeDown()

                                参数 传入毫秒值 

                                参数 传入毫秒值 + 回调函数

                滑出动画 : jq对象.slideUp()

                                参数 传入毫秒值

                                参数 传入毫秒值 + 回调函数

                控制元素的height属性

        3.淡入淡出动画

                淡入动画 : jq对象.fadeIn()

                淡出动画 : jq对象.fadeout() 

                淡入淡出切换 : fadeToggle()

                淡化到指定透明度 :  fadeTo(毫秒值,目标透明度,回调函数)

                (参数和滑出一样)

        jq的动画默认会有动画队列

        一旦上一个动画未执行完 又加入了新的动画

        那么新的动画不会马上执行 

        而是等待上一个动画执行完毕后 再执行下一个动画

        如果启动的动画比较多 那么会一直等待前面的动画执行完毕

02 jq中的自定义动画

        jq的animate自定义动画:

                jq对象.animate({

                        要进行动画的css属性键值对

                },动画的持续时间,'linear/swing',回调函数)

        第三个参数动画速率  不传默认linear

03 jq的动画的停止

       jq的动画默认有队列效果   如果想要提前停止 那么调用stop方法

        参数是两个布尔值  默认值都是false

         jq对象.stop()

                第一个参数: 后续动画是否会执行

                        true: 后续不执行

                        false:后续会执行

                第二个参数: 立即完成或停止当前动画

                        true: 立即完成当前动画

                        false: 立即停止当前动画

04 jq节点的增删改

jq节点操作

        增加节点:

                创建 : js: document.createElement('标签名')

                          jq: $('标签字符串')

                拼接 : js: 父元素.appendChild(元素节点对象)

                                父元素.insertBefore(新节点,旧节点)

                          jq: 父元素.append(jq节点对象或者标签字符串)  在父元素的最后一位拼接

                               父元素.prepend(jq节点对象或者标签字符串) 在父元素第一位拼接

                                元素.after(jq节点对象或者标签字符串)  在当前元素后面拼接新元素

                                元素.before(jq节点对象或者标签字符串) 在当前元素的前面拼接

        删除节点:

                js :  父节点.removeChild(子节点对象)

                jq : 清空:  jq对象.html(" ") 相当于原生js的 对象.innerHTML='' (把内部内容清空)

                                jq对象.empty() 清空内部内容

                        删除: jq对象.remove() (节点"自杀")

        修改节点:

                js: 父节点.replaceChild(新节点,旧节点)

                jq: jq对象1.replaceAll('选择器') 把参数选择器选择到的元素 都替换成jq对象1

        克隆节点:

                js: 节点对象.cloneNode(布尔值);

                        true表示 克隆内部内容  false表示只克隆标签本身

                jq: jq对象.clone(布尔值)

                        布尔值默认为false  表示不克隆元素的事件

                        如果传入 true 表示克隆元素的事件    

05 属性节点的操作

        属性节点的操作:

                js:

                        节点对象.getAttributeNode("属性名")   根据属性名获取属性节点对象

                        节点对象.setAttribute('属性名','属性值')   创建或者修改 指定节点

                        节点对象.removeAttribute('属性名')   

                        节点对象.getAttribute('属性名')

                jq:

                        增加或者修改属性节点 :  jq对象.attr('属性名','属性值')

                        删除: jq对象.removeAttr("属性名")

                        修改: jq对象.attr("属性名","属性值")

                        查询: jq对象.attr("属性名")

                三个特殊的属性不要使用attr方法

                        checked        selected        disabled(禁用)

                这三个属性 使用prop方法操作

                prop用法跟attr没有任何区别

                        增改: jq对象.prop("属性名","属性值")

                        删除: jq对象.removeprop("属性名")

                        查询: jq对象.prop("属性名")

06 jq中的值和内容的操作

        内容操作:

                js:

                        设置元素内部内容:

                                节点对象.innerHTML=新内容

                                节点对象.innerText = 新内容

                        获取元素内部内容:

                                节点对象.innerHTML

                                节点对象.innerText

                jq :

                        设置元素内部内容:

                                jq对象.html(新内容)

                                jq对象.text(新内容)

                        获取元素的内部内容

                                jq对象.html()

                                jq对象.text()

                        传参表示设置 不传参表示获取   

                        这两个方法的区别 跟原生js的两个属性区别相同

                补充 :   jq对象.html("")   表示清空元素呦 ! ! !

        值的操作: 

                表单控件的jq对象.val()方法

                不传参数表示获取表单的value内容   传入参数表示设置表单的value

                输入框输入的内容就是value属性

        

07 jq中宽高的操作

        jq中width和height方法  能够获取和设置元素的宽高             

        获取时只获取元素设置的宽高 (不包括 padding 和 border )   

08 jq中坐标的操作

        jq关于坐标的操作:

                offset() 

                        能够获取和设置当前元素距离body的偏移 

                        返回值是一个对象{ left:数值,top:数值}

                        包括两个属性 left  top

                        设置时  传入的值也许是一个对象 包括left和top值

                        不管父系盒子有没有定位 都是获取距离body的偏移  设置时 也是按照body确定位置

                  复习原生js的offset属性:

                        元素.offsetLeft/Top

                                距离最近的有定位的父盒子的距离

                                如果父盒子都没有定位 则距离body      

                position( ) (该方法只能获取 不能设置)

                        获取元素的偏移值 返回值是一个对象 包括left和top

                        获取距离最近的有定位的父盒子的偏移

                        如果父盒子都没有定位 则是距离body的偏移

                scrollLeft()

                scrollTop()

                        这两个属性能获取浏览器被卷去的头部和左侧的距离

                        使用html调用

                        还可以传入参数  设置浏览器手动卷去多少