关于HarmonyOS的学习

day23

一、DOM尺寸和位置

1.只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空 $('.box1').style.width $('.box1').style.height $'.box1').style.backgroundColor

2.返回了元素大小，但没有单位，默认单位是px，如果设置了其他的单位，比如100em之类，返回出来的结果还会转换为px像素（不含边框） width + padding值 $('.box2').clientWidth $('.box2').clientHeight

3.获取左边框和上边框的宽度 $('.box2').clientLeft $('.box2').clientTop

4.返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度, 包含盒模型中除margin以外的宽高（包含边框）最稳定，使用最频繁 $('.box3').offsetWidth $('.box3').offsetHeight

5.获取滚动内容的元素大小（当元素出现滚动条时，此属性指全部滚动内容的宽高）返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度整个内容的 $('.box4').scrollWidth $('.box4').scrollHeight

二、offset家族

offsetWidth 获取元素的宽度（width+padding+border） offsetHeight 获取元素的高度（width+padding+border） offsetLeft 获取元素距离容器素左边的距离（需要定位参照） offsetTop 获取元素距离容器素上边的距离（需要定位参照） offsetParent 获取父元素（需要定位参照）

三、鼠标事件

    // onclick：当用户单击鼠标按钮或按下回车键时触发$('button:nth-child(1)').onclick = function(){console.log('哈哈1')}
// ondblclick：当用户双击主鼠标按钮时触发 - 连续点击两次$('button:nth-child(2)').ondblclick = function(){console.log('哈哈2')}
// onmousedown：当用户按下了鼠标还未弹起时触发 - 弹窗测试最明显// $('div').onmousedown = function(){//     console.log('张涛按下了')// }
// onmouseup：当用户释放鼠标按钮时触发 - 鼠标抬起// $('div').onmouseup = function(){//     console.log('张涛抬起了')// }
var box = $('div')// 注意点：onmouseleave要求必须离开事件源标记才能触发box.onmouseleave = function(){console.log('离开')}
// box.onmouseout = function(){//     console.log('离开2')// }
// onmouseenter 当鼠标指针移动到元素上时触发box.onmouseover = function(){console.log('移入')}
// onmouseover：当鼠标移到某个元素上方时触发  
// onmouseout：当鼠标移出某个元素上方时触发  
// onmousemove：当鼠标指针在元素上移动时触发

四、getComputedStyle

获取各种样式，参数1表示要获取那个元素的样式，参数2表示伪对象，方法后面点上属性 var box = $('div') // console.log(getComputedStyle(box, null).width) // console.log(getComputedStyle(box).height) // console.log(getComputedStyle(box).backgroundColor) // console.log(getComputedStyle(box).left) // console.log(getComputedStyle(box).fontSize)

    // console.log(getComputedStyle(box, 'after').width)
function getStyle(ele, attr){return getComputedStyle(ele)[attr]}console.log(getStyle(box, 'width'))

