JavaScript学习Day25笔记

Day25笔记

一、jQuery对象和DOM对象转换

jQuery对象 => DOM对象

const domEle = $(selector)[i]
const domEle = $(selector).get[i]

DOM对象 => jQuery对象

const domEle = document.querSelector(selector)
$(domEle)

二、jQuery操作元素尺寸/位置

元素尺寸

// 获取元素 content 尺寸
$(selector).width()
$(selector).height()
// 获取 content+padding 尺寸
$(selector).innerWidth()
$(selector).innerHeight()
// 获取 content+padding+border 尺寸
$(selector).outWidth()
$(selector).outHeight()
// 获取 content+padding+border+margin
$(selector).outWidth(true)
$(selector).outHeight(true)

元素位置

$(selector).offset()
// 获取元素相对整个文档页面的坐标
$(selector).offset({
    top:number,
    left:number
})
// 设置元素相对整个文档页面的坐标
$(selector).position()
// 获取元素定位关系的相对坐标
// position只能获取数据，不能设置
$(selector).css({
    top:number,
    lsft:number
})
// 可以通过CSS样式来设置元素定位关系的相对坐标

滚动条位置

$(document).scrollTop()
// 获取滚动条距离网页顶部的距离
$(document).scrollLeft()
// 获取滚动条距离网页左侧的距离

三、jQuery动画效果

放大/缩小动画效果

// 放大并显示元素
$(selector).show(time,callback)
// 缩小并隐藏元素
$(selector).hide(time,callback)
// 切换显示隐藏状态
$(selector).toggle(time,callback)

// time  =>  动画时长，单位毫秒 || slow/fast
// callback  =>  回调函数名，在动画执行完成后自动执行该函数

淡入/淡出动画效果

// 淡入显示元素
$(selector).fadeIn(time,callback)
// 淡出隐藏元素
$(selector).fadeOut(time,callback)
// 切换显示隐藏状态
$(selector).fadeToggle(time,callback)

// time  =>  动画时长，单位毫秒 || slow/fast
// callback  =>  回调函数名，在动画执行完成后自动执行该函数

滑动动画效果

// 下滑显示元素
$(selector).slideDown(time,callback)
// 上滑隐藏元素
$(selector).slideUp(time,callback)
// 切换显示隐藏状态
$(selector).slideToggle(time,callback)

// time  =>  动画时长，单位毫秒 || slow/fast
// callback  =>  回调函数名，在动画执行完成后自动执行该函数

animate()方法

$(selector).animate({params},time,callback)
// {params}  =>  需要改变的CSS属性
// time  =>  动画时长，单位毫秒 || slow/fast
// callback  =>  回调函数名，在动画执行完成后自动执行该函数

四、ifarme标签

定义

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

语法

<iframe src="" frameborder="" width="" height="" name="" scrolling="" ></iframe>

常用属性

属性名	属性值	说明
src	URL	框架中显示页面的地址
frameborder	1/0	是否显示框架边框
width	number	框架宽度
height	number	框架高度
name	名称	规定框架名称
scrolling	yes/no/auto	是否显示滚动条/根据页面尺寸自动显示滚动条

使用方法

<a href="URL" target="iframeName">打开iframe框架</a>
<iframe name="iframeName" width="number" height="number"></iframe> 

注：此时点击a链接，会在框架内打开URL网页。