DOM

作者: pubalabala | 来源:发表于2018-08-22 17:20 被阅读0次

一

1. DOM操作

children 子节点儿子节点
parentNode 父节点
谷歌和火狐的方式
- firstElementChild 一胎
- lastElementChild 最后一胎
- previousElementSibling 上一个兄弟节点
- nextElementSibling 下一个兄弟节点
这是ie的方式
- firstChild
- lastChild
- previousSibling
- nextSibling
通过document可以动态的创建和删除节点
- tagName 获取对象标签的名字大写
- createElement 创建节点
- removeChild 父节点.removeChild(子节点)
- appendChild 添加节点
添加存在的节点，本质是移动节点
- nsertBefore 添加节点 insertBefore(new, old)
- setAttribute : 既可以设置官方属性，又可以设置自定义属性
- getAttribute : 既可以获取官方属性，也可以获取自定义属性
- 留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom</title>
</head>
<body>
    <div class="hero">
        <ul id="girl">
            <li>王昭君</li>
            <li>杨玉环</li>
            <li>妲己</li>
            <li id="can">貂蝉</li>
            <li id="qiao">大乔</li>
        </ul>
        <ol>
            <li>李白</li>
            <li>赵云</li>
            <li>狄仁杰</li>
            <li>诸葛亮</li>
        </ol>
    </div>
    <div class="san">
        <ul>
            <li>关羽</li>
            <li>张飞</li>
            <li>赵云</li>
            <li>马超</li>
            <li>黄忠</li>
        </ul>
        <ol>
            <li>典韦</li>
            <li>许褚</li>
            <li>徐晃</li>
            <li>张辽</li>
            <li>夏侯惇</li>
        </ol>
    </div>
</body>
</html>
<script>
    // var odiv = document.getElementsByClassName('hero')[0]
    // console.log(odiv.children)

    // var oqiao = document.getElementById('qiao')
    // console.log(oqiao.parentNode)

    var ocan = document.getElementById('can')

    console.log(ocan.parentNode.parentNode.nextElementSibling.firstElementChild.lastElementChild.tagName)
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作</title>
</head>
<body>
    <ul id="girlstar">
        <li>柳岩</li>
        <li>高圆圆</li>
        <li id="rong">马蓉蓉</li>
    </ul>
    <ul id="women">
        <li>韩红</li>
        <li id="feng">凤姐</li>
        <li>芙蓉姐</li>
    </ul>
    <button id="btn" like="篮球">点我</button>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
var oul = document.getElementById('girlstar')
var owu = document.getElementById('women')

obtn.onclick = function () {
    // obtn.look = 'goudan'
    obtn.setAttribute('look', 'goudan')
    // console.log(obtn.like)
    // console.log(obtn.getAttribute('like'))
    // var oli = document.createElement('li')
    // oli.innerHTML = '柳岩'
    // oli.className = 'yan'
    // 动态添加节点
    // oul.appendChild(oli)
    // var ofeng = document.getElementById('feng')
    // var orong = document.getElementById('rong')
    // oul.appendChild(ofeng)
    // owu.removeChild(ofeng)

    // oul.insertBefore(ofeng, orong)
}

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>留言板</title>
</head>
<body>
    <input id="ip" type="text">
    <input id="btn" type="button" value="留言">
    <ul id="content"></ul>
</body>
</html>
<script>
var oinput = document.getElementById('ip')
var obtn = document.getElementById('btn')
var oul = document.getElementById('content')

// console.log(oul.children)

obtn.onclick = function () {
    // 获取input框的值
    content = oinput.value
    // 创建一个li标签
    var oli = document.createElement('li')
    // 不仅添加内容，还添加删除功能
    oli.innerHTML = content + '&nbsp;&nbsp;<a href="javascript:;">删除</a>'
    // 实现点击删除，删除li的功能
    var oa = oli.getElementsByTagName('a')[0]
    oa.onclick = function () {
        oul.removeChild(oli)
    }

    // 添加的时候，放到最前面
    // 获取ul的第一个子标签,通过判断ul的子标签是否为空
    if (oul.children) {
        // 非空
        oul.insertBefore(oli, oul.children[0])
    } else {
        // 空
        oul.appendChild(oli)
    }
    // 将input框清空
    oinput.value = ''
    // 让input框获得焦点
    oinput.focus()
}

