java script

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量158 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38394991/article/details/102688310
版权

1：定时器
Window 对象方法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

HTML DOM Style 对象

document.getElementById("id").style.property="值"
  • 属性:就是css中属性 css属性有"-" 例如:backgroud-color，若有"-" 只需要将"-"删除,后面第一个字母变大写即可

点击按钮，触发事件，对div标签进行修改

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function clic()
			{
				var obj =  document.getElementById("divid0");
				obj.style.backgroundColor="aqua";
				obj.style.border="1px solid red";
				obj.style.width="100px";
				obj.style.height = "100px";
			}
		</script>
	</head>
	<body>
		<input type="button" value="修改div标签样式" onclick="clic()" />
		<div id="divid0"></div>
	</body>
</html>

body加载成功则执行函数init() 使用onload

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function init()
			{
				alert(1);
			}
		</script>
	</head>
	<body id="bid" onload="init()">
	</body>
</html>

window对象加载成功

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//window.οnlοad==onload 可以省略window
			window.onload=function()
			{
				alert(1);
			}
		</script>
	</head>
	<body>
	</body>
</html>

打开页面4秒后弹出页面，显示两秒后，关闭，执行三次

<body>
		<div id="ad" style="width:100%;display: none;">
			<img src="../img/ad_.jpg" width="100%" />
		</div>
</body>

<script>
		var i = 0;
		var timesetterid;
		onload=function()
		{
			timesetterid = setInterval(showad,4000);
		}
		function showad()
		{
			i++;
			if(i==3)
			{
				//清空要带上setInterval(showad,4000)的名字
				clearInterval(timesetterid);
			}
			var divobj = document.getElementById("ad");
			//block展示图片
			divobj.style.display="block";
			setTimeout(hidead,2000);
		}
		function hidead()
		{
			var divobj = document.getElementById("ad");
			divobj.style.display="none";
		}
	</script>

bom(浏览器对象模型)
所有的浏览器都有5个对象:window:窗口,location:定位信息 (地址栏),history:历史,screen,Navigator
通过window可以获取其他的四个对象 eg:window.location 等价域 location
常用的方法
消息框

  • alert("…"):警告框

  • confirm(“你确定要删除吗?”):确定框 返回值:boolean

  • prompt(“请输入您的姓名”):输入框 返回值:你输入的内容

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var flag = confirm("确定删除吗");
			alert(flag);
			var reslut = prompt("请输入你的姓名");
			alert(reslut);
		</script>
	</head>
	<body>
	</body>
</html>

open和close

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function openA()
			{
				open("a.html");
			}
		</script>
	</head>
	<body>
		<input type="button" value="open" onclick="openA()" />
	</body>
</html>

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function closea()
			{
				close();
			}
		</script>
	</head>
	<body>
		我是A页面
		<input type="button" value="close" onclick="closea()" />
	</body>
</html>

location:定位信息

  • location.href; 获取url

  • location.href="…";设置url 相当于 a标签

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//获取url
			var u = window.location.href;
			alert(u);
			//设置url
			function seturl()
			{
				location.href="../mywindow/打开和关闭.html";
			}
		</script>
	</head>
	<body>
		<input type="button" value="设置url" onclick="seturl()" />
	</body>
</html>

history:历史

  • back();后退
  • forward():向前
  • ★go(int) go(-1) 相当于 back() go(1) 相当于 forward()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		我是A页面<br />
		<a href="b.html">A页面</a>
	</body>
</html>

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function houtui()
			{
				history.go(-1);
			}
		</script>
	</head>
	<body>
		我是b页面
		<input type="button" value="后退" onclick="houtui()" />
	</body>
</html>

得到焦点时，将用户名输出到span中
输出焦点时，将用户名输出到span中
onfocus
onblur

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function getFous()
			{
				var user =  document.getElementById("username");
				//给span填写内容
				document.getElementById("spanid").innerHTML=user.value;
			}
			function loseFocus()
			{
				var user =  document.getElementById("username");
				document.getElementById("spanid").innerHTML=user.value;
			}
		</script>
	</head>
	<body>
		用户名:<input name="" value="tom" onfocus="getFous()" onblur="loseFocus()" id = "username" /><br />
		<span id="spanid"></span>
	</body>
</html>

