Java进阶-2.css和js

最新推荐文章于 2023-01-09 17:25:02 发布
最新推荐文章于 2023-01-09 17:25:02 发布
阅读量356 收藏 2
点赞数
分类专栏： Java 文章标签： javaee css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25560849/article/details/103531177
版权

一、css

1.div：块标签

<div>独自占一行，会自动换行，span：行内的块标签，不会自动换行。

<span style="font-size: 4cm;color: #ffff00;"> 天佑中华</span>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>天佑中华</div><div>天佑中华</div><div>天佑中华</div>
		<hr />
		<span>天佑中华</span><span>天佑中华</span><span>天佑中华</span>
	</body>
</html>

2.css：层叠样式表

作用：渲染页面，提高工作效率

格式：选择器{属性1:值1;属性2:值2;}

后缀名：.css 独立的css(样式)文件

3.css和html元素的整合

方式1：内联样式表，通过标签的style属性设置样式

        <xxx style="..."/>

方式2：内部样式表，在当前页面中使用的样式，通过head标签的style子标签导入

        <style>

            #divId2{

                background-color: #0f0;

            }

        </style>    

方式3：外部样式表，有独立的css文件

    通过head标签的link子标签导入，<link rel="stylesheet" href="css/1.css" type="text/css"/>

创建1.css文件，输入

#divId3{
	background-color: #00f;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#divId2{
				background-color: #0f0;
			}
		</style>
		<link rel="stylesheet" href="css/1.css" type="text/css"/>
	</head>
	<body>
		<div>天佑中华</div>
		<div style="background-color: #f00;">天佑中华-内联</div>
		<div id="divId2">天佑中华-内部样式</div>
		<div id="divId3">天佑中华-外部样式</div>
	</body>
</html>

4.选择器

id选择器

html元素必须有id属性且有值，<xxx id="id1"></xxx>

css中通过"#"引入，后面加上id的值，#id1{...}

class选择器

html元素必须有class属性且有值，<xxx class="cls1"/>

css中通过"."引入，后面加上class的值，.cls1{...}

元素选择器

直接用元素(标签)名即可，例如：span{...} ，所有名为span的都会载入样式

5.派生的选择器

1）属性选择器

元素选择器的特殊用法，html元素必须有一个属性不论属性是什么且有值  <xxx nihao="wohenhao">

css中通过下面的方式使用

元素名[属性="属性值"]{....}

xxx[nihao="wohenhao"]{....}

2）后代选择器

选择器 后代选择器{...}，在满足第一个选择器的条件下找后代的选择器，给满足条件的元素添加样式。

    div span{

        font-size: 1cm;

    }

以上选择器举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#divId1{
				background-color: #f00;
			}			
			.divCls1{
				background-color:#0f0;
			}			
			span{
				background-color: #00f;
			}			
			span[att="val"]{
				background-color: #ff0;
			}
		</style>
	</head>
	<body>
		<div>天佑中华</div>
		<div id="divId1">天佑中华-id选择器</div>
		<div class="divCls1">天佑中华-class选择器</div>
		<span>天佑中华</span>
		<span>是我啊</span>
		<span att="val">天佑中华</span>
		<span>天佑中华</span>
	</body>
</html>

3）锚伪类选择器：必须保持这样的顺序