// 普通留言板
/*
obtn.onclick = function () {
    // 获取input框的值
    content = oinput.value
    // 创建一个li标签
    var oli = document.createElement('li')
    oli.innerHTML = content
    // 将li标签添加到ul里面
    // oul.appendChild(oli)
} */
</script>

2. 事件绑定和事件冒泡

addEventListener 谷歌和火狐方式
removeEventListener
attachEvent ie方式
detachEvent
获取事件对象
- 事件ev 火狐、谷歌
- window.event ie、谷歌
- 兼容性写法： var oevent = ev || event
获取事件的x和y坐标
- oevent.clientX oevent.clientY
- 相对窗口左上角的坐标
取消事件冒泡
- 事件的属性和方法
  - cancelBubble ie方式、谷歌、火狐都支持
  - stopPropagation() 谷歌、火狐方式
事件源对象
- srcElement ie、谷歌
- target 火狐、谷歌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定</title>
</head>
<body>
    <div id="lala" style="width:300px; height:300px; background-color:#c90"></div>
</body>
</html>
<script>
var odiv = document.getElementById('lala')

// odiv.addEventListener('click', function () {
//     alert('羌笛何须怨杨柳,春风不度玉门关')
// })
// odiv.addEventListener('click', function () {
//     alert('劝君更尽一杯酒,西出阳关无故人')
// })

// odiv.attachEvent('onclick', function () {
//     alert('君不见黄河之水天上来')
// })
// odiv.attachEvent('onclick', function () {
//     alert('奔流到海不复回')
// })

// odiv.onclick = function () {
//     alert('羌笛何须怨杨柳,春风不度玉门关')
// }
// odiv.onclick = function () {
//     alert('劝君更尽一杯酒,西出阳关无故人')
// }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取事件对象</title>
</head>
<body>
    <div id="dudu" style="width:400px; height:400px; background-color:firebrick"></div>
</body>
</html>
<script>
    var odiv = document.getElementById('dudu')

    odiv.onclick = function (ev) {
        // console.log(ev)
        // alert(ev)
        var oevent = ev || event
        // alert(oevent)
        console.log(oevent.clientX, oevent.clientY)
    }

    // function test(ev) {
    //     alert(ev)
    // }
    // odiv.onclick = test

    // a = 10
    // b = 200

    // var c = a && b
    // console.log(c)
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件冒泡</title>
</head>
<body>
    <div id="wai" style="width:400px; height:400px; background-color:pink;">
        <div id="nei" style="width:200px; height:200px; background-color:black;"></div>
    </div>
</body>
</html>
<script>
var owai = document.getElementById('wai')
var onei = document.getElementById('nei')

owai.onclick = function () {
    alert('寻寻觅觅,冷冷清清,凄凄惨惨戚戚')
}
onei.onclick = function (ev) {
    alert('乍暖还寒时候,最难将息,三杯两盏淡酒')
    var oevent = ev || event
    // oevent.cancelBubble = true
    oevent.stopPropagation()

    console.log(oevent.target)
}
</script>

3. 小知识

禁止鼠标右键
document.oncontextmenu = function () {
return false
}
超链接和事件同时触发
- 事件的属性和方法
  - returnValue ie、谷歌
  - preventDefault() 火狐、谷歌
  - return false ie、谷歌、火狐
键盘事件
- document.onkeydown : 捕获用户点击的按钮
- 获取按钮的编号:oevent.keyCode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小知识</title>
</head>
<body>
    <a id="du" href="http://www.baidu.com/">百度一下</a>
</body>
</html>
<script>
    // document.onkeydown = function (ev) {
    //     var oevent = ev || event
    //     console.log(oevent.keyCode)
    // }
    document.onkeypress = function (ev) {
        var oevent = ev || event
        console.log(oevent.keyCode)
    }
    // var oa = document.getElementById('du')
    // oa.onclick = function (ev) {
    //     alert('这次第,怎一个愁字了得')
    //     var oevent = ev || event
    //     // oevent.returnValue = false
    //     // oevent.preventDefault()
    //     return false
    // }
// document.oncontextmenu = function () {
//     return false
// }
</script>

4. 正则对象