案例2-表单校验plus

  • 需求:提示信息不用弹出框,将信息追加在文本框后面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function loseFocus(obj)
			{
				var use = document.getElementById(obj);
				if(use.value==""||use.name==null)
				{
					document.getElementById("username_msg").innerHTML="用户名不能为空";
				}
				else{
					document.getElementById("username_msg").innerHTML="";
				}
			}
		function checkForm(){
			var flag = true;
			
			//1.获取用户名和密码里面输入的内容
			var usernameValue=document.getElementById("username").value;
			var passwordValue=document.getElementById("password").value;
			if(usernameValue==null||usernameValue=="")
			{
				document.getElementById("username_msg").innerHTML="<font color='red'>用户名不能为空</font>" ;
				flag=false;
			}
			else
			{
				document.getElementById("username_msg").innerHTML="";
			}
			if(passwordValue==null||passwordValue=="")
			{
				//将span中的内容变成密码不能为空
				document.getElementById("password_msg").innerHTML="密码不能为空";
				document.getElementById("password_msg").style.color="red";
				flag=false;
			}
			else
			{
				document.getElementById("password_msg").innerHTML="";
			}
			
			return flag;
		}
		</script>
	</head>
	<body>
		<form action="#" method="get" onsubmit="return checkForm()">
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					//使用this关键字传参
					<td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.id)" "></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repassword" id="repassword"></td>
					<td><span id="repassword_msg"></span></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
					<td><span id="email_msg"></span></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男"> 男
						<input type="radio" name="sex" value="女" />女
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<input type="text" name="birthday">

					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkcode">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

事件总结:
常见的事件:

  • 焦点事件:★onfocus， onblur

  • 表单事件:★on submit ，onchange 改变

  • 页面加载事件:★ onload

  • 鼠标事件(掌握) onclick
    案例3-隔行换色

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//windows的onload事件 以前是在body中加上 onload  = “setcolor（）”
			
			window.onload = function()
			{
			//获取一堆对象，以前是getElementById获取一个
			//然后调用其中的style属性
			
				var arr =  document.getElementsByTagName("tr");
				for(var i = 0;i<arr.length;i++)
				{
					if(i%2==0)
					{
						arr[i].style.backgroundColor="aqua";
					}
					else
					{
						arr[i].style.backgroundColor="chartreuse";
					}
				}
			}
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			
			<tr style="background-color: #999999;">
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

案例4:全选或者全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function selectAll(obj)
			{
				//获取最上面的复选框的状态
				var flag = obj.checked;
				//获取所有的对象 ，上一个例子是通过tag标签来获取，这个是通过class标签获取
				var  arr =  document.getElementsByClassName("itemSelect");
				for(var i = 0;i<arr.length;i++ )
				{
					arr[i].checked = flag;
				}
				
			}
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
			</tr>
			<tr>
				<th><input type="checkbox" onclick="selectAll(this)" ></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

dom(文档对象模型)
在这里插入图片描述
dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节 点 element
属性节点 attribute
文本节点 text
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById(“id值”):获取一个特定的元素
document.getElementsByTagName(“标签名”):通过标签名获取一种元素(多个)
document.getElementsByClassName(“class属性的值”):通过class属性获取一类元素(多个)
document.getElementsByName(“name属性的值”):通过name属性获取一类元素(多个)
设置获取获取节点的value属性
dom对象.value;获取
dom对象.value="";设置
设置或者获取节点的标签体
dom对象.innerHTML;获取
dom对象.innerHTML="";设置
获取或者设置style属性
dom对象.style.属性;获取
dom对象.style.属性="";设置
获取或者设置属性
dom对象.属性

