目录
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调用
还可以传入参数 设置浏览器手动卷去多少
