JavaScript 进阶-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43125439/article/details/83864906

DOM操作

DOM，Document Object Model，文档对象模型
将HTML中的元素当做JS中的对象进行操作，称为DOM操作
window对象表示浏览器中打开的窗口，document对象整个文档
DOM操作核心：找到对象、添加事件、修改属性、…
在JS中样式的名字采用的是小驼峰的命名对方，如：backgroundColor
console.log可以将数据输出到控制台，不会影响页面内容

查找元素

getElementById：根据ID，获取的是一个元素
getElementsByClassName：根据class属性查找元素，返回的是数组
getElementsByTagName：根据标签名查找元素，返回的是数组
getElementsByName：根据name属性查找元素，返回的是数组

JS事件

onclick：单击
ondblclick：双击
onfocus：获取焦点
onblur：失去焦点
onmouseover：鼠标移入
onmouseout：鼠标移出

效果

选项卡

定时器

说明：所谓定时器就是在指定的时间做指定的事情
分类：
- 一次性定时器：设置一个时间，时间一到，做指定的事情，之后就销毁了
  - 设置：var timer = setTimeout(函数, 时间)，时间单位是毫秒
  - 清除：clearTimeout(timer)
- 周期性定时器：设置一个时间间隔，时间一到，做指定的事情，然后重新计时
  - 设置：var timer = setInterval(函数, 时间)
  - 清除：clearInterval(timer)

获取样式

兼容获取方式

// 找到对象
var oDiv = document.getElementsByTagName('div')[0]
// 这种方式只能获取行内样式
//alert(oDiv.style.width)
// 低级浏览器
// alert(oDiv.currentStyle['width'])
// 高级浏览器
// alert(getComputedStyle(oDiv, null)['width'])

alert(getStyle(oDiv, 'width'))

// 封装兼容获取样式的方法
function getStyle(obj, attr)
{
    if (typeof(obj.currentStyle) == 'undefined') {
    	return getComputedStyle(obj, null)[attr]
    } else {
    	return obj.currentStyle[attr]
    }
}

window对象

事件：
- onload：页面加载完成(包括资源)
- onscroll：页面滚动
- onresize：窗口尺寸发生改变
属性：
- innerWidth：宽度，innerHeight：高度；包括滚动条
- document：文档对象
  - document.documentElement.clientWidth：净宽度
  - document.documentElement.clientHeight：净高度
  - document.documentElement.scrollTop：向上滚动的距离
  - document.documentElement.scrollLeft：向左滚动的距离
  - 说明：以上是H5标准的获取方式，非H5标准需将documentElement改为body

效果展示

飘舞的小球
- 完善：当鼠标放到小球上停止飘舞，离开后继续飘

查找元素

示例：

var wtms = document.getElementById('wtms')
// 上一个同胞元素
var prev = wtms.previousElementSibling || wtms.previousSibling
// 下一个同胞元素
var next = wtms.nextElementSibling || wtms.nextSibling
// 父级元素
var parent = wtms.parentNode
// 获取第一个子元素
var first = parent.firstElementChild || parent.firstChild
// 获取最后一个子元素
var last = parent.lastElementChild || parent.lastChild

// 在文档数中连续查找
var uncle = wtms.parentNode.nextElementSibling
alert(uncle.innerText)

练习：

写一个选项卡
- 滑动可以切换
- 光标移入停止自动切换
- 光标移出开始自动切换
- 快速划过不切换

创建与删除

创建元素：var div = document.createElement('div')
添加元素：div.appendChild(input)
删除元素：grand.removeChild(parent)

事件冒泡

说明：当下层元素和上层元素支持同一事件，当上层事件触发时，下层事件也触发，这就叫事件冒泡。
取消事件冒泡：ev.cancelBubble = true

事件绑定

说明：一个事件触发时，想要同时调用多个处理函数；直接设置后面的覆盖前面的，可以通过事件绑定解决。

示例：

// 兼容绑定事件
function addBind(obj, ev, func)
{
    if (obj.addEventListener) {
        // 高级浏览器
        obj.addEventListener(ev, func, false)
    } else {
        // 低级浏览器
        obj.attachEvent('on'+ev, func)
    }
}
// 兼容取消绑定
function delBind(obj, ev, func)
{
    if (obj.removeEventListener) {
        obj.removeEventListener(ev, func, false)
    } else {
      	obj.detachEvent('on'+ev, func)
    }
}

事件源元素

说明：就是根据事件获取事件发生的元素，也就是该事件发生在哪个元素上。

示例：

function change(e)
{
    var ev = e || event
    // 根据事件获取发生的元素
    var obj = ev.srcElement
    // 修改样式
    obj.style.background = 'green'
}

点击位置

说明：点击事件触发时，鼠标距离窗口的偏移位置

示例：

function dian(e)
{
    var ev = e || event
    // 点击位置在窗口的坐标
    console.log(ev.clientX + 'x' + ev.clientY)
}

键盘事件

onkeydown：键盘按下事件

按键的ASCII：ev.keyCode
是否按下了特定的组合按钮

if (ev.altKey == true) {
	console.log('您按下了alt键')
} else if (ev.ctrlKey == true) {
	console.log('您按下了ctrl键')
} else if (ev.shiftKey == true) {
	console.log('您按下了shift键')
}

禁用右键

示例：

document.oncontextmenu = function () {
    // 返回false时即可禁用右键，菜单不会显示
    return false
}

控制跳转

说明：a标签的onclick事件的返回值可以决定是否跳转，返回true可以跳转，返回false不可以跳转

示例：

<a href="http://www.baidu.com" onclick="return tiao();">百度一下</a>

<script>
    function tiao()
    {
        // 逻辑处理
        // 返回false就无法跳转
        return false
    }
</script>

各种弹出框

alert：警告框
confirm：确认框
prompt：输入框

BOM操作

说明：将浏览器当做对象(window)一样进行操作，称为BOM操作
使用：
- open：打开新页面
- close：关闭使用JS创建的窗口
- history：历史记录调准啊
  - back：向后跳转一个页面
  - go：可以指定跳转，正数向前跳，负数向后跳
- location:
  - href：指定当前窗口的url，修改它可以直接实现页面跳转