JS学习第二周

本文主要是介绍JS学习第二周，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.DOM

1.获得DOM对象

document.querySelector()

根据CSS选择器获取第一个匹配的元素：

var element = document.querySelector('.myClassName'); // 获取第一个有myClassName类的元素  
var anotherElement = document.querySelector('#myElementId'); // 获取ID为myElementId的元素

document.querySelectorAll()

根据CSS选择器获取所有匹配的元素：

var elements = document.querySelectorAll('.myClassName'); // 获取所有有myClassName类的元素

前面的document可以换成特定元素

2.操作元素内容

修改元素的文本内容

使用innerText或textContent属性来设置或获取元素的文本内容。（可读写）

// 获取元素  
var element = document.getElementById('myElement');  // 设置元素的文本内容  
element.innerText = '新的文本内容';  
// 或者  
element.textContent = '新的文本内容';  // 获取元素的文本内容  
var text = element.innerText;  
// 或者  
var text = element.textContent;

innerText和textContent的主要区别在于如何处理HTML标签。innerText不会渲染HTML标签，而是将它们作为文本显示；而textContent会保留HTML标签，但浏览器不会渲染它们。

修改元素的属性

直接修改属性：

对于某些标准属性，如value（对于<input>元素）、src（对于<img>元素）或href（对于<a>元素），你可以直接通过JavaScript属性来设置它们。

// 获取元素  
var inputElement = document.getElementById('myInput');  
var imgElement = document.getElementById('myImage');  
var linkElement = document.getElementById('myLink');  // 直接修改属性  
inputElement.value = '新的输入值'; // 修改<input>的value属性  
imgElement.src = 'new-image.jpg'; // 修改<img>的src属性  
linkElement.href = 'https://example.com'; // 修改<a>的href属性

setAttribute()添加，修改属性：

setAttribute()方法用于设置或更改指定元素的属性值。这个方法接受两个参数：要设置的属性名称和新的属性值。如果属性已经存在，它将被新的值替换。如果属性不存在，它将被添加。

// 获取元素  
var element = document.getElementById('myElement');  // 使用setAttribute()方法设置属性  
element.setAttribute('class', 'new-class'); // 修改class属性  
element.setAttribute('data-custom', 'some value'); // 添加一个自定义数据属性

removeAttribute()移除属性：

// 获取元素  
var element = document.getElementById('myElement');  // 移除属性  
element.removeAttribute('class'); // 移除class属性

修改元素的样式

通过修改行内样式 style 属性，实现对样式的动态修改：

// 获取 DOM 节点const box = document.querySelector('.intro')box.style.color = 'red'box.style.width = '300px'// css 属性的 - 连接符与 JavaScript 的 减运算符// 冲突，所以要改成驼峰法box.style.backgroundColor = 'pink'

任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor

操作类名className 操作CSS：

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

// 获取 DOM 节点const box = document.querySelector('.intro')box.className = 'pink'

注意：

1.由于class是关键字, 所以使用className去代替

2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

通过 classList 操作类控制CSS：

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

		// 1.获取元素// let box = document.querySelector('css选择器')let box = document.querySelector('div')// add是个方法 添加  追加// box.classList.add('active')// remove() 移除 类// box.classList.remove('one')// 切换类box.classList.toggle('one')

3.自定义属性

标准属性:

标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

<div data-id="1"> 自定义属性 </div><script>// 1. 获取元素let div = document.querySelector('div')// 2. 获取自定义属性值console.log(div.dataset.id)

4.间歇函数

setInterval() 函数则用于周期性地执行某个函数或计算表达式，直到被取消或关闭页面。它返回一个表示定时器的ID。

 // 1. 定义一个普通函数function repeat() {console.log('不知疲倦的执行下去....')}// 2. 使用 setInterval 调用 repeat 函数// 间隔 1000 毫秒，重复调用 repeatsetInterval(repeat, 1000)