规则是一样的。
- 单字符：. \w \d \W \s \S \D [aoe]
- 数量： {m} {m,} {m,n} {0,}==* {1,}==+ {0,1}==?
match : 正则匹配
replace : 正则替换

5. 表单对象

三种查找方法
(1). 根据id获取
(2). document.forms 得到文档中所有的form
(3). 根据name获取
- document.formname
- 获取该表单里面input框的值，假如该input框name=user
- document.formname.user.value
submit()方法
- document.formname.submit() 谁都能提交
js验证表单内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form action="xxx" method="get" name="goudan">
        <input type="text" name="user" value="王狗蛋">
        <!-- <input type="submit" value="提交"> -->
        <a href="javascript:;" id="aa">登录</a>
    </form>
    <form action="" method="post"></form>
</body>
</html>
<script>
var oa = document.getElementById('aa')
oa.onclick = function () {
    document.goudan.submit()
}
// 第二种方式
// console.log(document.forms[1].method)
// console.log(document.goudan)
// console.log(document.goudan.user.value)
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js验证</title>
</head>
<body>
    <form action="" name="form">
        <input type="text" name="user" placeholder="请输入用户名">
        <span class="user"></span>
        <br><br>
        <input type="text" name="password" placeholder="请输入密码">
        <span class="pwd"></span>
        <br><br>
        <input type="text" name="email" placeholder="请输入邮箱">
        <span class="email"></span>
        <br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>
<script>
// 找到3个input
oname = document.form.user
opwd = document.form.password
oemail = document.form.email

oname.onblur = function () {
    var spanname = document.getElementsByClassName('user')[0]
    // 得到自己的值
    content = this.value
    // 用户名长度必须大于等于3位
    if (content.length < 3) {
        spanname.innerHTML = '用户名不合法'
        spanname.style.color = 'red'
    } else {
        spanname.innerHTML = '√'
        spanname.style.color = 'green'
    }
}

opwd.onblur = function () {
    var spanpwd = document.getElementsByClassName('pwd')[0]
    // 得到自己的值
    content = this.value
    // 用户名长度必须大于等于3位
    if (content.length < 6) {
        spanpwd.innerHTML = '密码长度不够'
        spanpwd.style.color = 'red'
    } else {
        spanpwd.innerHTML = '√'
        spanpwd.style.color = 'green'
    }
}

oemail.onblur = function () {
    var spanemail = document.getElementsByClassName('email')[0]
    content = this.value
    // test@163.com   lala@sina.cn  1090@qq.com
    re = /^\w+@\w+\.(com|cn)$/
    if (!content.match(re)) {
        spanemail.innerHTML = '邮箱格式不正确'
        spanemail.style.color = 'red' 
    } else {
        spanemail.innerHTML = '√'
        spanemail.style.color = 'green'
    }
}
</script>

practice

下拉框实现左边移动选项到右边，右边移动选项到左边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left{
            height: 100px;
            float: left;
        }
        .right{
            height: 100px;
            float: right;
        }

        select{
            font-size: 60px;
            height: 100%;
            position: relative;
            float:left;
        }
        button{
            font-size: 60px;
            height: 100%;
            position: relative;
            float: right;
            background-color: red;
        }
        
    </style>
</head>
<body>
    <div class="left">
        <select name="" id="left">
            <option value="">一弦</option>
            <option value="">二弦</option>
            <option value="">三弦</option>
            <option value="">四弦</option>
            <option value="">五弦</option>
            <option value="">六弦</option>
        </select>
        <button class="btn">去右边</button>
    </div>
    <div class="right">
        <select name="" id="right">
            <option value="">旋钮一</option>
            <option value="">旋钮二</option>
            <option value="">旋钮三</option>
            <option value="">旋钮四</option>
            <option value="">旋钮五</option>
            <option value="">旋钮六</option>
        </select>
        <button class="btn">去左边</button>
    </div>
</body>
</html>
<script>
    var left_div = document.getElementsByClassName("left")
    var right_div = document.getElementsByClassName("right")
    var btn = document.getElementsByClassName("btn")
    var leftsel = document.getElementById("left")
    var rightsel = document.getElementById("right")
    btn[0].onclick = function (){
        rightsel.appendChild(leftsel.options[leftsel.selectedIndex])
    }
    btn[1].onclick = function (){
        leftsel.appendChild(rightsel.options[rightsel.selectedIndex])
    }
