关注我 么么哒

【前端】笔记---js篇(1)

  • 作者:smile
  • 学无止境
  • 时间:Wed May 27 2020 09:16:01 GMT+0800 (China Standard Time)
  • 64人已阅读
简介 ife修炼笔记

1.什么是js?

JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。

如果说HTML 是网页的骨架,CSS 是网页的衣服,那么 js 就是网页的动作。他负责网页的动态操作可以和与用户进行交互,从用户的点击到数据等整理,都离不开 js 的身影

那么js能做什么呢?

  • JavaScript 能够改变 HTML 属性
  • JavaScript 能够改变 HTML 样式 (CSS)
  • JavaScript 能够隐藏/显示 HTML 元素
  • JavaScript 能对数据进行处理

2. js如何使用

在 HTML 中,JavaScript 代码必须位于 script 标签中。

当然您也可以通过 script 的 src 属性来引入外部的js文件

3. javascript 如何显示内容

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

4.脚本调用策略

  • 如果脚本无需等待页面解析,且无依赖独立运行,那么应使用 async。
  • 如果脚本无需等待页面解析,且依赖于其它脚本,调用这些脚本时应使用 defer,将关联的脚本按所需顺序置于 HTML 中。

5. js 的 DOM 操作

查找 HTML 的方法

  • document.getElementById(id) 通过元素 id 来查找元素
  • document.getElementsByTagName(name) 通过标签名来查找元素
  • document.getElementsByClassName(name) 通过类名来查找元素
  • document.querySelector("选择器") 找到符合的第一个元素并返回
  • document.querySelectorAll("选择器") 找到符合的所有元素并返回

改变 HTML 的方法

  • element.innerHTML = new html content 改变元素的 inner HTML
  • element.attribute = new value 改变 HTML 元素的属性值
  • element.setAttribute(attribute, value) 改变 HTML 元素的属性值
  • element.style.property = new style 改变 HTML 元素的样式

添加删除元素的方法

  • document.createElement(element) 创建 HTML 元素
  • document.removeChild(element) 删除 HTML 元素
  • document.appendChild(element) 添加 HTML 元素
  • document.replaceChild(element) 替换 HTML 元素
  • document.write(text) 写入 HTML 输出流
 

文章评论