欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）

发布时间：2025/3/19 javascript 52 豆豆
生活随笔 收集整理的这篇文章主要介绍了 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

API



DOM

DOM简介

什么是DOM

DOM树

获取元素

getElementById获取元素

  • 得到一个元素对象object
  • 用dir打印，还可以得到它的属性 div#time

getElementsByTagName获取对象集合




H5新增获取元素方式

获取body和html元素


事件基础

事件概述


常见的鼠标事件

操作元素

改变普通元素内容


改变普通元素属性

分时问候案例

  • 案例分析 ：
  • 日期内置对象
  • 多分支语句
  • img，修改src属性
  • div，修改内容
  • 操作流程 ：
  • 1.获取元素

修改表单元素属性


京东显示隐藏密码明文案例


<!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><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style> </head><body><div class="box"><label for=""><img src="images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>var flag = 0;var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');eye.onclick = function () {if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1;}else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</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><style>.box {}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style> </head><body><div class="box">淘宝二维码<img src="images/tao.png" alt=""><i class="close-btn">x</i></div><script>var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');btn.onclick = function () {box.style.display = 'none'; }</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><style>input {color: #999;}</style> </head><body><input type="text" value="手机"><script>var txt = document.querySelector('input');txt.onfocus = function () {if (this.value === '手机') {this.value = '';}this.style.color = '#333';}txt.onblur = function () {if (this.value === '') {this.value = '手机';}this.style.color = '#999';}</script> </body></html>

使用className修改样式属性

密码框格式提示错误信息案例

操作元素总结

排他思想

百度换肤案例



表格隔行变色案例




表单全选取消全选案例

获取自定义属性值


设置和移除自定义属性


tab栏切换案例（自定义属性）




H5自定义属性


总结

以上是生活随笔为你收集整理的黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。