|
1.js放置在body内部的底部
2.<script>书写js代码
3.prompt() 可输入弹出框
4.
变量
F12审查元素 ,console控制台，可以看报错情况
5.
var 声明变量
6.
变量的命名规则：
变量可以由数字、字母和下划线和$组成
变量不能以数字开始
变量不能是关键字或保留字
不能超出255个字符
区分大小写
7.
js是弱类型的语言，存储的数据类型有当前存储的值来决定
8.
变量的类型 typeof(变量）
9.
基本数据类型：
number数值类型，类似于数学中的1223，-123
? var a=-10.12;
string字符串类型，用引号包裹的都是字符串
?a='123';
boolean布尔类型，分true或者false
?a=true;
undefined未定义或者未赋值
? var b;
? console.log(typeof(b));
复杂数据类型 object
?var list=[100,100,true];
?console.log(typeof(list));
10
每一行js结束，必须加分号
11.
var a=-10.12;
相当于把-10.12的值赋值给a
12.
console.log(typeof(a));
console.log()在控制台打印
使用a，把a的值读取出来
13.
在js中单双引号用法一模一样
14.
变量类型的转换
一般通过表单获取的都是字符串
parseInt()把字符串转化为整数（截取字符串前面的数值，其余的自动忽略）、把小数转化为整数，如果不能转化，得到的是NaN
parseFloat()用法和parseInt()一模一样，只是可以转化为小数（有小数直接转化，没有小数，默认还是整数）
a=parseInt(a);
把a转化完赋值给a
强制转换或者隐式转换
数值类型+字符串=字符串
程序执行，从左到右
console.log(1+'2'+1+2);
得到字符串：1212
数值类型+布尔类型=数值类型?
true转化为1，false转化为0;
如 console.log(1+true);
得到2
布尔类型+字符串类型=字符串类型
如 console.log(true+'true');
得到truetrue
15.
++和--的用法
a++,先把a的值作为表达式的值，然后a的值加1
++a先把a的值加1，表达式的值是a
a--和--a同样的道理，只是减1
var a=1;
console.log(a++)
得到1
console.log(++a)
得到2
? ? ? ? ? ? ?// ? a的值： 2 ? ?2 ? 1 ? ? ?2 ? ? ? 2 ? ? ? 1
? ? ? ? ? ? var b=(a++)+a+(--a)+(++a)+a+(a--)
? ? ? ? ? ? // ? ? ? ? ? ?1 ? ? ?2 ? ? ? 1 ? ? ? ?2 ? ? ?2 ? ? 2 ? ? ?
? ? ? ? ? ? console.log(b);
? ? ? ? ? ? console.log(a)
16.
运算符：
赋值运算符,
把a的值赋值给a：= ? += ? -= ? ?*= ? ?/=
a=a+2;可简写为a+=2;
算法运算符：
+ ?- ?* ?/(除以） %（求余）余数有正负，正负有被除数决定
console.log(10/3）10是被除数?
得到3.3333....
? console.log(10%-3);
得到1
?console.log(-10%3);
得到-1
?console.log(-10%-3);
得到-1
关系运算符：
== ? === ?!= ? !== ?>= <= ?> ?< 得到的都是布尔类型
==判断值是否相等，不考虑类型。===判断是否一模一样
console.log(1===1)
得到true
console.log(1!='1');
得到false
?console.log(1=='1');
得到true
?console.log(1==='1');
得到false
逻辑运算符：
&&与 ||或 ！取反
&&只要有一个为假，结果就为假 ?||只要有一个为真，结果就为真，代码从左到右执行
? console.log(2&&3&&4&&0&&3)
得到0
console.log(0||0||4||4||3)
得到4
17.
代码分步执行，布尔类型和数值类型比较的时候，强制转换
a=800;
console.log(10<a<100)
得到true；说明是错的
应改为：console.log(10>a&&a<100);
18.
流程控制语句：
格式一、
if（条件）{
条件为真时，执行代码
}
格式二、
if（条件）{
条件为真时，执行
}else{
条件为假时，执行
}
如
if（age<18）{
alert('年龄太小了');
}else{
alert('上网吧');
}
格式三、
多条件判断
if语句有跳楼现象
if（条件1）{
条件1为真时，执行完该语句，直接跳出
若条件1为假，则判断条件2
}else if（条件2）{
条件2为真时，执行
}else if（条件3）{
条件3为真时，执行
}.....
else{
以上条件都不符合时，执行
}
19.
0是假，undefined是假，字符串都为真
如 ?if(1){
? ? ? ? ? ? ? ? console.log('hahah')
? ? ? ? ? ? }
得到hahah
?if(undefined){
? ? ? ? ? ? ? ? console.log('hahah')
? ? ? ? ? ? }
不执行hahah
20.
不同变量类型（如常量和变量之间），如果需要拼接，使用+
如 if(a<=36000){
? ? ? ? ? ? ? ? alert('您需要缴税'+a*0.03);
? ? ? ? ? ? }else if(a<=144000){
? ? ? ? ? ? ? ? var sum=36000*0.03+(a-36000)*0.1;
? ? ? ? ? ? ? ? alert('您需要缴税'+sum)
? ? ? ? ? ? }
21.
循环：
用来实现遍历的代码，有顺序
for（a初始化；b条件；c继续下去的条件/次数）{
循环体
}
第一步：执行a，初始化
第二步：判断是否符合b，如果符合，执行第三步，否则跳出循环
第三步：执行循环体，执行c，重复执行第二步
如 计算1-100的和
? var sum=0;
? ? ? ? ? ? for(var a=1;a<=100;a++){
? ? ? ? ? ? ? ? sum=sum+a;
? ? ? ? ? ? ? ??
? ? ? ? ? ? }
有行和列的，如九九乘法表
? for(var i=1;i<=9;i++){
? ? ? ? ? ? ? ? for(var j=1;j<=i;j++){
? ? ? ? ? ? ? ? ? ? // i * j = i*j
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
22.
函数：
封装性，把重复的代码封装起来，一般这些代码具有特殊的用途
a.函数的定义，函数名字命名规则和变量名命名规则一样
function 函数名字（）{
函数体
}
b.函数的使用 ：
函数名字（）
23.
a.定义函数
function fn(){
console.log('zsh');
console.log('hfhd');
}
b.使用函数，相当于执行函数体的代码
fn();
fn();
得到
zsh
hfhd
zsh
hfhd
24.
有参函数
a.定义函数的时候的参数，称为形参，相当于声明变量
function fn(a){
console.log(a);
}
b.使用函数的时候的参数，称为实参，相当于给变量赋值
fn('sndf')；
fn(3);
得到sndf 3
25.
有返回值的函数
使用函数得到的就是return后面的内容
function fn(a,b){
return a+b;
}
var c=fn(1,2);
document.write(c);
得到3
26.
变量的作用域：
在js中声明的变量，只有函数的作用域
声明的变量的作用范围。向上寻找距离该变量最近的开始的函数的{变量的作用范围就是该{之内}}
? function fn(){ ?
? ? ? ? ? ? ? ? var a=10;
? ? ? ? ? ? ? ? console.log(a)
? ? ? ? ? ? }
? ? ? ? ? ?fn()
得到10
27.
注意问题：
1.
var b;
console.log(b);
不会出错，但打印出undefined
如果只有一条console.log(b);语句，会报错，b 没有定义
2.
变量会把声明提升到整个作用域的最前面，赋值还是在原来的位置
如
console.log(a);
var a=100;
不会出错，而是等价于
var a;
console.log(a);
a=100;
由于代码从上到下执行，所以得到
undefined
3.
全局变量和局部变量同时存在时，局部变量生效
如
var a=1;
function fn(){
console.log(a);
var a='hello';}
fn()
得到undefined
改为
? ? ? var a=1;
? ? ? ? function fn(){
? ? ? ? ? ? var a='hello'
? ? ? ? ? ? console.log(a);
? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ? fn();
得到hello
4.
没有声明的变量，作用域是赋值以后生效（不建议写）
5.
function fn(){
此处的代码，使用函数fn()的时候生效
a=100;
}
fn()如果没有此语句，则报错
console.log(a);
得到100
28.
dom元素的控制
?<button id="btn">按钮</button>
?<script>
数组存储的就是一组数据
var list=['a','b','c','d']双引号也可以
获取数据的某一个元素，数组名字[下标]，下标从0开始
console.log(list[2]);
得到c
数组长度，数组名字.length
console.log(list.length);
得到4
通过id名获取标签document.getElementById('id名')
var tag=document.getElementById('btn');
事件的结构，获取标签.on+事件类型（click)=function(){执行的代码}
tag.οnclick=function(){
修改内容，获取标签.innerHTML='修改的内容'
tag.innerHTML='点过了';
产生随机数 Math.random() 产生0-1之间的随机数，含0不含1
console.log(Math.random())；
定时器 setInterval(function(){每隔一段时间，执行代码}，时间ms)
定时器可以叠加
? setInterval(function(){
? ? ? ? ? ? ? ? ? ? console.log(Math.random())
? ? ? ? ? ? ? ? ? ? var n=parseInt(Math.random()*list.length);
? ? ? ? ? ? ? ? ? ? tag.innerHTML=list[n];
? ? ? ? ? ? ? ? },1000)
? ? ?}
?</script>
获取标签
1.
id名相当于身份证，是唯一的，命名规则和类名一样
2.
通过id名获取标签，多个id，只能识别第一个
3.
获取标签的html(标签开始和结束中间的内容称为标签的html）如获取标签.innerHTML
4.
修改标签的html 获取标签.innerHTML='修改的值'，如tag.innerHTML='修改啦';
5.
例子：点击按钮以后，交换p和button的内容.
<button id="btn">你好</button>
<p id="txt">哈哈</p>
<script>
?var tag=document.getElementById('btn');
? var txt=document.getElementById('txt');
tag.onclick=function(){
var a=tag.innerHTML;//把tag的html获取出来，赋给a；
var b=txt.innerHTML;
tag.innerHTML=b;//修改tag的html
txt.innerHTML=a;
以上代码等价于
?var a=tag.innerHTML;
? ?tag.innerHTML=txt.innerHTML;
? ? txt.innerHTML=a;
6.
注意：通过标签名获取标签document.getElementsByTagName('标签名') 得到的是一个类数组
不能直接进行控制，即不能这样写tags.innerHTML='修改啦'，即使只有一个，也只能选择到具体的某一个，如 tags[i].innerHTML='修改啦'，数组[下标]
如
把<ul >
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li></li>
? ?? ? ? ??
? ? ? ? </ul>
每一条都变成修改啦，则需要用到遍历，
var tags=document.getElementsByTagName('li');
for(var i=0(因为数组下标是从0开始的）;i<tags.length;i++){
tags[i].innerHTML='修改啦';//当i=0，tags[0]即第一个变为修改啦
}
同样道理的有
?// a.children选择a的子级 得到的是一个类数组，不能直接进行控制既是不能写成,，即使只有一个也不可以写成tags.style.color='red'；
如
?var box=document.getElementById('box');
var tags=box.children;
7.
获取标签的CSS
获取标签.style.css样式(css样式书写方式和之前一样，只是如果样式带有中横线，去掉中横线，中横线后的首字母大写）='值';
如
var btn=document.getElementById('btn');
tags.οnclick=function(){
this.style.color='red';//this代表用户当前操作的标签，一般用在事件的内部。可以用btn.style.color='red';
btn.stye.fontSize='100px';
8.
控制标签属性
修改属性 获取标签.setAttribute('属性','值')
获取属性 获取标签.getAttribute('属性')
9.
<标签 k="v" k="v"></标签>所有放置在标签后面的，都称为标签属性。
10.
例子：
<style>
div{
}
.box1{
color:red;
}
</style>
<body>
<div id="box"></div>
<img src="01.png" alt="" id="pic">
<script>
var box=document.getElementById('box');
var pic=document.getElementById('pic');
鼠标移入box发生的事件
box.onmouseenter=function(){
this.setAttribute('class','box1')//this可以改为box,class是指box1的属性是个类，box1是自定义的，不需要是标签的属性值,此语句是修改box的样式（即属性）
}
鼠标移出box的事件
box.onmouseleave=function()
{
alert(pic.getAttribute('src'))//移出提示图片，此语句是获取属性src.
}
11.
遍历标签，绑定点击事件
?for(var i=0;i<tags.length;i++){
? ? ? ? ? ? ? ? tags[i].οnclick=function(){
?this.style.color='red';
}
注意：点击的时候，for循环已经执行完毕，i的值是tags.length
所以不可以把this改为tags[i].style.color='red';this在事件中代表用户当前操作的标签。
14.
获取src属性
var src=this.getAttribute('src');
15.
因为body是唯一的，所以用document.body选择body标签
修改body的css样式
?document.body.style.background='url('+src+')';
16.
在js中，单引号和双引号的用法一模一样，单引号内部不能放单引号，只能放双引号，双引号内部只能是单引号。
17.
display:block;//显示标签的时候，看标签的性质。由于点击选项卡头部时，获取到显示的内容
18.
自定义标签属性
lis[i].setAttribute('ccq','i')
获取自定义属性
var index=this.getAttribute('ccq')
19.transform:translate(-50%,-50%);
translate如果移动是百分比，参照物是自身
20.
模板字符串用来常量和变量拼接，使用反引号包裹(英文状态下的1左边的键)，遇到变量用${},如 `常量${变量}常量`
如?document.body.style.background=`url(${src})`;
21.
可以通过on+事件类型 属性绑定事件（即<span οnclick="del(this)">x</span>），点击以后执行del方法内部的代码，this代表当前操作的标签
22.
b.parentNode.removeChild(b)删除b标签，a是b的父级
a.parentNode选择a的父级，得到的是唯一的。
23.
追加
a.appendChild(b)把b追加到a内部的后面
a.parentNode.insertBefore(b,a)//把b追加到a的同级之前
如wrap.insertBefore(tag,wrap.children[0]);
24.
控制表单元素的值
获取值 获取标签.value
修改值 获取标签.value='值'
25.
表格
1.合并边框
table{
border-collapse:collapse;
}
2.
table实现表格，tr实现一行的效果，td实现一列的效果
3.
类名可以相同。id名不可以
4.
checked选框选中
?<input type="checkbox" class="select">
5.
在全选中，类名一样
通过类名获取标签：
var tags=document.getElementsByClassName('select')
6.
在反选中，需要获取值取反以后重新赋值，才能达到反选的效果
如
fan.οnclick=function(){
for(var i=0;i<tags.length;i++){
?tags[i].checked= !tags[i].checked；
}
全不选,获取标签.checked=true选中，false不选中
btn.οnclick=function(){
box.checked=false;
}
6.
?社区方法
? ? ? ? 属性控制（例子淡入淡出中可见）
? ? ? ? ? ? 修改/新增 ?获取标签.属性(和标签中书写方式一样，除了class书写为className)='值'
? ? ? ? ? ? 如tags[i].checked=false; tags[j].className='';tags[num].className='current';/
? ? ? ? ? ? 获取属性的值 ? 获取标签.属性
? ? ? ? ? ? ?alert(pic.src);
? ? ? ? 通过id名获取标签 ?直接选中id即可(id名需要和变量名命名规则一样)
非社区方法：
?控制标签属性
? ? 修改属性 获取标签.setAttribute('属性','值')
? ? tags[j].setAttribute('class','');tags[num].setAttribute('class','current');
? ? 获取属性 获取标签.getAttribute('属性')
? ? alert(pic.getAttribute('src'))
7.
translateX设置百分比，参照物是当前标签的宽度
8.
ul的子级只能是li，li的父级只能是ul或者ol
9..
定义一个对象,用花括号括起来，，把事物的属性和行为提炼出来
var stu={
//k:v k代表的是属性，v代表的是值
name：'ccq',
age:12,
score:[80,90],
eat:function(){
alert('你吃饭了吗')
}
}
10.
克隆标签
var list=[{
title:'这是口红',
con:'299'
}]
for(var i=0;i<list.length;i++){
var tag=wrap.children[0].cloneNode(true);
if(i==0){
wrap.innerHTML='';
}
tag.children[0].innerHTML=list[i].title;
tag.children[1].innerHTML=list[i].con;
11.
a.cloneNode()克隆a标签，如果不带参数，不克隆内容，加true克隆内容
12.
console.log(encodeURI(box));?? ?//只编码了中文
? ? ? ? ? ? console.log(encodeURIComponent(box));//特殊字符和中文编码了
?eval()把可执行的字符串转化为js
13.
?// 获取当前客户端日期
? ? ? ? ? ? var d=new Date();
14.
程序中的月份只有0-11月份
例子：计算当天离2021年10月1日还有多少天
?
var d=new Date();
var date = new Date(2021,9,1);
?var t=parseInt((date.getTime()-d.getTime())/ (24 * 3600 * 1000))//计算2021,10,1到今天的天数，通过毫秒进行计算，除以1000得到秒，除以60得到分，除以60得到时，除以24得到天
15.
? // 可以放置指定时间的毫秒数
?var m=new Date(110254671000)
.16.
星期几是getDay
计算110254671000的年-月-日 时-分-秒
var m=new Date(110254671000);
date.innerHTML=`${m.getFullYear()}-${m.getMonth()+1}-dd hh:mm:ss`;
17.
confirm确认框，点击确认返回true 否则false
? ? ? ? ? ?if(confirm('您确认关闭嘛')){
? ? ? ? ? ? ? ?alert('关闭窗口')
? ? ? ? ? ?}
18.
//history.go(1)指的是返回上一个页面,go(-1)下一个页面
<button οnclick="history.go(1)">history</button>
19.
点击按钮跳转页面
<a href="地址">按钮</a>
20.
使用isNaN()判断一个变量是否是NaN
var m=parseInt(txt.value);
if（isNaN(m)){
alert('请输入数值类型')
}
21..
跳转页面
<button οnclick="location.assign('跳转的页面地址')">assign</button>
替换页面，不能返回
<button οnclick="location.replace('替换的页面地址')">assign</button>
<button οnclick="location.reload('')">assign</button>
22.
<button οnclick="window.moveBy(20,20)">按钮</button>
23.
<button οnclick="window.open('地址','zshmiao','width=500,height=300,scrollbars=no,directories=no ')">打开窗口</button>
<!-- 第三个参数，限制新打开窗口的形态 ，只有宽和高有用 -->
24.
? ? ? ? // setTimeout(function(){},时间) ?clearTimeout()单次定时器
? ? ? ? ?function fn(){
? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? console.log(111)
? ? ? ? ? ? ? ? ?// ?函数内部调用自身，函数的递归调用
? ? ? ? ? ? ? ? ? ?fn()
? ? ? ? ? ? ? ?},1000)
? ? ? ? ? }
? ? ? ? ? fn()
总结：
获取标签
????通过id获取标签:
????通过类名获取标签:
????var?box=document.getElementById('box');
????var?tags=document.getElementsByTagName('li');
控制标签的html?
????获取标签的html?
????tag.innerHTML
????修改标签的html?
????tag.innerHTML='你好'
修改标签的css(样式)
tag.style.color='red';
btn.style.fontSize='100px';
document.body.style.background='url('+src+')';
控制标签的属性
????获取标签的属性
????tag.getAttribute('属性')
????修改标签的属性
????tag.setAttribute('属性','值')
社区方法：
tag.属性=‘值’
事件结构
获取标签.on+事件类型=function(){}
this
代表用户当前的操作。
?
|