要停止setInterval()定时器，你可以使用clearInterval()函数，并将setInterval()返回的定时器ID作为参数传递给clearInterval()。

// 使用setInterval()启动定时器，并设置1000毫秒（1秒）的间隔  
intervalId = setInterval(timerFunction, 1000);  // 在某个时间点（例如，用户点击按钮后），我们可以停止定时器    
document.getElementById('stopButton').addEventListener('click', function() {  clearInterval(intervalId);  console.log('用户点击了停止按钮，定时器已停止。');  
});

5.事件监听

添加事件监听

通过addEventListener()方法来添加事件监听器。这个方法接受两个必需的参数：要监听的事件类型（如click、keydown、mouseover等）和一个回调函数，该回调函数会在事件发生时被调用。

// 1. 获取 button 对应的 DOM 对象const btn = document.querySelector('#btn')// 2. 添加事件监听btn.addEventListener('click', function () {console.log('等待事件被触发...')// 改变 p 标签的文字颜色let text = document.getElementById('text')text.style.color = 'red'})// 3. 只要用户点击了按钮，事件便触发了！！！

移除事件监听

如果你不再需要某个事件监听器，可以使用removeEventListener()方法来移除它。但是，要注意removeEventListener()需要引用与addEventListener()相同的函数。如果你传递了一个不同的函数或匿名函数，它将无法移除原来的监听器。

function handleClick() {  alert('按钮被点击了！');  
}  let button = document.getElementById('myButton');  
button.addEventListener('click', handleClick);  // ... 稍后在某个地方  
button.removeEventListener('click', handleClick);

事件类型

1. 鼠标事件（Mouse Events）
   • 点击事件（click）：当用户点击一个元素时触发。
   • 双击事件（dblclick）：当用户双击一个元素时触发。
   • 鼠标移入事件（mouseenter）：当鼠标指针进入元素内部时触发。
   • 鼠标移出事件（mouseleave）：当鼠标指针离开元素时触发。
   • 鼠标悬停事件（mouseover）：当鼠标指针移动到元素上时触发。
   • 鼠标离开事件（mouseout）：当鼠标指针从元素上移开时触发。
   • 鼠标移动事件（mousemove）：当鼠标指针在元素内部移动时触发。
   • 鼠标按下事件（mousedown）：当用户在元素上按下鼠标按钮时触发。
   • 鼠标释放事件（mouseup）：当用户在元素上释放鼠标按钮时触发。
2. 键盘事件（Keyboard Events）
   • 按键按下事件（keydown）：当用户按下键盘上的任意键时触发。
   • 按键释放事件（keyup）：当用户释放键盘上的键时触发。
   • 键盘输入事件（keypress）：当用户按下并释放一个键，产生一个可打印的字符时触发。
   • 注意：onkeypress只能捕获字母、数字、符号键，不能捕获功能键（如Enter键、F1～F12键等）。而onkeydown和onkeyup可以捕获大多数功能键。
3. 表单事件（Form Events）
   • 表单提交事件（submit）：当用户提交表单时触发。
   • 表单重置事件（reset）：当用户重置表单时触发。
4. 焦点事件（Focus Events）
   • 元素获得焦点事件（focus）：当元素获得焦点时触发。
   • 元素失去焦点事件（blur）：当元素失去焦点时触发。
5. 触摸事件（Touch Events）
   • 触摸开始事件（touchstart）：当用户在触摸屏幕上开始触摸时触发。
   • 触摸移动事件（touchmove）：当用户在触摸屏幕上移动手指时触发。
   • 触摸结束事件（touchend）：当用户在触摸屏幕上结束触摸时触发。
6. 窗口事件（Window Events）
   • 窗口加载事件（load）：当页面加载完成时触发。
   • 窗口大小改变事件（resize）：当浏览器窗口大小改变时触发。
   • 窗口滚动事件（scroll）：当用户滚动页面时触发。

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