</script>

飘动广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飘动广告</title>
    <style>
    div {
        position: fixed;
        top: 0px;
        left: 0px;
    }
    </style>
</head>
<body>
    <div id="girl">
        <img src="meinv.jpg" alt="" height="300" width="200">
    </div>
</body>
</html>
<script>
var odiv = document.getElementById('girl')
// 定义偏移量
var offset_top = 10
var offset_left = 10
// 兼容性写法获取非行内样式
function getStyle(obj, name) {
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}

// 获取可视区的宽度和高度
// 获取宽高的时候，要看有没有DTD的说明，如果有，使用documentElement，如果没有，使用body
var clientWidth = document.documentElement.clientWidth
var clientHeight = document.documentElement.clientHeight
// console.log(clientWidth, clientHeight)

setInterval(function () {
    // 动态的修改top和left值
    // 得到你的top和left值
    var top = parseInt(getStyle(odiv, 'top'))
    var left = parseInt(getStyle(odiv, 'left'))
    top += offset_top
    left += offset_left
    // 判断top或则left有没有到达边界
    if (top + 300 > clientHeight || top < 0) {
        offset_top = -offset_top
    }
    if (left + 200 > clientWidth || left < 0) {
        offset_left = -offset_left
    }

    // 再将修改后的值赋值过去
    odiv.style.top = top + 'px'
    odiv.style.left = left + 'px'
}, 5)
</script>

倒计时，距离国庆节还有多少天、小时、分钟、秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>倒计时</title>
</head>
<body>
    <h1 id="dao"></h1>
</body>
</html>
<script>
var odao = document.getElementById('dao')
// 获取国庆节的时间
var oqing = new Date('2018-8-23 10:16:00')
// 得到国庆节的时间戳
var oqingcuo = oqing.getTime()
var timer = null
function demo() {
    // 每次都要获取当前的时间对象
    var onow = new Date()
    // 得到当前的时间戳
    var onowcuo = onow.getTime()
    if (oqingcuo <= onowcuo) {
        clearInterval(timer)
    }
    // 得到两个时间戳的差值
    var dist = (oqingcuo - onowcuo) / 1000
    // 将这个差值你要给我计算出来有多少天、多少小时、多少分钟、多少秒
    // 首先计算天数   3600*24=86400  90000
    var day = parseInt(dist / 86400)
    // 计算除了天之后剩下的时间
    dist = dist % 86400
    // 计算小时
    var hour = parseInt(dist / 3600)
    dist = dist % 3600
    // 计算分钟
    var minute = parseInt(dist / 60)
    dist = dist % 60
    var second = parseInt(dist)
    odao.innerHTML = '距离下课还有===' + day + '天' + hour + '小时' + minute + '分钟' + second + '秒'
}
timer = setInterval(demo, 1000)
</script>

实现全选、全不选、反选
obj.checked = true 选中
obj.checked = false 取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选</title>
</head>
<body>
    <li><input type="checkbox">梅西</li>
    <li><input type="checkbox">c罗</li>
    <li><input type="checkbox">内马尔</li>
    <li><input type="checkbox">李哥</li>
    <li><input type="checkbox">詹姆斯</li>
    <li><input type="checkbox">罗纳尔多</li>
    <li><input type="checkbox">库里</li>
    <li><input type="checkbox">乔治</li>
    <li><input type="checkbox">维斯布鲁克</li>
    <li><input type="checkbox">爱新觉罗姚明</li>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>
</body>
</html>
<script>
var ainputs = document.getElementsByTagName('input')
var abtns = document.getElementsByTagName('button')
abtns[0].onclick = function () {
    // 遍历所有的input，将每一个input的checked属性设置为true
    for (var i = 0; i < ainputs.length; i++) {
        ainputs[i].checked = true
    }
}

abtns[1].onclick = function () {
    // 遍历所有的input，将每一个input的checked属性设置为true
    for (var i = 0; i < ainputs.length; i++) {
        ainputs[i].checked = false
    }
}

abtns[2].onclick = function () {
    // 遍历所有的input，将每一个input的checked属性设置为true或者false
    for (var i = 0; i < ainputs.length; i++) {
        ainputs[i].checked = !ainputs[i].checked
        // if (ainputs[i].checked) {
        //     ainputs[i].checked = false
        // } else {
        //     ainputs[i].checked = true
        // }
    }
}
</script>