六公里路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java怎么改背景颜色_如何使用JavaScript更改背景颜色？
weixin_32432759的博客
02-27 2366
回答(17)2 years ago修改JavaScript属性 document.body.style.background .例如：function changeBackground(color) {document.body.style.background = color;}注意：这确实取决于您的页面如何组合在一起，例如，如果您使用具有不同背景颜色的DIV容器，则需要修改其背景颜色而不是文...
Java Script入门
qq_47560372的博客
08-05 2270
Java Script：脚本语言，可插入HTML界面的编程代码，写一些动态事件。
java 脚本如何编写的_java – 如何编写init脚本
weixin_34637857的博客
02-16 134
这里有一个很好的指南：http://www.novell.com/coolsolutions/feature/15380.html我建议看一下tomcat startup.sh和shutdown.sh脚本,然后修改the following init.d script：@H_502_3@#!/bin/bash## tomcat## chkconfig:# description: Start u...
java script更改颜色代码_抛砖引玉 - 利用Cmder对本地Java运行时环境的切换应用
weixin_32600979的博客
01-21 212
多版本环境做开发的朋友大多数都会有多个环境的切换困扰。通常一个好的运行时环境能有一个好的版本管理器比较重要。就譬如NodeJs的nvm - 虽然这也是因为Node的版本升级实在太快，不得不出这么一个（不然就是噩梦）。但是相对来说向前兼容性比较强的Java环境来说，这种需求不是很突出。所以这类版本管理在Java环境中就不是很常用。不过相对于比较滞后的企业应用，Oracle对JDK的不断升级迭代，很多...
javascript设置颜色值的几种方法
qq_37198814的博客
08-24 2万+
一、网页中设置颜色值的几种方法 1、英文命令颜色 p{color:red;} 2、RGB颜色 这个与 `photoshop` 中的 `RGB` 颜色是一致的，由 `R(red)`、`G(green)`、`B(blue)`三种颜色的比例来配色。如： p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：`...
java中init()和clinit()方法的区别
热门推荐
聆听你的心声
09-15 2万+
：在jvm第一次加载class文件时调用，包括静态变量初始化语句和静态块的执行 :在实例创建出来的时候调用，包括调用new操作符；调用Class或java.lang.reflect.Constructor对象的newInstance()方法；调用任何现有对象的clone()方法；通过java.io.ObjectInputStream类的getObject()方法反序列化。 （1）(
java script error_java script error 错误解决方法
weixin_42662171的博客
02-15 6581
用了动易这么久了，有时一不小心改错模版文件或者 修改相关的JS，就会导致页面出现一些奇怪了 的弹出框 说什么 java scripterror 错误,烦死了。今天特别研究了下，找到了解决这类问题的办法，跟大家分享一下。很多朋友在使用动易系统建站时可能遇到过一个很头痛的问题：打开网页，时不时地会跳出一个讨厌的java scripterror错误提示框，而且原因非常复杂，有时很难找到解决问题的头绪，令...
Java script didnkekdjwb
08-02
Java script didnkekdjwb
Java Script教程
05-19
在"Java Script教程"中，我们将深入探讨这一强大的工具，帮助初学者快速入门并掌握其核心概念。 首先，JavaScript与Java并无直接关系，尽管它们名字相似。JavaScript主要由Brendan Eich在1995年为Netscape ...
js中clearInterval的重新执行/重新开始
lishirong_李世荣的专栏
12-02 1万+
问题描述:系统进入页面，可以通过setInterval的方式进行定时执行某一个任务，当使用clearInterval之后需要再次调用setInterval，却不能够再次让setInterval执行的函数再次执行，本篇日志中，没有使用clearInterval，但也几乎实现了clearInterval的功能。希望能帮助到大家。String path = request.getContextPath(
JavaWeb 注册表单验证
桃子味的梨
02-15 864
表单 <!--注册表单--> <form id="registerForm" action="user"> <!--提交处理请求的标识符--> <input type="hidden" name="action" value="register"> <table style...
javascript——js前台用户注册页面校验
ustcyy91的博客
07-08 2324
1.javascript 和java不是一家公司开发的 2.javascript 是一种弱类型  全部用var  不分整型 浮点型等 3..javascript是基于对象（一切皆对象） java是面向对象 实例 js前台用户注册页面校验： <form id="registerForm" action="${ pageContext.request.contextPath }/use
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 347
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 289
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
.eslintrc.js 有什么作用
weixin_64684095的博客
08-08 285
可以启用、禁用或修改特定的 ESLint 规则，以适应项目的特定需求和编码风格。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 296
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 368
注释很详细，直接上代码……
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 421
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
java Script
01-30
JavaScript的语法风格与Java相似，但它并不是Java的产品。JavaScript不仅可以在浏览器环境中使用，还可以在其他非浏览器环境中使用。 JavaScript是一种多范式的语言，支持原型编程、面向对象、命令式、声明式和函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值