js简介及其事件操作

JavaScript

  • js是一门解释型语言、动态、弱类型

    • js运行时有两个步骤

      • 预解析

        • js预解析

          • 找var
          • 找函数

          如果找到var,那么会先给变量赋值undefined,并保存到仓库中

      • 自上而下按顺序执行

  • 作用:可以与用户做交互,给网页添加动态效果

  • js三种书写方式

    • 行内事件驱动
    • 内嵌
    • 外部文件
  • js六大数据类型

    • undefined 未定义
    • null 空
    • number 数字
    • string 字符串
    • Boolean 布尔值
    • object 对象
  • js的特点:自上而下、面向过程、单线程

  • 数组 var arr = [1,2,3,false,null]

    • 可以存放任意数据类型
  • typeof 检测数据类型

  • 算术运算符

    • ++
    • --
    • *
    • /
    • % 取余
  • 比较运算符

    • >

    • <

    • >=

    • <=

    • ==

    • ===

  • 赋值运算符

    • =
    • +=
  • 逻辑运算符

    • && 全真为真
    • || 有假为假
    • !

做判断

  • for循环优化

        <script>
            var str = ''
            for(var i=0;i<10000;i++){
                str +="<button>按钮</button>"
            }
            document.body.innerHTML = str
        </script>
    
    • 优化原理
      • 循环次数太多
      • 页面渲染次数多
    • for循环自执行
      • 打开浏览器时,在事件触发之前,for循环停止
    • 事件触发执行
  • this

    • 谁调用我,我就指向谁
  • 函数

    • 被设计出用来执行特定任务的代码块 function

      • 匿名函数
      • 具名函数
    • 函数表达式

      • 只要发生赋值就是表达式
        fn = function(){
        	alert(666)
        }
        fn()
      
    • 函数自执行

        (function(){
        	alert('自执行')
        })()
      
    • return

      • 作为函数的返回值
      • 终止函数
      • 如果return后面没有代码,返回undefined
    • 函数的参数

      • 实参
      • 形参
    • 函数传参

      • 六大数据类型都行
    • argument 函数内置的类数组对象

      • 实际参数的集合

        • 下标
        • length属性
            function fn() {
                // [3,7]
                // console.log(arguments[1])
                var a = arguments[0]
                var b = arguments[1]
                arguments[0] = 5
                arguments[1] = 25
                console.log(arguments.length)
                return a + b
            }
      
  • 选择器

    • id

        document.getElementsById('div')
      
    • class

        document.getElementsByClassName('div')
      
    • 标签

        document.getElementsByTagName('div')
      
  • 集合

    • class和标签都是集合
    • 一次想操作多个元素所以使用for循环
  • for循环

    • 初始值

    • 循环条件

    • 执行方式

      	<script>
      	    for(var i = 0;i<9;i++){
      		console.log(i)
      		}
      	</script>
      
  • 跳出与终止

    • continue 跳出循环
    • break 终止程序
  • setInterval()

    • 异步函数
    • 先判断时间,然后根据时间,重复调用前面的函数
    • 两个参数
      • 函数
      • 时间(毫秒)

javaScript–字符串操作

  • charAt()返回指定位置的字符

  • indexOf()字符串检索,如果没有指定字符,返回-1

  • charCodeAt()编码

  • String.formCharCode()解码

  • slice() 字符串截取

    • 参数有俩个时,从第一个参数截取到第二个参数
    • 参数有一个时,从第几个开始截取
  • 大小写转换

    <script>
    
    
        var str = 'aACDhh'
    
        // console.log(str.toLocaleLowerCase(str))  // 小写
        console.log(str.toLocaleUpperCase(str))   // 大写
    
    
    </script>
    
  • 数组排序

    • sort()

      var arr = [0, 1, 'a', 2, 3, 4, 'z', 5, 'y', 6, 7, 8, 9, 'z']
      arr.sort(function(a,b){
      	return a-b
      })
      

