JavaScript学习笔记001-变量0获取和操作标签

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

JS学习

逻辑思维太重要了

学的我几天不想说话

不像html+css

可以直接硬杠

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->
<div id='box01'></div>
<p id='text01'></p>

<script>
// 写JS代码必须严格区分大小写

/* JS代码可以放在html的任何位置,内部写入时规范方法为<body>标签里的最下面(html解析方法为从上至下)
window.onload = function (' ') {
} // 全部窗口资源加载完成后再运行此JS
<script src='./js/js.js' defer='defer'></script> // 比window.onload提前一级
*/

// es6 基本全 ie 不兼容

/* 
变量名取名规范:
1.不能纯数字
2.不能以数字开头
3.严格区分大小写
4.不能使用关键字和保留字
5.可以使用部分符号取名(最好是英文符号)
6.不可以使用运算符
7.不推荐使用中文名
*/

// 申明变量的关键词: var let const

// 一个环境下变量名只需要申明一次

// 变量第一次使用时必须声明,后续使用不需要再次声明

// 变量关键字 变量名 = '值'

// JS变量为 = 右边给 = 左边赋值

// 有特殊意义的右边值不能带引号,带引号的为文本值

// 写在JS最外层的为全局变量

// var 声明的全局变量会成为window的属性

// let 和 const 声明的全局变量不会成为window的属性

// var 先使用再声明不会报错,let 和 const 先使用再声明会报错

// let 声明的为变量,const声明的为常量
var a = 1;
a = 9; // 变量可以重新赋值
let b = 2;
b = 5; // 变量可以重新赋值
const c =3;

// div01 代表id值为box的div标签本体
let div01 = document.getElementById('box01');
let p01 =document.getElementById('text01');

// DOM0级事件(对象 . 事件),同类事件只能绑定一次
div01.onclick = function () {
}

// 测试输出的方法
alert('弹窗提示信息');
console.log('打印内容');

// JS获取标签的信息
console.log(div01); // 获取标签本身
console.log(div01.id); // 获取标签的id
console.log(div01.style.width); // 获取标签的样式(行内样式)

// JS获取需要操作的标签的权限
document.getElementById('box01');  // 通过id获取操作标签的权限

// JS操作(div有一个点击事件 = 把要做的事情记录下来)
document.getElementById('box01').onclick = function () {
// 大括号里写入要做的事情
alert('弹窗提示信息'); // 要做的事:浏览器弹窗

// 再次操作标签需要再次获取操作权限
document.getElementById('box').innerHTML = '在标签里写入内容'; // innerHTML 会解析标签   innerText 会全部解析成文本  

// 操作标签改变样式(行内样式)
div01.style.width = '500px';
div01.style.height = '200px';
div01.style.backgroundColor = 'red';
div01.style.cssText = 'width:500px;height:200px;background-color:red;'; // 多条属性样式
p01.innerHTML = '123'; // 可以改变其他拿到权限的标签
}

// 注意:设置p01.innerHTML的值注意点
let str = p01.innerHTML;
str = 123; // 重置:变量的值
// 要改变谁的值,就赋值给谁
p01.innerHTML = 123;

</script> 

</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第31天:动态生成节点-京东轮播图创建

一、获取节点属性 getAttribute()通过这个方法可以得到某些元素的某些属性 alert(demo.getAttribute("class"));

791
来自专栏不止是前端

Vue:Vue中操作DOM方法

5819
来自专栏JavaEE

jQuery入门前言

上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

943
来自专栏HTML5学堂

querySelector与querySelectorAll

HTML5学堂:JS获取节点的方法很多,但真正常用的或许就是通过id和标签获取节点,用传统的几种方法想要快速的查找到某个标签,就意味着需要更多的id,命名多了自...

3637
来自专栏互联网开发者交流社区

JS总结

1574
来自专栏云端架构

【云端架构】前端必备常用CSS语法

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

3648
来自专栏coding for love

CSS常用布局实现03-水平垂直居中

其实,水平居中和垂直居中都是水平垂直居中的一部分,所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中,那么居中的元素肯定是有宽度和高度的,要么是...

961
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb04-jQuery(Java真正的全栈开发)

? jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客...

3649
来自专栏柠檬先生

jquery的基本选择器

关于基本选择器包括 “*” ,“.class”,"element","#id","selector1 selementN" "*" 选择器,可以找到文档中的所...

2069
来自专栏Ryan Miao

java变量的加载顺序

学习编程思想 1 package com.test.java.classs; 2 3 /** 4 * Created by Administrato...

2529

扫码关注云+社区

领取腾讯云代金券