JavaScript学习

1.在行内加载js语句

<input type="checkbox" id="a1" value="吃" onchange="getEat()" />

2.在文档内部嵌入

<script type="text/javascript">
	//js代码
	alert('ok');
</script>

3.在外部引入

<!-- 引用外部js文件 -->
<script src="js/js1" type="text/javascript" charset="utf-8"></script>

4.产生随机数

Math.random()

5.== 和 === 的区别

let a=19
let b=19
let c='19'
console.log(a == b) //true
console.log(a == c) //true
console.log()
console.log(a === b) //true
console.log(a === c) //false
// == 和 === 区别
// == 判断内容是否相等
// === 判断内容和数据类型是否相等

6.获取和插入元素内容

let value=document.getElementById("title").innerText
document.getElementById("title").innerText=value

7.返回数据类型

console.log(typeof(flag))//boolean

8.创建数组

//定义数组y
let array=new Array(1,2,3,4,5,6)
//定义数组
let a=[1,2,3,4,5,6,7,8,9,10]

9.赋的值决定数据类型

var name="李明"
let age =19
let address='沈阳aishgn'
let weight=77.5
let flag=true
let flag2=2>3

10.js的加强for循环

let a=[1,2,3,4,5,6,7,8,9,10]
a.forEach(function(obj,index){
console.log(obj,index)
	sum+=obj
})

11.普通for循环

for(let i=0;i<a.length;i++)
{
		sum+=a[i]
		
}

12.while循环

while(i<=10)
{
		console.log(i);
		i++;
}

13.do while循环

//do while
let k=5
do
{
	console.log(k)
	k++
}
while(k<=10)

14.字符串数字转int 和float

console.log(parseInt(age)+100)
parseFloat(age)+100

15.通过页面弹窗输入完成页面赋值

//输入：完成变量赋值
let name=prompt("输入姓名")
let age=prompt("输入年龄")
console.log(name,age)

16.无参方法函数

//无参
function show()
{
	console.log("测试-show函数")
}
//调用show
show()

17.有参方法函数

//有参数，有返回值
function add(a,b)
{
	return a+b
}

18.数组添加值

let a=[1,2,3]
//给数组添加一个单元的值
a[3]=100
a.push(200)

19.字符也是字符串

let c='19'

20.取元素的(内容)的值

let value=document.getElementById("title").innerText
console.log(value)

21.取元素的(内容,标签)的值

let value=document.getElementById("title").innerHTML
console.log(value)

22.得到DOM对象数组

//document 表示当前文件
//document.getElementsByTagName("p") 取当前文件中所民name=c的元素,
//得到是数组
let p=document.getElementsByName("c")
for(let i=0;i<p.length;i++)
{
	console.log(p[i].innerText)
}

23.window可省

window.alert("OK") //小窗口
alert("OKOK")//推荐 

24.判断是否是数字

if(isNaN(age))
{
	alert('不是数字')
}

25.取表单元素

<input  type="text" id="xm" value="mike"/>
//表单元素(组件)才有value属性
//非表单元素没有value属性
//取当前元素id=xm的value属性的值
let xm=document.getElementById("xm").value

26.取非表单元素

<h1 id="title">
	<span style="color:red;">
		今天学习js基础
	</span>
</h1>
let value=document.getElementById("title").innerText
console.log(value)

27.点击事件

<!-- onclick="getText()" onclick是点击事件, 点击按钮会触发onclick事件,在事件中调用函数 -->
<input type="button"  value="取p元素name=c(内容)值" onclick="getText()"/>
function getText(){}

28.页面取值都是字符串，小心“+”号

//页面上取的内容都是字符串
//转成float
sum=parseFloat(p1.value)+parseFloat(p2.value)

其他运算符能自动识别数字

sum=p1.value-p2.value
sum=p1.value*p2.value
sum=p1.value/p2.value

29.回退和前进

<a href="javascript:history.go(-1)">回退</a>
//回退1步
history.go(-1)
//表示前进一步
//history.go(1)

30.超链接跳转

<a href="javascript:;" onclick="login()">登录</a>
let name=document.getElementById("uname").value
let upwd=document.getElementById("upwd").value
if(uanme=='admin'&&upwd=="admin")
{
	//跳转地址
	location.href='success.html'
}

31.取消超链接

<a href="http://www.baidu.com">百度1</a>
<!-- 取消超链接：不推荐这个写法 -->
<a href="#">百度2</a>
<!-- 取消超链接 -->
<a href="javascript:void(0)">百度3</a>
<!-- 取消超链接，推荐使用这种 -->
<a href="javascript:;">百度4</a>

32.延迟执行方法

//1000毫秒=1秒
//1秒执行一次show函数
setTimeout("show()",1000)

33.onchange事件

吃<input type="checkbox" id="a1" value="吃" onchange="getEat()" />
function getEat()
{
	let a1=document.getElementById("a1")
	//判断是否选中
	if(a1.checked)
	{
		console.log(a1.value)
	}
}

34.键盘事件

数1：<input type="text" id="p1" onkeydown="calc()" />
数2：<input type="text" id="p2" onkeyup="calc()" />

35.注册onclick事件

//id=btn2按钮注册onclick事件
document.getElementById("btn2").onclick=function(){
alert('确定按钮2')
}

36.获取时间

let date=new Date()
let y=date.getYear()+1900//年从1900
let m=date.getMonth()+1//月 0-11（1-12）
let d=date.getDate()//天
let h=date.getHours()//小时
let mm=date.getMinutes()//分
let ss=date.getSeconds()//秒
document.getElementById("time").innerText="北京时间："+y+"-"+m+"-"+d+" "+h+":"+mm+":"+ss

37.给属性赋值

//给id=img1元素的src属性赋值
document.getElementById("img1").src='images/'+i+'.jpg'},1000)

38.定时调用函数

op=setInterval(function(){
let i=parseInt(Math.random()*30)+1//产生1-30之间的随机数
//给id=img1元素的src属性赋值
document.getElementById("img1").src='images/'+i+'.jpg'
},1000)

39.清除定时器

<input type="button" value="开始" onclick="start()" />
<input type="button" value="停止" onclick="stop()" />
function stop(){
clearInterval(op)
}

40.连接字符串

//定义数组并初始化
let a=[1,2,3,4,5,6,7]
//let s=a.join()//默认以","连接成字符串的

41.拆分字符串，形成新的数组

//拆分字符串，以“#”分割的
let c=s.split("#")
console.log(c)

42.删除部分数组

//定义数组并初始化
let a=[1,2,3,4,5,6,7]
//删除:从指定位置 删除一个长度
//a.splice(位置从0开始,长度)
//a.splice(1,1)
a.splice(1,2)

43.查询字符串子串位置

//查询子串在字符串中位置，如果存在返回位置（从0开始），否则返回-1
index=name.indexOf("y")
console.log(index)

44.表单验证函数

<form action="作业3.html" onsubmit="return formValidate()" method="get">

//表单验证函数
function formValidate()
{
	//取id=xm元素
	let xm=document.getElementById("xm")
	let mm1=document.getElementById("mm1")
	let mm2=document.getElementById("mm2")
	let nl=document.getElementById("nl")
	let email=document.getElementById("email")
	
	//判断
	if(xm.value=='')
	{
		alert("姓名不能为空")
		return false//表示 表单不提交
	}			
}

45.鼠标光标聚焦和选中

price.focus() //获取焦点
price.select() //选中