&& JS的基本使用

最新推荐文章于 2023-08-17 14:13:39 发布

沉迷学习一一无法自拔

最新推荐文章于 2023-08-17 14:13:39 发布

阅读量539

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/tangxueqin/article/details/78925593

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.js的基本属性

找控件id:

var a1=document.getElementById("uname").value;

弹框：

alert("用户名密码不能为空");

打印：

document.write("<p style='color: red;'>你好</p>");//输出内容到网页

console.log("用户名："+a1+"密码"+a2);

2.js的外部引入样式

html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="new_file.js">
		</script>
	</head>
	<body>
		姓名：<input type="text" value="糖糖" id="uname" /><br />
		密码：<input type="password" value="" id="pwd" /><br />
		
		<input type="button" value="登录" οnclick="login()"/>
	</body>
</html>

js文件：

function login(){
				//获取输入框的值，判断是否为空，弹框提示
				var a1=document.getElementById("uname").value;
				var a2=document.getElementById("pwd").value;
				if(a1==""||a2==""){
					alert("用户名密码不能为空");
				}else{
					console.log("用户名："+a1+"密码"+a2);
				}
				
				
			}

2.js的内嵌样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 定义函数  function 函数名 */
			function login(){
//				<!--1 获取输入框的值  2 判断是否为空  3 弹框提示 -->
				var a1= document.getElementById("uname").value; //获取输入框--->获取框中的值 value
				if(a1==""){
					alert("请输入用户名");
				}else{
					console.log("用户名:"+a1);   //system.out.println();
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="uname" value="赵丽颖" /><br />
		<input type="button" value="登录" οnclick="login()" /> 
	</body>
</html>

4.将字符串转为int类型

var num1= document.getElementById("num1").value; //从框中获取字符串类型
var num2= document.getElementById("num2").value;
var num=parseInt(num1)+ parseInt(num2); //把字符串转为int类型

5.循环for in

for(var i in stus){ //i 每个索引值 stus为数组名}

6.数组

var stus = ["王文达", "王文生", "王文倩", ""];

//数组里是对象

var stus2 = [{
name: "赵丽颖",
age: 30,
sex: "女"
}, {
name: "王丽坤",
age: 33,
sex: "女"
}];

//向数组里添加对象

stus2.push({name:name1,age:18,sex:"女"});

//获取数组中的值

for(var i in stus){
console.log(stus[i]);

}

//获取数组（数组中对象）中的值

for(var i in stus){
console.log(stus[i].name+""+stus[i].age+" "+stus[i].sex);

}

7.节点查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{margin-left: 30px;display:inline}
		</style>
		<script>
			function data(){
				var e=document.getElementById("box");//找id
				var e_ck=document.getElementsByName("ck");//找name,可以通过相同name属性统一设置选中
				for(var i in e_ck){//for in 循环
					var e_input=e_ck[i];//获取到的每一个复选框
					e_input.checked=e.checked;//设置选中  且与全选的复选框相同
					
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" οnchange="data()" id="box"/><p>全选/不全选</p><br />
		<input type="checkbox" name="ck"/><p>看书</p><br />
		<input type="checkbox" name="ck"/><p>看电影</p><br />
		<input type="checkbox"  name="ck"/><p>打篮球</p><br />
	</body>
</html>

沉迷学习一一无法自拔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
&& JS的基本使用

1.js的引入样式html文件：姓名：密码： js文件：function login(){ //获取输入框的值，判断是否为空，弹框提示 var a1=document.getElementById("uname").value; var a2=document.getElementById(
复制链接

扫一扫