五、html事件

        浏览器的默认行为：+ 表单提交、a超链接跳转、选中文字的行为、右键菜单等等都属于浏览器的默认行为+ 阻止浏览器默认行为：=> return false 常用（推荐）=> e.preventDefault() 除了IE浏览器以外其他浏览器使用的（标准浏览器）=> e.returnValue = false IE浏览器使用的，其他的浏览器使用不了

    onselectstart：主要是用于禁止用户选中网页中的文字的默认行为onselectstart = function(e){// return false（常用）// e.preventDefault()// e.returnValue = false}

    oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单oncontextmenu = function(){return false}

六、表单事件

    // onselect：当用户选中文本框(input 或 textarea)中的一个或多个字符触发// $('input').onselect = function(){//     $('span').innerHTML = '选中内容了'// }
// onchange：当用户改变文本框(input 或 textarea)内容时且失去焦点后触发// $('input').onchange = function(){//     $('span').innerHTML = '你已经修改了数据'// }
// onfocus：当页面或者元素获得焦点时触发// $('input').onfocus = function(){//     $('span').innerHTML = '请输入内容'// }
// onblur：当页面或元素失去焦点时触发// $('input').onblur = function(){//     if(this.value.trim() === ''){//         $('span').innerHTML = '内容不能为空'//         return//     }//     if(this.value.trim().length >= 6 ){//         $('span').innerHTML = '字符长度在1-6位'//         return//     }//     $('span').innerHTML = '输入正确'// }
// onsubmit：当用户点击提交按钮在<form>元素上触发  
// oninput 事件在用户输入时触发$('input').oninput = function(){console.log(this.value)}

七、键盘事件

    // onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发  // onkeydown = function(){//     console.log('键盘按下了')// }
// onkeyup：当用户释放键盘上的键触发 - 当按键抬起时触发// onkeyup = function(){//     console.log('键盘抬起了')// }
// onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发  不能触发 例如：ALT, CTRL, SHIFT, ESC --- 不是字符键// onkeypress = function(){//     console.log('hello')// }
// 使文本框输入不了数字onkeydown = function(e){// e.keyCode 拿到键盘键对应的ASCII码// 数字键范围48 --- 57// console.log(e.keyCode)if(e.keyCode>=48 && e.keyCode<=57){return false}}

八、event.html

        event+ 用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event+ 事件对象只有事件才有，事件对象里面存储了很多好用的属性，可以帮助咱们完成一些需求+ 怎么使用事件对象？=> 需要在事件的事件处理函数里面传递一个形参，这个形参可以是任意名称，但是一般情况下为了语义化推荐大家使用event、e、ev等等+ 事件对象属性=> e.keyCode 获取键盘键对应的ASCII码=> e.clientX 获取鼠标的横坐标（x）=> e.clientY 获取鼠标的纵坐标（y）=> e.pageX 获取鼠标的横坐标（x）--- 包含浏览器网页向上卷去的位置=> e.pageY 获取鼠标的纵坐标（y）--- 包含浏览器网页向上卷去的位置=> e.offsetX 获取事件源距离自身左边的距离（横坐标）=> e.offsetY 获取事件源距离自身上边的距离（纵坐标）+ 兼容写法=> var e = e || window.event (IE)

如果形参没有传递进去，想要使用必须写完整，使用event

九、拖拽

    var son = $('.son')
// 当鼠标按下的时候进行拖拽 onmousedownson.onmousedown = function(e){// 获取鼠标坐标，需要绑定移动事件，因为移动事件可以连续获取 onmousemove/*问题1+ 当进行元素移动的时候，移动的不是那么丝滑，动不动会出现卡顿的情况+ 原因=> 移动事件是绑定给son元素的，只有鼠标在son元素里面才能获取鼠标坐标，才能进行赋值操作=> 当鼠标移动的快的时候，很容易鼠标移出son元素的范围，移出了范围当然获取不到鼠标坐标，元素在移动的过程中肯定不丝滑+ 解决方案=> 可以把移动事件绑定给其他的元素，这样可以扩大移动的范围问题2+ 当鼠标无论在son元素的任意位置按下时，最终移动的时候都会光标跑到左上位置+ 原因=> 当你鼠标按下的时候，获取鼠标坐标，赋值的时候元素默认都是从0的位置开始移动的，其实光标的位置没有改变，只是元素从左上位置变成赋值后的位置了，看起来鼠标的坐标变化了+ 解决方案=> 当鼠标按下的时候，先获取到当前鼠标在事件源中的位置=> 当元素进行移动的时候，从鼠标坐标上减去对应的offsetX和offsetY的值即可*/// son.onmousemove = function(e){//     var x = e.pageX//     var y = e.pageY//     son.style.left = x + 'px'//     son.style.top = y + 'px'// }var l = e.offsetXvar t = e.offsetYdocument.onmousemove = function(e){var x = e.pageX - lvar y = e.pageY - tson.style.left = x + 'px'son.style.top = y + 'px'}}// 当鼠标抬起的时候清除移动事件document.onmouseup = function(){document.onmousemove = null}