节点操作

  • 子级节点

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
        <ul>
            <li>1111</li>
            <li>222</li>
            <li>333</li>
            <li>4444</li>
        </ul>
    
    
        <script>
    
            var oUl = document.getElementsByTagName('ul')[0]
    
            //  对象.children = 子级节点集合
    
            oUl.children[0].style.background = 'red'
            oUl.children[2].style.background = 'green'
            oUl.children[3].style.background = 'blue'
        </script>
    
    </body>
    
    </html>
    
  • 同级节点

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    
        <script>
            var oUl = document.getElementsByTagName('ul')[0]
            oUl.firstElementChild.style.background = 'red'
            // firstElementChild  第一个节点
            oUl.lastElementChild.style.background = 'green'
            // lastElementChild 最后一个节点
            var oFirst = oUl.firstElementChild
            // Sibling 兄弟
            oFirst.nextElementSibling.style.background = 'blue'
            var oLast = oUl.lastElementChild
            oLast.previousElementSibling.style.background = 'yellow'
        </script>
    
    </body>
    
    </html>
    
  • 父级节点

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
    
    
        <ul>
            <li>
                <span>我是一楼</span>
                <button>删除</button>
            </li>
            <li>
                <span>我是二楼</span>
                <button>删除</button>
            </li>
            <li>
                <span>我是三楼</span>
                <button>删除</button>
            </li>
            <li>
                <span>我是四楼</span>
                <button>删除</button>
            </li>
        </ul>
    
    
        <script>
    
            var oUl = document.getElementsByTagName('ul')[0]
    
            var aBtn = document.getElementsByTagName('button')
            // parentNode 父级节点
    
            for (var i = 0; i < aBtn.length; i++) {
    
                aBtn[i].onclick = function () {
                    this.parentNode.style.display = 'none'
                    // this.parentNode.remove()
                }
    
            }
    
        </script>
    
    </body>
    
    </html>
    
  • 创建、添加节点

    <body>
    
    
        <ul>
    
        </ul>
    
    
        <script>
    
    
            var oUl = document.getElementsByTagName('ul')[0]
    
            // 先创建元素  添加    删除
    
            var oLi = document.createElement('li')
    
            oLi.innerHTML = '我是被创建出来的'
    
            var oFf = document.createElement('ff')
    
            oFf.innerHTML = '我是一个新标签'
            var oXy = document.createElement('xy')
            oXy.innerHTML = '我要放在最前面'
            oUl.appendChild(oLi)
            oUl.appendChild(oFf)
            oUl.insertBefore(oXy, oUl.children[0])
            // appendChild 后面添加
            // insertBefore 前面添加  第一个参数 1 添加谁 2 添加到那  
            // removeChild 删除元素节点
            oUl.removeChild(oLi.previousElementSibling)
    
            // 
    
        </script>
    
    </body>
    
  • 获取鼠标坐标

    <script>
        document.onclick = function (ev) {
            console.log(ev.clientX + ' ' + ev.clientY);
        }
    </script>
    
  • div随着指针移动

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    
    <style>
    div {
    width: 80px;
    height: 80px;
    background-color: red;
    
    position: absolute;
    }
    </style>
    
    <body>
    
    <div></div>
    
    <script>
    
        var oDiv = document.getElementsByTagName('div')[0]
        document.onmousemove = function (ev) {
        var disX = ev.clientX
        var disY = ev.clientY
        oDiv.style.left = disX + 'px'
        oDiv.style.top = disY + 'px'
        }
    
    </script>
    
    </body>
    
    </html>
    
  • 事件捕获

    <script>
    
        var oDiv1 = document.getElementById('div1')
    
        //  事件委托  / 事件添加  / 事件监听
    
        oDiv1.addEventListener('click', function (e) {
            console.log(this.id);
    
        }, true)
    
        div2.addEventListener('click', function (e) {
            console.log(this.id);
        }, true)
    
        div3.addEventListener('click', function (e) {
            console.log(this.id);
        }, true)
    
        // true =  捕获   false  =  冒泡
    
        // 子级元素在事件调用时  会将事件逐级向上 (由外而内) 传递  
    
    </script>
    
  • 滚轮事件

    • onwheel
      • wheelDelta = -120 向下滚动
      • wheelDelta = 120 向上滚动
<body>

<div></div>



<script>

    //   wheelDelta  = -120  向下滚动
    //   wheelDelta  = 120  向上滚动
    var oDiv = document.getElementsByTagName('div')[0]
    document.onwheel = function (ev) {
    // console.log(ev.wheelDelta);
    if (ev.wheelDelta < 0) {
    oDiv.style.height = oDiv.offsetHeight + 10 + 'px'
    } else {
    oDiv.style.height = oDiv.offsetHeight - 10 + 'px'
    }
    }

</script>

</body>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WSZFSNFK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值