JS中级篇（一）

瞳眬

于 2024-08-12 19:20:39 发布

阅读量416

点赞数 17

分类专栏：前端开发文章标签： javascript tensorflow 开发语言

本文链接：https://blog.csdn.net/2301_79614134/article/details/141133630

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JS中级篇（一）

一、变量声明
二、APIs

一、变量声明

const（优先）
用于常量声明
let
用于变量声明
var（淘汰）

二、APIs

1.获取DOM元素

<script>
	document.querySelector('CSS选择器')	// 参数必须是字符串
	document.querySelector('ul li')	// 包含一个或多个有效的CSS选择器
	
    // 获取元素
    const lis = document.querySelectorAll('.nav li')
    // 遍历得到里面的每一个对象
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i]) // 每一个小li对象
    }

	// -------（了解）-------
	// 根据id获取元素
	document.getElementById('left')
	// 根据标签获取元素
	document.getElementsByTagName('div')
	// 根据类名获取元素
	document.getElementsByClassName('right')
</script>

注意

哪怕只有一个元素，通过 querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
伪数组：
（1）有长度有索引号
（2）没有 pop() 、push() 等方法

2.操作元素内容

<script>

	// 获取元素
	const div = document.querySelector('div')
	
	// 获取div里的内容
	console.log(div.innerText)
	
	// 修改标签内内容
	div.innerText = '1234' // 纯文本 不解析标签
	div.innerHTML = '<i>1234<i>' // 可以解析标签
	let str = '1234' 
	div.innerHTML = `12 ${str} 34`
	
</script>

3.操作元素属性

<body>
  <img src="./images/1.png" alt="">
  <script>
    // 获取图片元素
    const img = document.querySelector('img')
    // 修改图片对象的属性
    // 对象.属性 = 值
    img.src = './images/2.png'
  </script>
</body>

4.操作元素样式属性

<body>
  <div></div>
  <script>
    // 获取元素
    const div = document.querySelector('div')
    // 修改样式属性
    // 对象.style.样式属性 = '值'
    div.style.width = '300px'
    // 多组单词的采取 小驼峰命名法
    div.style.backgroundColor = 'pink'
    // 添加类名
    div.className = 'nav'
    // 追加类 add() 类名
    div.classList.add('right')
    // 删除类  remove() 类名
    div.classList.remove('right')
    // 切换类  toggle()  有就删掉，没有就追加
    div.classList.toggle('right')
  </script>
</body>

5.自定义属性

<body>
  <div data-id="left" data-spm="right">1</div>
  <script>
  	// 获取元素
    const d = document.querySelector('div')
    // 获取自定义属性值
    console.log(d.dataset.id) // left
    console.log(d.dataset.spm) // right
  </script>
</body>

6.间歇函数

<script>
    // setInterval(函数, 间隔时间)
    let n = setInterval(function () {
      console.log('一秒执行一次')
    }, 1000)
    
    // 关闭定时器
    clearInterval(n)
</script>

7.事件监听

<script>
	// 事件源.addEventListener(触发事件,达成条件执行的函数)
	const b = document.querySelector('button')
    b.addEventListener('click', function () {})

	// 获取事件对象 一般命名为e
    const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        console.log('我按下了回车键')
      }
    })

	 // 去除字符串左右的空格
	 // 字符串.trim()
	const str = '   im a teacher  '
    console.log(str.trim())
</script>

注意

获取事件的常用属性
1.type：获取当前的事件类型
2.clientX / clientY：获取光标相对于浏览器可见窗口左上角的位置
3.offsetX / offsetY：获取光标相对于当前DOM元素左上角的位置
4.key：用户按下的键盘键的值（现在不提倡使用keyCode）

事件类型	关键字	说明
鼠标事件	click mouseenter mouseleave	鼠标点击鼠标经过鼠标离开
焦点事件	focus blur	获得焦点失去焦点
键盘事件	Keydown Keyup	键盘按下触发键盘抬起触发
文本事件	input	用户输入事件

8.事件流

阻止冒泡
事件对象.stopPropagation()
阻止默认行为（表单提交、跳转）
e.preventDefault()

<script>
<body>
  <button>按钮</button>
  <script>
    const b = document.querySelector('button')
    function fn() {
      alert('点击了')
    }
    // 绑定事件
    b.addEventListener('click', fn)
    // 解绑事件
    b.removeEventListener('click', fn)
  </script>
</body>
</script>

9.事件委托

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    // 获得父元素
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
      }
    })
  </script>
</body>

10.页面滚动事件

<script>

	// 滚动事件
	window.addEventListener('scroll', function () {
		// 获取位置 scrollTop / scrollLeft 
	    console.log(document.documentElement.scrollTop)
	})

	// 滚动到指定位置  元素.scrollTo(x, y)
	window.scrollTo(0,1000)
	
</script>

11.页面尺寸事件

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    console.log(div.clientWidth)
    // resize 浏览器窗口大小发生变化的时候触发的事件
    window.addEventListener('resize', function () {
      console.log(1)
    })
  </script>
</body>