1.0.1 JS对象和标签的关系
<body>
<div id='div'>888888</div>
<script>
// 获取到了一个标签.这个表示是一个对象.
// 参数是标签的id值.(不是id选择器)
const oDiv = ('div');
(oDiv);
// = 'wrap';
// 无法删除oDiv的id属性。
// delete ;
// 添加自定义属性是无法反映到标签上的。
// = 'custom attr';
// oDiv对象就是div标签本身！ => 错
// oDiv是一个js对象 div标签是html元素,本身就不是一类东西.
// js只是通过oDiv对象来间接的操作html元素.有些可以操作,有些操作不了.
// 通过一个方法添加自定义属性.
('abc', 'custom attr');
</script>
</body>1.0.2 const声明对象
- 修改oDiv的id属性,为什么没报错?
- 我们修改的是oDiv的属性,不是修改oDiv
- = 'wrap';
- oDiv是cosnt声明的.不能修改oDiv的值.
- oDiv = 1000;
- 声明一个对象时,习惯是用const声明的.
<body>
<div id='div'>888888</div>
<script>
const oDiv = ('div');
</script>
</body>1.0.3 标签的知识
标签的内容：
只有双标签有内容，开标签和闭标签之间的就是标签内容
属性：
1：全局属性 所有标签都可以使用的属性。常见是id，class，style，title
2：可选属性 不同标签的可选属性不一样。例如img标签可以有width属性，div没有。
3：自定义属性，开发人员为了某种目的，自己添加的属性
4：事件属性。数据属性都以on开头。on+事件名，事件属性的属性值是js代码
没有=的属性是布尔属性.这种属性的属性值用js表示就是布尔值.
style是属性,style的属性值是样式
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<div title='这是div' yyy='bbb'>1111</div>
<input type="button" value='按钮' onclick='alert("别点了，我痒")' />
<img width="500" src="img/" title='这是小陈' alt="">
<p id='p1' class='content' style='width:300px' aaa='bbb' ccc>33333</p>
<input type="checkbox" checked />
<input type="button" value='按钮'/>
<button>按钮</button>
<script>
const oP = ('p1');
// 获取所有的oP的属性，包括自定义属性
();
</script>
</body>1.0.4 JS修改样式
修改style属性的backgroundColor属性,就可以让页面上的div的背景色改变.
如何通过样式名书写属性名?
1:没-的样式名就是属性名.
2:有-的样式名写成驼峰
以下对style对象的修改，实际上修改的是标签的行间样式。
= 'red';
= '70px';
= '500px';<body>
<div id='wrap'>标签</div>
<script>
const oDiv = ('wrap');
// cssText可以同时修改多个样式。写法根行间样式的写法一模一样
= 'background-color: red; font-size: 70px; width: 500px;'
();
</script>
</body>1.0.5 JS获取样式
<style>
p{
background-color: brown;
}
div{
background-color: blueviolet !important;
}
</style>
</head>
<body>
<div id='wrap' style='background-color:pink'>111111111111111111111111111</div>
<p id='p1'>2222222222</p>
<script>
const oDiv = ('wrap');
const oP = ('p1');
// 行间样式自动存储在style对象上.
();
();
// 这个写法无法获取不是行间样式的其他样式值
();
// 获取最终的样式的方法.
// getComputedStyle是哪个对象的方法? => window的方法
// 它的参数是什么? => 参数是希望获取的样式所在的元素
// sty变量是什么? => sty是一个对象.sty对象的所有属性都是最终样式的样式名.
const sty = getComputedStyle(oDiv);
(sty);
();
// color 不是一个对象,就是一个字符串.
const color = getComputedStyle(oDiv).backgroundColor;
(color);
</script>1.0.6 JS修改内容
- 修改标签的内容,只需要修改标签对象的innerHTML或者innerText属性就可以了.
- innerText和innerHTML的区别：
- 1:innerText只能获取文本内容,不包含标签.innerHTML可以获取包含标签的内容
- 2:innerText不能把标签插入已知标签中,innerHTML可以.
- getComputedStyle
- = '一个大大的按钮';
- = '一个大大的按钮';
<body>
<button id='btn'>按钮</button>
<div id='wrap'>
<p>p的内容</p>
</div>
<div id='div1'></div>
<script>
const oBtn = ('btn');
const oWrap = ('wrap');
const oDiv = ('div1');
// (oBtn);
// (oWrap);
// = '<span>sssss</span>';
= '<span>sssss</span>';
</script>
</body><body>
<div id='div1'></div>
<script>
const oDiv = ('div1');
= '<p>uuuuuu</p>';
// oDiv老的内容+新的内容 变成 当前的内容
= + '<p>ttttttttt</p>';
+= '<p>ttttttttt</p>';
+= '<p>rrrrrrrrr</p>';
let x = 10;
x = 20;
x = x + 30;
(x);
// -----------------------------------------------------------------
= '<p>uuuuuu</p><p>ttttttttt</p>';
= '<p>uuuuuu</p>'+'<p>ttttttttt</p>';
// 反引号支持换行
= `
<p>uuuuuu</p>
<p>ttttttttt</p>
`;
</script>
</body>1.0.7 JS修改属性
<body>
<div class='active' aaa='bbb'>111</div>
<input id='btn' type="button" value='大按钮'>
<input id='text' type="text">
<textarea cols="30" rows="10"></textarea>
<select name="" >
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
</select>
<input type="color" id='color'>
<script>
const oDiv = ('div');
const oBtn = ('btn');
const oText = ('text');
const oArea = ('area');
const oSelect = ('select');
const oColor = ('color');
// 改全局属性或者可选属性，直接通过.来修改。class属性的对象属性是className
// 不能用这样的方式修改自定义属性。
= 'wrap';
= 'cn';
// = 'ccc';
// 通过setAttribute方法来修改自定义属性aaa为ccc
('aaa', 'ccc');
// 无法获取自定义属性
// let msg = ;
// undefined
// (msg);
// 获取自定义属性aaa的值.
// let msg = ('aaa');
// (msg);
(oDiv);
// 获取按钮的value属性。
();
// 获取文本框的输入内容
();
// 获取文本域输入的内容
();
// 获取下拉框选择的内容
();
// 获取颜色框选中的颜色
();
</script>
</body>1.0.8 标签的所有属性都是字符串
<body>
<input type="text" id='text' value='100' >
<script>
// 获取到的标签的样式,属性值,内容,全部都是字符串.
const oText = ('text');
// 文本框获取的value是字符串,*1之后会变成数字100
let num = * 1 + 50;
(num);
</script>
</body>1.0.9 JS添加事件
- 通过js来添加事件。事件代码需要写在一个函数中。
- 函数固定写法: function 函数名() { 函数内的代码 }
- 函数内的代码需要函数触发才能执行.函数不触发就不执行.
<body>
<!-- 点击按钮后,弹窗 -->
<button onclick='alert(1000)'>按钮</button>
<button id='btn'>有js的按钮</button>
<script>
const oBtn = ('btn');
// js添加事件不能这样写
= alert(1000);
// 当按钮被点击时,就触发后面的函数.
= function() {
alert(1000);
}
</script>
</body>1.1.0 JS插入列表
<body>
<input type="text" id='text'>
<input type="button" id='btn' value='按钮'>
<ul id='ul'></ul>
<script>
const oText = ('text');
const oBtn = ('btn');
const oUl = ('ul');
// 每次点击按钮，都往ul内插入一个li，li的内容就是文本框输入的内容
= function() {
= + '<li>' + + '</li>';
// += '<li>111</li>';
}
</script>
</body>1.1.1 JS事件类型
<body>
<div id='wrap'></div>
<script>
const oDiv = ('wrap');
// 所有是事件都必须赋值一个函数才有效果
// 学习事件
// 1:事件什么时候触发.
// 2:事件名怎么写.
// 当鼠标移入时，div变黑
= function() {
= 'black';
}
// 当鼠标移出时，div变红
= function() {
= 'red'
}
</script>
</body>1.1.2 JS操作符
操作符 , 操作符也叫运算符.
经过操作符计算之后,总能得到一个结果.
+,-,*,/
=, typeof, delete;
操作符计算的数据,我们叫操作数
1 + 2 => + 就是操作符, 1和2是+的操作数
x = 10; => 就是操作符, x和10就是操作数
typeof 100 => typeof是操作符, 100是操作数.
delete => delete是操作符, 是操作数.
双目运算符 => 操作数是2个的运算符.(大多数运算符都是双目)
单目运算符 => 操作数是1个的运算符.
js的操作符分类:
1:算术运算符.+,-,*,/
2:比较运算符.<,>,===,!=
3:逻辑运算符.||,&&,!
4:条件运算符.(三目运算符).?:
5:赋值运算符.
6:其他,typeof,delete,void,in,instanceof
1.1.3 JS表达式
表达式:
1:原始表达式 => 单个常量或者变量 => 常量返回自身,变量返回变量的值
2:操作符表达式 => 不同操作符返回的值不一样的.
3:函数调用.每次方法的使用,都是在写函数调用表达式. => 先不考虑
表达式经过计算都有一个返回值.(计算结果)
// 程序的输入 => 以表达式输入.
// 程序的输出 => 表达式的返回值.
<script>
// 把y变成typeof 100 + typeof 200的返回值
// y变成 'number' + 'number'
let y = typeof 100 + typeof 200;
// const oDiv = ('div');
let num = alert(100) + alert(200);
</script><script>
// 把x变成10.
// 把x变成10的返回值.
let x = 10;
// 把y变成1+1的返回值.
let y = 1+1;
// 把str变成typeof 100的返回值.
let str = typeof 100; // 'number'
// 把msg变成(100)的返回值.
let msg = (100); // undefined
// 把m变成typeof 100 + (100)的返回值.
// 把m变成'number' + undefined 的返回值
let m = typeof 100 + (100); // 'numberundefined'
// 把h变成typeof typeof 100的返回值.
// 把h变成typeof 'number'的返回值.
// 把h变成'string'的返回值.
let h = typeof typeof 100;
</script><script>
// 打印100的返回值。
(100);
// 打印1+1的返回值
(1+1);
// 打印typeof 100的返回值
(typeof 100);
// 打印(100)的返回值.
(('log里面的log'));
</script>