按住div可以实现div跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跟随鼠标移动</title>

</head>
<body>
    <!-- <div id="girl" style="position: absolute; top: 0px; left: 0px; background-color: red; width: 300px; height: 300px;"> -->
    <div id="girl" style="position: absolute; top: 0px; left: 0px;">
        <img src="meinv.jpg" alt="" height="300" width="200">
    </div>
</body>
</html>
<script>
var odiv = document.getElementById('girl')
odiv.onmousedown = function (ev) {
    var oevent = ev || event
    // 首先得到图片的左边距和上边距
    var divleft = parseInt(odiv.style.left)
    var divtop = parseInt(odiv.style.top)

    // console.log(divleft, divtop)
    // 在这获取鼠标点击的时候，左边的间距和上边的间距
    var offsettop = oevent.clientY - divtop
    var offsetleft = oevent.clientX - divleft
    // console.log(offsettop, offsetleft)

    document.onmousemove = function (ev) {
        var oe = ev || event
        console.log(ev.clientX, ev.clientY)
        // 修改div的top和left值
        odiv.style.top = (oe.clientY - offsettop) + 'px'
        odiv.style.left = (oe.clientX - offsetleft) + 'px'
    }
    return false
}

odiv.onmouseup = function () {
    document.onmousemove = null
}


</script>

二

获取可视区的宽度和高度

// 获取宽高的时候，要看有没有DTD的说明，如果有，使用documentElement，如果没有，使用body

var clientWidth = document.documentElement.clientWidth
var clientHeight = document.documentElement.clientHeight

1. 吸顶条

可以直接获取到div的宽度和高度，而且是不带px，并且样式无论在哪都可以获取到，这两个属性是只读属性

offsetWidth
offsetHeight
可以直接获取到div的距离浏览器上边的距离和距离浏览器左边的距离，而且是不带px，并且样式无论在哪都可以获取到，这两个属性是只读属性
offsetTop
offsetLeft

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>offset属性</title>
    <style>
    div {
        width: 400px;
        height: 500px;
        background-color: cyan;
        position: absolute;
        top: 100px;
        left: 200px;
    }
    </style>
</head>
<body>
    <div id="dudu"></div>
</body>
</html>
<script>
var odiv = document.getElementById('dudu')
// 可以直接获取到div的宽度和高度，而且是不带px， 并且样式无论在哪都可以获取到，这两个属性是只读属性
// console.log(odiv.offsetWidth, odiv.offsetHeight)
// 可以直接获取到div的距离浏览器上边的距离和距离浏览器左边的距离，而且是不带px， 并且样式无论在哪都可以获取到，这两个属性是只读属性
console.log(odiv.offsetTop, odiv.offsetLeft)
</script>

2. 自动播放选项卡

见代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自动播放选项卡</title>
    <style>
        .box {
            width: 1000px;
            border: 1px solid gray;
            margin: 0 auto;
        }
        button {
            width: 170px;
            height: 100px;
            font-size: 20px;
            background-color: pink;
            margin-left: 55px;
            display: inline-block;
        }
        .box > div {
            width: 970px;
            height: 600px;
            font-size: 50px;
            background-color: yellow;
            margin-left: 15px;
            margin-top: 50px;
            display: none;
        }
        .box > .active {
            font-size: 30px;
            background-color: blue;
        }
        .box > .show {
            display: block;
        }
        </style>
</head>
<body>
    <div class="box">
        <button class="active">国产电影</button>
        <button>韩日电影</button>
        <button>欧美电影</button>
        <button>其他电影</button>
        <div class="show">霸王别姬、卧虎藏龙、大话西游、东邪西毒、无间道、功夫</div>
        <div>釜山行、汉江怪物、奥特曼、灌篮高手、热血高校、午夜凶铃</div>
        <div>肖申克的救赎、阿甘正传、敢死队、泰坦尼克号、这个杀手不太冷、盗梦空间</div>
        <div>三傻大闹宝莱坞、摔跤吧、小萝莉的猴神大叔、厕所英雄</div>
    </div>