// 获取 .box 元素const box = document.querySelector('.box')// 添加事件监听box.addEventListener('click', function (e) {console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');// 事件回调函数的第1个参数即所谓的事件对象console.log(e)

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、e 。

事件对象中常用属性：

• 事件类型（type）：表示触发的事件类型，如click、keydown等。
• 事件目标（target）：触发事件的元素或对象。
• 时间戳（timeStamp）：事件创建时的时间戳。

此外，根据不同的事件类型，事件对象还可能包含其他特定的属性，如鼠标事件的clientX、clientY属性（表示鼠标指针相对于浏览器窗口可视区的X、Y坐标），键盘事件的key、keyCode属性（表示按下的键）等。

环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。

this的指向：

• 在全局作用域中：

  console.log(this === window); // true
  

• 在对象的方法中：

  var obj = {  prop: 'Hello',  method: function() {  console.log(this.prop); // 输出 'Hello'  }  
  };  
  obj.method();
  

• 在事件处理函数中：

  var btn = document.getElementById('myButton');  
  btn.addEventListener('click', function() {  console.log(this === btn); // true  
  });
  

<script>// 声明函数function sayHi() {// this 是一个变量console.log(this);}// 声明一个对象let user = {name: '张三',sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性}let person = {name: '李四',sayHi: sayHi}// 直接调用sayHi() // windowwindow.sayHi() // window// 做为对象方法调用user.sayHi()// userperson.sayHi()// person
</script>

结论：

1. this 本质上是一个变量，数据类型为对象
2. 函数的调用方式不同 this 变量的值也不同
3. 【谁调用 this 就是谁】是判断 this 值的粗略规则
4. 函数直接调用时实际上 window.sayHi() 所以 this 的值为 window

6.获得元素尺寸与位置

获取元素的尺寸

1. clientWidth 和 clientHeight
   • 这些属性返回元素的内部宽度和高度（以像素为单位），包括元素的padding，但不包括元素的边框（border）、外边距（margin）和滚动条（如果存在）。
   • 这两个属性是HTMLElement的属性，因此你可以直接在元素上调用它们。
2. offsetWidth 和 offsetHeight
   • 这些属性返回元素的布局宽度和高度（以像素为单位），包括元素的padding、border和滚动条（如果存在），但不包括外边距（margin）。
   • 同样，这两个属性也是HTMLElement的属性。

获取元素的位置

offsetLeft 和 offsetTop

• 这些属性返回元素相对于其最近的已定位祖先元素（即position属性不为static的祖先元素）的左侧和顶部的偏移量。
• 如果没有已定位的祖先元素，那么它们将相对于初始包含块（通常是<html>元素）计算。

属性	作用	说明
scrollLeft和scrollTop	被卷去的头部和左侧	配合页面滚动来用，可读写
clientWidth 和 clientHeight	获得元素宽度和高度	不包含border,margin，滚动条 用于js 获取元素大小，只读属性
offsetWidth和offsetHeight	获得元素宽度和高度	包含border、padding，滚动条等，只读
offsetLeft和offsetTop	获取元素距离自己定位父 级元素的左、上距离	获取元素位置的时候使用，只读属性

7.事件流

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

阻止冒泡

阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。

<body><h3>阻止冒泡</h3><p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p><div class="outer"><div class="inner"><div class="child"></div></div></div><script>// 获取嵌套的3个节点const outer = document.querySelector('.outer')const inner = document.querySelector('.inner')const child = document.querySelector('.child')// 外层的盒子outer.addEventListener('click', function () {console.log('outer...')})// 中间的盒子inner.addEventListener('click', function (ev) {console.log('inner...')// 阻止事件冒泡ev.stopPropagation()})// 内层的盒子child.addEventListener('click', function (ev) {console.log('child...')// 借助事件对象，阻止事件向上冒泡ev.stopPropagation()})</script>
</body>

这篇关于JS学习第二周的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---