js简介及其事件操作-CSDN博客

本文链接：https://blog.csdn.net/WSZFSNFK/article/details/122426837

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>