</body>
</html>
<script>
// 首先找到最外层的box
var obox = document.getElementsByClassName('box')[0]
// 找到所有的button
var abtns = obox.getElementsByTagName('button')
// 找到所有的div
var adivs = obox.getElementsByTagName('div')

// 记录要切换的div获取按钮的下标
var number = 0

// 循环给每一个button添加点击事件
for (var i = 0; i < abtns.length; i++) {
    abtns[i].index = i
    abtns[i].onclick = function () {
        // 首先清空所有的class
        for (var j = 0; j < abtns.length; j++) {
            abtns[j].className = ''
            adivs[j].className = ''
        }
        // 然后给指定的添加class
        this.className = 'active'
        adivs[this.index].className = 'show'
        // 将number更新一下
        number = this.index
    }
}



// 自动播放代码
function next() {
    // 显示下一个需要显示的button和div
    number++
    number %= 4
    // 先清掉所有的样式
    for (var j = 0; j < abtns.length; j++) {
        abtns[j].className = ''
        adivs[j].className = ''
    }
    abtns[number].className = 'active'
    adivs[number].className = 'show'
}
var timer = setInterval(next, 1000)

// 如果鼠标放到box上面，将定时器销毁，鼠标离开box的时候，重新创建定时器自动播放
obox.onmouseover = function () {
    clearInterval(timer)
}
obox.onmouseout = function () {
    timer = setInterval(next, 1000)
}
</script>

3. jquery

jquery是什么？
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery是一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并且具有在多个浏览器之间工作的易于使用的API。结合了通用性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。
版本要求：看版本.txt
压缩和非压缩
- .min.js : 压缩版本，一行代码，没有了空格、缩进等
  .js : 非压缩版本，正常的代码查看
- 使用方式
  - 可以本地使用
    <script src="jquery/jquery-1.11.3.min.js"></script>
  - 可以引入网络文件使用
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
选择器
- jquery通过选择器就可以找到指定的节点
  id、class、标签、层级
  - 基本
    :first 第一个
    :last 最后一个
    :even 偶数下标
    :odd 奇数下标
    :eq() 等于哪个下标
    :gt() 大于哪个下标
    :lt() 小于哪个下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div id="lala">周杰伦</div>
    <div class="star">王力宏</div>
    <div class="star">林俊杰</div>
    <div class="song">
        <div class="wang">
            <ul>
                <li>王宝强</li>
                <li>王者荣耀</li>
                <li>王八蛋</li>
            </ul>
        </div>
        <div class="ma">
            <ul>
                <li>马云</li>
                <li>马蓉</li>
                <li>马化腾</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
$(function () {
    // jquery代码都写到这里
    // $('#lala').css('backgroundColor', 'red')
    // $('.star').css('backgroundColor', 'yellow')
    // $('li').css('backgroundColor', 'blue')
    // $('.song > li').css('backgroundColor', 'cyan')

    // 第一个
    // $('li:first').css('backgroundColor', 'cyan')
    // 最后一个
    // $('li:last').css('backgroundColor', 'cyan')
    // 偶数下标的
    // $('li:even').css('backgroundColor', 'cyan')
    // 奇数下标的
    // $('li:odd').css('backgroundColor', 'cyan')
    // 等于1的
    // $('li:eq(1)').css('backgroundColor', 'cyan')
    // 大于2的
    // $('li:gt(2)').css('backgroundColor', 'cyan')
    // 小于2的
    // $('li:lt(2)').css('backgroundColor', 'cyan')
})
</script>

practice