a:link {color: #FF0000}        /* 未访问的链接 */

a:visited {color: #00FF00}   /* 已访问的链接 */

a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */

a:active {color: #0000FF}    /* 选定的链接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a:link {color: #FF0000}	/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */			
		</style>
	</head>
	<body>
		<a href="#">移上来试试</a>
	</body>
</html>

4）样式优先级

若多个样式作用于一个元素的时候，不同的样式，会叠加，相同的样式，最近原则（代码近的优先）。

若多个选择器作用于一个元素的时候，越特殊优先级越高，id优先级最高。

6.属性

字体：

font-family：设置字体(隶书) 设置字体家族

font-size：设置字体大小

font-style：设置字体风格

文本：

color：文本颜色

line-height：设置行高，它是继承了height后的，例如height为90px，则设置为45px时候，就是在上半部分，如果设置为90px，则居中。

.header div{
              float:left;
              width:33.33%;
              height: 90px;
              line-height: 45px;
          }

text-decoration：向文本添加修饰，none、underline

text-align：对齐文本

列表：

list-style-type：设置列表标志的类型，a、1、实心圆

list-style-image：设置图片为列表标志类型，使用的时候使用url函数

ul li {list-style-image : url(xxx.gif)}

背景：

background-color：设置背景颜色

background-image：设置图片作为背景，使用url

尺寸：

width、height

浮动：

float：left、right  

clear：设置元素的两边是否有其他的浮动元素，值为：both，两边都不允许有浮动元素。

本来每个div会占用一行，设置了float属性之后，将会堆叠在一起，当某个div设置了clear之后，就是指其后边的元素不能再以某种方式和它堆叠在一起。

display：

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

7.框模型

一个元素外面有padding(内边距)，border(边框)，margin(外边距)。

padding：元素和border边框的距离，设置大小：padding-left:值；

margin：指的是border边框和其他元素的距离，默认会和浏览器的边框有一定的距离，因为这个距离是<body>元素里面的margin产生的。设置大小：margin-left:值；

body{

margin: 0px;

}

上面这三个属性都有简写的属性

若设置大小的时候 四个值：顺序 上右下左

        padding：10px 10px 10px 10px

若只写一个的话 代表四个边使用同一个值   padding:10px

若只写两个的话 代表四个边使用同一个值 padding:10px 20px

若只写三个的话 缺少的使用对面的值 padding:10px 20px 30px

8.border

格式    border：宽度 风格 颜色

border：5px solid red;

solid：实线、dashed：虚线、double：双实线

二、javascript

1.javascript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。javaScript与 Java 是两种完全不同的语言。

组成部分:

ECMAScript：js基础语法(规定 关键字 运算符 语句 函数等等...)

BOM：浏览器对象模型

DOM：文档对象模型

DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。Document Object Model（文档对象模型），是把「文档」当做一个「对象」来看待。在 DOM 中，文档中的各个组件（component），可以通过 object.attribute 这种形式来访问。一个 DOM 会有一个根对象，这个对象通常就是 document。

相应的，Browser Object Model（浏览器对象模型），即把「浏览器」当做一个「对象」来看待，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。而 BOM 除了可以访问文档中的组件之外，还可以访问浏览器的组件，比如navigator（导航条）、history（历史记录）等等。

BOM的内容不多，主要还是DOM。

作用：修改html页面的内容、修改html的样式、完成表单的验证。js可以在页面上直接写，也可以单独出去，js的文件的后缀名 .js，用法和css类似。

2.js和html整合

方式1：在页面上直接写，将js代码放在 <script></script>标签中，一般放在head标签中

方式2：独立的js文件，通过script标签的src属性导入<script src=""></script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			alert(12);
		</script>
		<script type="text/javascript" src="js/1.js" ></script>
	</head>
	<body>
	</body>
</html>

3.js中变量声明

方式1：var 变量名=初始化值;

方式2：var 变量名;

             变量名=初始化值;

4.js的数据类型

原始类型

  1. Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。当函数无明确返回值时，返回的也是值 "undefined"。
  2. Null类型也只有一个值 null，即它的字面量。值undefined实际上是从值null派生来的，因此 ECMAScript 把它们定义为相等的。例如：alert(null == undefined); 输出"true"。
  3. Boolean 类型有两个值 true 和 false。
  4. Number 类型，在js中任何数字都看成是Number类型，不论整数，还是浮点数，当然表示八进制首数字必须是0，十六进制使用0x开始等。数字的最大值:Number.MAX_VALUE，数字的最小值:Number.MIN_VALUE。
  5. String类型是唯一没有固定大小的原始类型，字面量是由双引号（"）或单引号（'）声明的，没有字符类型概念。String 类型还包括几种字符字面量，像转义字符。

通过typeof运算符可以判断一个值或者变量是否属于原始类型，若属于原始类型，还可以判断出属于那种原始类型

        typeof 变量|值;

若变量为null，使用typeof弹出的值 object，这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

引用类型

原始类型中的String Number Boolean都是伪对象，可以调用相应的方法。

5.Array

属性：length

alert(arr3.join("#")); 每个元素将会以#为分割
//向首位插入一个 true
arr3.unshift(true);插入到第一个
arr3.shift();删除第一个
//alert(arr3);
//排序
alert(arr3.sort());
//反转序列

alert(arr3.reverse());
arr3.pop，弹出最后一个
arr3.push，插入到最后
arr3.concat，拼接两个或者多个数组，并返回结果

6.String

语法：

new String(值|变量);//返回一个对象

String(值|变量);//返回原始类型

常用方法:

    substring(start,end)： [start，end)，包含头不包含尾

    substr(start,size)：从索引为指定的值开始向后截取几个

    charAt(index)：返回在指定位置的字符

    indexOf("")：返回字符串所在索引，只返回第一个匹配的字符

    replace()：替换

    split()：切割

常用属性：length

7.Boolean

new Boolean(值|变量);

Boolean(值|变量);

非0数字、非空字符串、非空对象，为true

8.Number

new Number(值|变量);

Number(值|变量);

null====>0

fale====>0 true====>1

字符串的数字=====>对应的数字

其他的NaN

9.Date

new Date();

常用方法:

toLocalString()

<script type="text/javascript">
var d = new Date();这里的格式不太友好
document.write(d.toLocaleString())
</script>

输出：2018年1月4日 23:39:37

10.RegExp：正则表达式

语法: 

/正则表达式/，例如：/^[a-z0-9_-]{3，16}$/

或者：

new RegExp("正则表达式")

new RegExp("正则表达式"，"参数")

参数：i:忽略大小写、g:进行全局

常用方法：test() :返回值为boolean

例如：r2.test(s)，r2为正则表达式，s为字符串

11.Math

Math.常量|方法，Math.PI、Math.random()  [0，1)

12.全局

decodeURI() 解码某个编码的 URI。          

encodeURI() 把字符串编码为 URI。           

    var s="http://www.itheima.com/你好/ 1.html";
    document.write(encodeURI(s)+"<hr/>")
    var s_="http://www.itheima.com/%E4%BD%A0%E5%A5%BD/%201.html";
    document.write(decodeURI(s_))

13.eval

提取JavaScript 字符串，并把它作为脚本代码来执行。

例如：s="alert('hello')";

      eval(s);

三、事件函数

1.js事件声明

js事件在下文的dom对象中统一介绍。

方式1:

    function 函数名(参数){

        函数体;

    }  

方式2:

    var 函数名=function(参数){

        函数体;

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function add(a,b){
				alert(a+b);
			}
            add(2,20);
		</script>
	</head>
	<body>
	</body>
</html>

不需要定义返回的类型，直接添加return语句就可以返回。

匿名函数，window.οnlοad=function(){};

注意：函数声明的时候不用声明返回值类型，参数列表上不要写参数类型，通过return结束方法和将值返回。

2.标签事件和函数的绑定

方式1：通过标签

通过标签的事件属性：<xxx onclick="函数名(参数)"></xxx>，当点击标签的时候就会触发函数。

参数若是：this 将当前的dom对象传递给函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function btnclick() {
            alert("hhh")
        }
    </script>
</head>
<body>
    <input type="button" value="请点击" onclick="btnclick()">
</body>
</html>

方式2：给元素派发事件

第一种：document.getElementById("id值").οnclick=function(参数){....}，注意没有函数名，是匿名函数。

第二种：document.getElementById("id值").οnclick=函数名，函数再另外编写。

function init(){
    document.getElementById("btn2").onclick=btn2cli;
}

var btn2cli=function(){
    alert("244944");
}

注意：内存中应该存在该元素才可以派发事件，即需要先从上到下，将页面加载完毕，因此事件的绑定必须在页面加载之后进行，可以通过以下2个方式。

a.将方式2的js代码放在html页面的最下面。

b.在页面加载成功之后再运行方式2的js代码，例如：<body οnlοad="init()">。

四、BOM(浏览器对象模型)

所有的浏览器都有5个对象，即操作浏览器的动作

window：窗口

location：定位信息 (地址栏)

history：历史

Navigator：浏览器的信息，版本、名称等

Screen：操作屏幕，基本不用

1.window对象

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。通过window可以获取其他的四个对象。

window.location 等价于 location

window.history  等价于 history，访问过的url

window.onload 等价于onload，window.onbeforeunload在关闭页面前

window.setInterval() 等价于 setInterval()

2.window常用的方法

消息框：

alert("....")：警告框

confirm("你确定要删除吗?")：弹出一个确定框，返回值：boolean

var flag=confirm("你确定要删除吗?");
alert(flag);

prompt("请输入您的姓名")：输入框，返回值：输入的内容

var res=prompt("请输入您的姓名");

alert(res);

定时器：

设置定时器

setInterval(方法,毫秒数)：周期执行

setTimeout(方法,毫秒数)：延迟多长事件后，只执行一次

例如:

time = setInterval(showAd,4000); 返回的time即辨识该定时器。

id=serInterval("showAd()",4000);

清除定时器，之前设置的定时任务有返回值，传入这个值可以停止。

clearInterval(time);

clearTimeout(id);

例子：打字机

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <script>
           var s="我们的明天更加美好!";
           var i=0;
           var divObj;        
           function init(){
              divObj=document.getElementById("divId");
              setInterval(show,200);
           }         
           //往div中写内容
           function show(){
              i++;
              var s_=s.substring(0,i);
              //往div中设置内容
              divObj.innerHTML=s_;
           //当字符串写完的时候 重新开始
              if(i==s.length){
                  i=0;
              }
           }
       </script>
    </head>
    <body onload="init()">
       <div id="divId"></div>
    </body>
</html>

例子：每隔3秒更换图片（仅包含核心代码）

	<script>		
		var i=1;		
		function init(){
			//创建一个定时器
			setInterval(changeImage,1000);			
		}		
		//更改图片
		//<img id="luboid" src="../img/1.jpg"/>
		function changeImage(){
			//获取图片元素
			var imgObj=document.getElementById("luboid");
			i++;
			//修改图片元素的src属性
			imgObj.src="../img/"+i+".jpg";
			imgObj.id="hh";
			imgObj.id="luboid";
			//当i>3的时候 重置i
			if(i>=3){
				i=0;
			}			
		}
	</script>

例子：定时展示广告

<script>
		//记录次数
		var i=0;		
		//定时器id
		var timer;		
		onload=function(){
			//设置定时器 间隔4秒后展示图片
			timer=setInterval(showAd,4000);
		}		
		//展示广告方法 展示2秒之后隐藏
		function showAd(){
			//展示的次数加1
			i++;			
			//若i=3 清空由setinterval设置的定时器
			if(i==3){
				clearInterval(timer);
			}			
			//1.获取广告
			var divObj=document.getElementById("ad");
			
			//2.修改广告的样式 将其显示
			divObj.style.display="block";
			
			//3.2秒之后隐藏 只执行一次
			setTimeout("hideAd()",2000);			
		}		
		//隐藏广告
		function hideAd(){
			//1.获取广告
			var divObj=document.getElementById("ad");			
			//2.修改样式 将其隐藏
			divObj.style.display="none";
		}
	</script>

打开和关闭网页：

open(url)：打开，例如：window.open("http://www.w3school.com.cn")

close()：关闭浏览器

location：定位信息

href：获取或者设置当前页面的url(定位信息)

location.href; 获取url路径

location.href="...";设置url ，location.href="../window/a.html";页面将会实现跳转

history：历史

history.back()：后退

history.forward()：向前

go(int)： history.go(-1) 相当于 back()、history.go(1) 相当于 forward()

五、DOM(文档对象模型)

当浏览器接收到html代码的时候，浏览器会将所有的代码装载到内存中，形成一棵树(document树)。

树的节点(Node)类型有：文档节点 document，元素节点 element，属性节点 attribute，文本节点 text（两个标签之间的文字）。

1.通过document获取节点

document.getElementById("id值")获取一个特定的元素

var obj = document.getElementById("id");

2.操作css属性

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

document.getElementsByTagName("标签名")：通过标签名获取一种元素(多个)

document.getElementsByClassName("class属性的值")：通过class属性获取一类元素(多个)

document.getElementsByName("name属性的值")：通过name属性获取一类元素(多个)

3.设置、获取获取节点的value属性

dom对象.value;获取对象的value值，这个value值即标签体内所设置的value值。

dom对象.value="";设置

4.设置、获取节点的标签体

dom对象.innerHTML;获取

dom对象.innerHTML="";往标签体里写东西

5.获取、设置style属性

dom对象.style.属性;获取

dom对象.style.属性="";设置

六、DOM事件

焦点事件

onfocus：得到焦点

onblur：失去焦点

表单事件

onsubmit，加在form表单上的 οnsubmit="return 函数名()" ，注意函数返回值为boolean类型，只有返回值为true时候，才会提交表单信息。

例子：表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function checkForm(){				
				//获取用户名及其内容
				var usernameObj=document.getElementById("username");
				var username=usernameObj.value;
				//判断value是否为空 若为空不能提交表单,
				if(username==null || username == ""){
					alert("用户名不能为空");
					return false;
				}				
				//获取密码及其内容
				//1.获取密码元素
				var pwdObj=document.getElementById("password");
				
				//2.获取密码的值
				var pwdValue=pwdObj.value;
				
				//3.判断
				if(pwdValue==null || pwdValue==""){
					alert("密码不能为空");
					return false;
				}				
				return true;
			}
		</script>
	</head>
	<body>
		<form action="#" method="get" onsubmit="return checkForm()">
			姓名:<input name="username" id="username"/><br>
			密码:<input type="password" name="password" id="password"><br>
			<input type="submit" value="保存"/>
			<input type="reset" value="hhh"/>
		</form>
	</body>
</html>

表单校验升级版：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		
		function checkForm(){
			var flag = true;
			
			//1.获取用户名和密码里面输入的内容
			var usernameValue=document.getElementById("username").value;
			var passwordValue=document.getElementById("password").value;
			
			//2.校验数据
			if(usernameValue == null || usernameValue== ""){
				//若为空 在span中添加错误信息
				//a.获取span
				var username_msgObj=document.getElementById("username_msg");
				 
				//b.设置错误信息
				username_msgObj.innerHTML="<font color='red'>用户名不能为空</font>";
				//将flag置为false;
				flag=false;
			}else{
				//a.获取span
				var username_msgObj=document.getElementById("username_msg");
				
				//b.设置错误信息
				username_msgObj.innerHTML="";
			}
			
			//3.校验密码
			if(passwordValue == null || passwordValue== ""){
				//若为空 在span中添加错误信息
				//a.获取span
				var password_msgObj=document.getElementById("password_msg");
				
				//b.设置错误信息
				password_msgObj.innerHTML="密码不能为空";
				password_msgObj.style.color="red";
				
				//将flag置为false;
				flag=false;
			}
			
			return flag;
		}
		
        function loseFocus(){
			//1.获取input标签内容
			var usernameValue=document.getElementById("username").value;
			
			//2,判断值 若不满足 给相应的span设置内容
			if(usernameValue==""){
				document.getElementById("username_msg").innerHTML="用户名不能为空";
			}else{
				document.getElementById("username_msg").innerHTML="";
			}
		}
				
	</script>
	<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>
					<td width="40%"><input type="text" name="username" id="username" onblur="loseFocus()"></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>

onchange 改变，例如点击下拉选时候。

页面加载事件

onload最常用的方式：window.οnlοad=function(){};   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function init() {
            alert("hhh")
        }
    </script>
</head>
<body onload="init()">
    <input type="button" value="请点击" onclick="btnclick()">
</body>
</html>

鼠标事件

onclick单击、ondblclick:双击、onmousedown:按下、onmouserup:弹起、onmousemove:移动、onmouserover:悬停、onmouserout:移出

键盘事件

onkeydown:按下、onkeyup:弹起、onkeypress:按住

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        #e02, #e022 {
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }

    </style>
    <script type="text/javascript">
        //页面卸载前
        window.onbeforeunload = function(){
            return "在玩一会吧？";
        }

        // 页面加载事件：当整个html页面加载成功调用
        window.onload = function(){
            // 文本框事件
            var e01 = document.getElementById("e01");
            e01.onfocus = function(){
                html("textMsg","文本框获得焦点：focus");
            }
            e01.onblur = function(){
                html("textMsg","文本框失去焦点：blur");
            }
            e01.onkeydown = function(){
                html("textMsg","键盘按下：keydown；");
            }
            e01.onkeypress = function(event){
                var event = event || window.event;
                append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
            }
            e01.onkeyup = function(){
                append("textMsg","键盘弹起：keyup；");
            }

            // 鼠标事件
            var e02 = document.getElementById("e02");
            e02.onmouseover = function(){
                html("divMsg","鼠标移上：mouseover");
            }
            e02.onmouseout = function(){
                html("divMsg","鼠标移出：mouseout");
            }
            e02.onmousedown = function(){
                html("divMsg","鼠标按下：mousedown");
            }
            e02.onmouseup = function(){
                html("divMsg","鼠标弹起：mouseup");
            }

            var e022 = document.getElementById("e022");
            e022.onmousemove = function(){
                var event = event || window.event;
            };


            // 按钮事件
            var e03 = document.getElementById("e03");
            e03.onclick = function () {
                html("buttonMsg","单击：click");
            };
            e03.ondblclick= function () {
                html("buttonMsg","双击：dblclick");
            };

        };

        /**
         * 指定位置显示指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function html(objId,text){
            document.getElementById(objId).innerHTML = text;
        }
        /**
         * 指定位置追加指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function append(objId,text){
            document.getElementById(objId).innerHTML += text;
        }

    </script>

</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span>
<hr/>
<div id="e02" ></div><span id="divMsg"></span>
<hr/>
<div id="e022" ></div><span id="divMsg2"></span>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>

七、阻止浏览器默认行为

1）阻止浏览器默认行为

例子：阻止点击后正常访问网站。

<a href="http://www.itheima.com" onclick="one()">程序员</a><br/>
<a href="http://www.itcast.cn" onclick="two()">aaa</a><br/>
        <script type="text/javascript">
            function one(){
                alert("我之后，黑马官网继续访问");
            }
            //正常继续访问
            function two(event){
                alert("我之后，传智官网不再访问");
                var event = event || window.event;               
                event.preventDefault(); //阻止默认事件的发生
            }
            //阻止继续访问网页
        </script>

2）阻止浏览器传播行为

<div id="e1" style="width:200px ; height: 200px; background-color: #f00;">
    <div id="e2" style="width:100px ; height: 100px; background-color: #0f0;"></div>
</div>
       
<hr />
         
<div id="e3" style="width:200px ; height: 200px; background-color: #f00;">
    <div id="e4" style="width:100px ; height: 100px; background-color: #0f0;"></div>
</div>

 <script type="text/javascript">
    var e1 = document.getElementById("e1");
    var e2 = document.getElementById("e2");
    var e3 = document.getElementById("e3");
    var e4 = document.getElementById("e4");

    e1.onclick = function(){
        alert("我是外边的div:儿子,我感受到你被点了.");
    }

    e2.onclick = function(){
        alert("我是里面的div:我被点了,爹爹,你感觉咋样?");
    }
    
    e3.onclick = function(){
        alert(".........");
    }

    e4.onclick = function(event){
        alert("我是里面的div:我又被点了,爹爹,你还能感觉到吗?");
        var event = event || window.event;//不同浏览器event不太一样，这是为了保证event有值
        event.stopPropagation();//这个时候外面的div不会有反应
    }
 </script>

八、全选或者全不选案例

实现点击上方的按钮，下面全部选中或者取消选中。

<script>
    function selectAll(obj){
        //获取当前复选框的选中状态
        var flag=obj.checked;               
        //获取所有的复选框
        var arr=document.getElementsByClassName("itemSelect");               
        //遍历数组,将所有的复选框和flag相同
        for(var i=0;i<arr.length;i++){
            arr[i].checked=flag;
        }
    }
</script>

九、左右选中案例

例子：如果左边选中，点击中间案件，将字移动到右边

<script>
    onload=function(){
        document.getElementById("toRight1").onclick=function(){
            //获取左边所有的option
            var arr=document.getElementById("left").options;
            //遍历数组 判断是否选中
            for(var i=0;i<arr.length;i++){
            //判断是否选中 若选中 则追加(移动)到右边的select中
                if(arr[i].selected){
                    document.getElementById("right").appendChild(arr[i]);
                    break;
                }
            }
        }
        document.getElementById("toRight2").onclick=function(){
        //获取左边所有的option
            var arr=document.getElementById("left").options;
            //遍历数组 判断是否选中
                for(var i=0;i<arr.length;i++){
            //判断是否选中 若选中 则追加(移动)到右边的select中
                if(arr[i].selected){
                    document.getElementById("right").appendChild(arr[i]);
                    i--;//这个i--是为了防止指针移动忽略了相邻的下一项
                }
            }
        }
        //给全部移动按钮派发事件
        document.getElementById("toRight3").onclick=function(){
            //获取左边所有的option
            var arr=document.getElementById("left").options;
            //遍历数组 判断是否选中
                for(var i=0;i<arr.length;){
                 //相当于永远把第一个选项移动过去
                    document.getElementById("right").appendChild(arr[i]);
             //注意:长度变化
                }
        }
    }
</script>
<body>
		<table>
			<tr>
				<td>
					<select id="left" multiple="true" style="width:100px" size="10">
						<option>環</option>
						<option>芈</option>
						<option>琅</option>
						<option>琊</option>
						<option>爨</option>
						<option>甄</option>
						<option>槑</option>
						<option>夔</option>
					</select>
				</td>
				<td>
					<input type="button" value=">" id="toRight1"><br>
					<input type="button" value=">>" id="toRight2"><br>
					<input type="button" value=">>>" id="toRight3"><br><br>
					<input type="button" value="<" id="toLeft1"><br>
					<input type="button" value="<<" id="toLeft2"><br>
					<input type="button" value="<<<" id="toLeft3">
				</td>
				<td>
					<select id="right" multiple="true" style="width:100px" size="10">
						
					</select>
				</td>
			</tr>
		</table>
</body>

十、省市联动

   例子：点击其中一个省，右边直接关联到省下面的市。

 

<script>
            // 定义二维数组:
            var arr = new Array(4);
            arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
            arr[1] = new Array("长春市","吉林市","四平市","通化市");
            arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
            arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
</script>
<body>
籍贯:
    <select name="pro" onchange="selCity(this.value)">
            <option >-请选择-</option>
            <option value="0">黑龙江</option>
            <option value="1">吉林</option>
            <option value="2">辽宁</option>
            <option value="3">河南</option>
    </select>
    <select name="city">
            <option >-请选择-</option>
    </select>
</body>

<script>
            function selCity(index){
        //alert(index);
            var cities=arr[index];      
        //获取市的下拉选
            var citySelObj=document.getElementsByName("city")[0];      
        //先初始化，就是上面的数组[0]
            citySelObj.innerHTML="<option >-请选择-</option>";       
        //遍历数组 组装成option 追加到select，所以要用
            for(var i=0;i<cities.length;i++){
                citySelObj.innerHTML+=("<option>"+cities[i]+"</option>");
            }
        }
</script>

十一、隔行换色案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//页面加载成功
			onload=function(){
				//1.获取所有的tr
				var arr=document.getElementsByTagName("tr");
				alert(arr);
				alert(arr.length);
				
				//2.判断奇偶数 添加不同的样式 遍历数组
				for(var i=1;i<arr.length;i++){
					if(i%2==0){
						arr[i].style.backgroundColor="#FFFFCC";
					}else{
						arr[i].style.backgroundColor="#BCD68D";
					}
				}
				
			}
		</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>

 

闲人勿-
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
推荐一款带有ADC 功能 的单片机
07-11
继承了ADC\LCD\PWM 的单片机,与51 内核兼容.
SSI接口 AC97
Allen.Yao的专栏
11-13 3043
SSI: Synchronous Serial Interface(SSI)是一种可应用于数据发送和接收的全双工串行接口,广泛应用于各种串行设备的通信。本文分析了SSI的工作原理,并通过与音频编解码芯片TLV320DAC23的通信实例,阐述了它在音频处理中的应用。 引言随着嵌入式系统的广泛应用,系统内串口通信的需求越来越高,串行数据传输的协议也多样化,常用的有SSI、SPI、I2C、U
Java进阶-SSM框架初学应用-用SSM实现一个简单的CRUD操作
02-02
使用技术：Maven工具、Tomcat服务器、Spring、Mybatis、SpringMVC、了解基本前端知识（HTML、CSS、JavaScript、JSP、JSTL） 这个小项目很简单，但是五脏俱全，可以从小项目中看到实际开发中项目的基本结构和关系，...
javascript 进阶篇2 CSS XML学习
01-19
CSS全称是cascading style sheets，中文名字叫级联样式单，也叫层叠样式表。它的好处就是能让代码整齐，并且可以批量处理一些样式。 基本语法： 注释符：/* */ 选择符：selector {attribute:value} 同一个属性的值用...
毕业设计-基于Html+css+js+java实现的思维导图的可视化学习系统源码+文档说明+界面截图
最新发布
03-16
毕业设计-基于Html+css+js+java实现的思维导图的可视化学习系统源码+文档说明+界面截图 1.1 项目说明： “思维导图学习系统”是一款为了方便用户梳理知识的服务性软件，其中的服务端均在服务器后台部署、运行，并...
旅游系统进阶版,框架 html+ css +js jsp + servlet + java + myql
08-04
框架 html+ css +js jsp + servlet + java + mysql 用户类型： 管理员 admin 123456 用户 qqq 123456 带报告 模块介绍： 管理员模块 登录模块 用户中心 子模块 个人信息 子模块 密码修改 景点管理模块 ...
leetcode计算机刷墙-jonnylong-cn.github.io:个人博客
06-30
JS算法操作： 其他作者文档 现代JavaScript： 前端面试指南基础篇： 前端进阶之道： labuladong的算法小抄： 剑指offer和程序员面试金典： 心tanh博客： 达达前端： 阮一峰JavaScript日志： CSS Inspriation： 前端 ...
配置IDEA和GitHub代码同步
闲人勿
01-09 1045
如果有个授权的界面，点击授权就行。之后便会弹出GitHub上的项目，选择其中一个需要的clone就行。如果本地创建的话，然后想把代码共享到GitHub上，则。在这之前，先登录到GitHub账户。2.打开idea，选择如下。（windows版本）
Java基础-6.try catch、file、IO流
闲人勿
11-27 835
一、 异常的概述和分类 异常就是Java程序在运行过程中出现的错误。 Throwable是异常的最顶层 Error服务器宕机，数据库崩溃等 Exception： RuntimeException 1.JVM默认是如何处理异常的 main函数收到这个问题时，有两种处理方式: a:自己将该问题处理，然后继续运行 b:自己没有针对的处理方式，只有交给调用main的jvm来处理 jvm有...
Java进阶-8.servlet
闲人勿
01-03 623
一、请求：(request) 组成部分：请求行 请求头 请求体。 请求行：请求信息的第一行，格式：请求方式 访问的资源 协议/版本 例如：GET /day0801/1.html HTTP/1.1 请求方式：get和post get会把参数放在url的后面，post不会 get参数大小有限制，post请求却没有限制 ...
Java进阶-17.Spring
闲人勿
01-31 518
一、Spring 1.什么是Spring框架 Spring是一个开源框架，是于2003 年兴起的一个轻量级的Java开发框架，由Rod Johnson在其著作Expert One-On-One J2EE Development and Design中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用某一个组件，...
Java进阶-19.Redis
闲人勿
02-06 423
一、redis介绍 1.什么是NoSQL NoSQL，泛指非关系型的数据库，NoSQL即Not-Only SQL，它可以作为关系型数据库的良好补充。随着互联网web2.0网站的兴起，非关系型的数据库现在成了一个极其热门的新领域，非关系数据库产品的发展非常迅速。而传统的关系数据库在应付web2.0网站，特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从心，暴露了很多难以克...
Java基础-1.java简介
闲人勿
11-27 294
一、Java概述 1.Java发展史 詹姆斯·高斯林（James Gosling）1977年获得了加拿大卡尔加里大学计算机科学学士学位，1983年获得了美国卡内基梅隆大学计算机科学博士学位，毕业后到IBM工作，设计IBM第一代工作站NeWS系统，但不受重视。后来转至Sun (Stanford University Network，斯坦福大学网络公司)，1990年与Patrick，Naught...
Java进阶-12.事务
闲人勿
01-08 272
一、javaweb的设计模式 1.jsp模式介绍 SUN公司推出JSP技术后，同时也推荐了两种web应用程序的开发模式，一种是JSP+JavaBean模式(model1模式)，一种是Servlet+JSP+JavaBean模式(model2模式)。 1）Model1模式介绍 model1模式各部分功能分析 JSP+JavaBean模式适合开发业务逻辑不太复杂的web应用程序，这种模...
Java基础-3.Object、String、StringBuffer、StringBuilder
闲人勿
11-27 261
一、Object 1.Object类概述 类层次结构的根类，所有类都直接或者间接的继承自该类。 2.构造方法 public Object() 子类的构造方法默认访问的是父类的无参构造方法 3.public native int hashCode(); 不同对象的hashCode()一般来说不会相同。同一个对象的hashCode()值肯定相同。 4.getClass(...
Java进阶-15.hibernate
闲人勿
01-22 257
一、Hibernate 1.概述 Hibernate是一个开放源代码的对象关系映射（ORM）框架，它对JDBC进行了非常轻量级的对象封装，使得程序员可以随心所欲的使用对象编程思维来操纵数据库。Hibernate可以应用在任何使用JDBC的场合，既可以在Java的客户端程序使用，也可以在Servlet/JSP的Web应用中使用。Hibernate是轻量级JavaEE应用的持久层解决方案，是一个...
Java基础-8.线程、GUI
闲人勿
11-27 251
一、多线程 线程是程序执行的一条路径，一个进程中可以包含多条线程，多线程并发执行可以提高程序的效率，可以同时完成多项工作。 1.并行和并发 并行就是两个任务同时运行，就是甲任务进行的同时，乙任务也在进行。(需要多核CPU) 并发是指两个任务都请求运行，而处理器只能按受一个任务，就把这两个任务安排轮流进行，由于时间间隔较短，使人感觉两个任务都在运行。 2.Java程序运行原理 Java命...
Java进阶-11.JSP、EL、JSTL
闲人勿
01-06 238
一、JPS 1.java 服务器页面 jsp全称java server pages(java服务器页面)，本质是一个servlet。它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。将内容的生成和显示进行分离，用JSP技术，Web页面开发人员可以使用HTML或者XML标识来设计...
java进阶学习路线2023
11-24
但是，我可以为您提供一些Java进阶学习的建议和资源。 Java是一门非常广泛应用的编程语言，如果您已经掌握了Java的基础知识，那么可以考虑以下几个方面来进一步提高自己的Java编程技能： 1.深入学习Java核心技术：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值