图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
    <script src="../jquery/jquery-1.11.3.min.js"></script>
    <style>
        td, img {
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <table border="1" id="table">
        <tr>
            <td><img onclick="fun(this)" src="images/11.jpg"/></td>
            <td><img onclick="fun(this)" src="images/22.jpg"/></td>
            <td><img onclick="fun(this)" src="images/33.jpg"/></td>
            </tr>
    </table>
    <img src="images/11.jpg" id="showImg"/>
</body>
</html>
<script>
    console.log($("#table img"))
    function fun(omg){
        $("#showImg").attr("src",omg.src)
    }
</script>

快速划过没有反应

简易年历

三

1. 选择器

基本
:first :last :even :odd :not :eq()
内容

        contains  内容包含某某某的节点
        has 写一个选择器，
        $('li:has(a)')  li里面有a的li

属性

        input[name]       有属性name的input
        input[name=user]  name属性等于user的input
        input[name!=user] name属性不等于user的input
        // 有属性name的input
        // $('input[name]').css('backgroundColor', 'cyan')
        // 属性name值为user的input
        // $('input[name=user]').css('backgroundColor', 'cyan')
        // 属性name值不为user的input
        // $('input[name!=user]').css('backgroundColor', 'cyan')
        // 属性name值以user开头的input
        // $('input[name^=user]').css('backgroundColor', 'cyan')
        // 属性name值以user结束的input
        // $('input[name$=user]').css('backgroundColor', 'cyan')

子元素
:first-child
:last-child
:nth-child

        // 找到li标签，li是第一个儿子节点的li标签
        // $('li:first-child').css('backgroundColor', 'cyan')
        // 找到li标签，li是最后一个儿子节点的li标签
        // $('li:last-child').css('backgroundColor', 'cyan')
        // 找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个
        // $('li:nth-child(1)').css('backgroundColor', 'cyan')

2. 样式添加、属性获取

css({})

        // 可以连写-链式操作
        // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
        // 可以传递一个js对象，直接全部修改
        // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})

attr()

        // 获取指定节点的class属性
        // console.log($('#lala').attr('class'))
        // 只能获取第一个符合要求的id属性
        // console.log($('.libai').attr('id'))
        // 通过eq选择第二个符合要求的id属性
        // console.log($('.libai:eq(1)').attr('id'))
        // 给指定节点添加属性
        // $('#lala').attr('class', 'bai').attr('name', '狗蛋')

removeAttr()

        // 将指定节点的属性删除
        // $('#lala').removeAttr('class')

prop()
经常用来设置checked、selected等属性，设置的值就是true、false

        // 所有下标大于1的多选框选中
        // $('input:gt(1)').prop('checked', true)
        // 将第二个下拉框设置为默认选中
        // $('#se > option:eq(2)').prop('selected', true)

addClass

        // $('#lala').addClass('hei')

removeClass

        // 给指定的节点添加类名
        // $('#lala').addClass('hei')
        // 给指定的节点移除指定的节点class名  bai
        // $('#lala').removeClass('bai')

toggleClass

        // 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
        // $('#lala').toggleClass('bai')

html()

        // 读取或者设置节点内容，和innerHTML功能相同
        // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))

text()
读取或者设置节点内容，和innerText功能相同
val()

        // 读取input框里面的内容
        // console.log($('#ip').val())
        // 设置input框里面的内容
        // console.log($('#ip').val('今天中午吃什么呢？'))

width() , height()

        // 读取指定对象宽度  不带px
        // console.log($('#dudu').width())
        // 设置宽度  不带px
        // console.log($('#dudu').width(300))
        // 读取高度
        // console.log($('#dudu').height())
        // 设置高度
        // console.log($('#dudu').height(400))

offset()

        // 获取div的top值和left值
        // console.log($('#dudu').offset().top, $('#dudu').offset().left)

3. js对象和jquery对象转化

js对象和jquery对象的函数不能通用
js对象和jquery对象相互转化

    // var odiv = document.getElementById('dudu')
    // js对象转化jquery对象
    // console.log($(odiv).width())

    // jquery对象转化为js对象
    // console.log($('#dudu')[0].style.width)

    // console.log($('.lala')[1].style.width)

4. 文档处理

append
appendTo
prepend
prependTo

        // 向父节点添加子节点
        // $('#car').append('<li>本田飞度</li>')
        // 通过子节点调用，添加到父节点
        // $('<li>本田飞度</li>').appendTo($('#car'))
        // 通过父节点调用，添加到父节点的最前面
        // $('#car').prepend('<li>本田飞度</li>')
        // 通过子节点调用，添加到父节点的最前面
        // $('<li>通用别克</li>').prependTo($('#car'))

after
before

        // 是兄弟节点关系，在mao节点后面添加一个指定节点
        // $('#mao').after('<li>铃木雨燕</li>')
        // 是兄弟节点关系，在mao节点前面添加一个指定节点
        // $('#mao').before('<li>铃木雨燕</li>')

empty
remove

        // 清空指定节点里面的内容，节点还在
        // $('#mao').empty()
        // 原生js中：父节点.removeChild(子节点)
        // 通过子节点直接调用，删除当前节点
        // $('#mao').remove()

5. 筛选和查找

        // $('li').eq(n).css('backgroundColor', 'red')
        // $('li:eq(0)').css('backgroundColor', 'red')
        // $('li:eq(' + 0 + ')').css('backgroundColor', 'red')

first
last

        // 第一个li   和:first 一模一样
        // $('li').first().css('backgroundColor', 'red')
        // 最后一个li   和:last 一模一样
        // $('li').last().css('backgroundColor', 'red')

hasClass

        // 判断有没有这个class,有就返回true，没有返回false
        // console.log($('li').eq(0).hasClass('wang'))

filter

        // 找到所有li，过滤出来 .jing 的这些li
        // $('li').filter('.jing').css('backgroundColor', 'cyan')

slice

        // 取出符合要求li里面的第0个和第1个   [start, end)
        // $('li').slice(0, 2).css('backgroundColor', 'cyan')

children

        // 所有的儿子节点
        // $('#nan').children().css('backgroundColor', 'red')
        // 儿子节点中 有 .feng 的节点
        // $('#nan').children('.feng').css('backgroundColor', 'red')

find

        // 去子孙节点中查找所有的 .feng 的节点
        // $('#nan').find('.feng').css('backgroundColor', 'cyan')

next
nextAll

        // 指定对象的下一个兄弟节点
        // $('#wu').next().css('backgroundColor', 'cyan')
        // 指定对象的后面所有的节点
        // $('#wu').nextAll().css('backgroundColor', 'cyan')

prev 指定对象的上一个兄弟节点
prevAll 指定对象的上面所有的兄弟节点
parent
parents

        // 找到当前节点的父节点
        // $('.lin').parent().css('backgroundColor', 'cyan')
        // 查找得到所有的上层节点
        // $('#qing').parents().css('backgroundColor', 'cyan')
        // 查找得到指定的上层节点
        // $('#qing').parents('div').css('backgroundColor', 'cyan')

siblings

        // 查找qing节点所有的兄弟节点
        // $('#qing').siblings().css('backgroundColor', 'orange')
        // 查找qing节点所有的兄弟节点，而且是.lin的兄弟节点
        // $('#qing').siblings('.lin').css('backgroundColor', 'orange')

6. 事件

添加事件

        $('div).click(function () {})

事件绑定
on off one
绑定事件

        $('div').on('click', test1)
        $('div').on('click', test2)
        取消事件绑定
        $('div').off('click', test2)
        // 事件只能触发一次
        $('div').one('click', test2)

取消冒泡
ev.stopPropagation()
阻止默认行为
ev.preventDefault()
获取鼠标坐标
ev.pageX, ev.pageY
index
// 得到指定jquery对象在前面数组中的下标
// console.log( $('div').index($ ('#heng')))

7. 动画

show()

        // 参数1：动画的事件
        // 参数2：动画完毕之后执行的函数
        $('#dudu').show(5000, function () {
            alert('菊花残,满地伤')
        })

hide()
和show一样
$('#dudu').hide(5000, fn)
slidedown()
原来不显示，动画下拉显示
$('#dudu').slideDown(5000)
slideup()
原来显示，动画的上拉消失
slideToggler()
如果隐藏就下拉显示，如果显示就上拉消失
fadeIn()
// 慢慢的显示出来
// $('#dudu').fadeIn(5000)
fadeOut()
// 慢慢的消失
// $('#dudu').fadeOut(5000)
fadeTo()
// 5秒之内，透明度变为0.01
// $('#dudu').fadeTo(5000, 0.01)
fadeToggle()
如果隐藏就淡入显示，如果显示就淡出消失
自定义的动画效果
animate()
// 自定义动画
// $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
stop()
停止动画
$('#dudu').stop()

DOM

一

1. DOM操作

2. 事件绑定和事件冒泡

3. 小知识

4. 正则对象

5. 表单对象

practice

二

获取可视区的宽度和高度

1. 吸顶条

2. 自动播放选项卡

3. jquery

practice

三

1. 选择器

2. 样式添加、属性获取

3. js对象和jquery对象转化

4. 文档处理

5. 筛选和查找

6. 事件

7. 动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读