新手小白学习Java第十四天笔记，也是学习HTML的第二天

最新推荐文章于 2024-09-25 09:27:18 发布

微ws

最新推荐文章于 2024-09-25 09:27:18 发布

阅读量1k

点赞数 19

文章标签：学习 java 笔记

本文链接：https://blog.csdn.net/pinlei/article/details/142425821

版权

今天依旧是前端的内容

JavaScript:--简称js
   介绍：网景       ie-->jScript
       LiveScript-->JavaScript
       -->欧洲计算机联盟：--->定接口 ECMAScript262
   总结：
       1，javaScript 由三部分组成：ECMAScript（语法）+DOM（文档对象模型）+BOM(浏览器对象模型)
           java 有三部分组成:javaSE+javaEE+javaME
       2，javaScript 基于对象的和事件驱动的语言（没有多态，重载，返回值，，，）
           java是面向对象的
       3，javaScript 是阻断式解释执行语言
           java是半编译，半解释
       4，javaScript 是弱类型语言，java强类型
           强/弱：是指声明变量时，有没有指定变量类型（javaScript没有指定变量类型）
       5，javaScript 是动态语言，java是准静态语言（反射）（泛型只在编译期起作用，反射在运行时起作用）
           可以将方法名拿来存储变量，但方法会丢失
介绍   ECMAScript（语法）
       输出：
           /*弹框输出   提示*/
           alert("你好世界");
           var i=confirm("确定删除吗？");
           /*控制台输出*/
           console.log("你好"+i);
           /*文本输出*/
           var obj=document.getElementById("div1");
               obj.innerText="我是span标签";
       输入：
           var name=window.prompt("敢问大虾，尊姓大名？");/*弹窗输入框，单独输入*/
           其他情况，将信息输入到文本框里
       变量：
           声明变量：
               var i var声明成员变量
               let i let声明局部变量
               const 声明常量
           ---预加载:可以使用未声明的变量，变量值是undefined
           赋值：
               js中""和''都是为字符串赋值的
           变量类型：
               声明变量时没有类型，但赋值后变量就有类型了
               整数+小数===number
               字符+字符串===string
               true+false===boolean
               null---object
               undefined---undefined(变量只声明，未赋值，就使用)
           类型转换：三个方法 number() parseInt() parseFloat()
               1，字符串类型的有效数字，无论单引还是双引都可以转成number类型-->'1' "1"===>number
               2，boolean--->number,number()可以将boolean转成number类型 true转为1 false转为0
                   但parseInt() parseFloat() 转换的结果是NaN
                   NaN：not a number   NaN是number类型
               3，number()只能转数字但parseInt() parseFloat() 有数字就会转换点数字   三者转换汉字得到的结果都是NaN
       运算符：
           同java
           = 赋值运算符
           ==   ===都是关系运算符，都是用来比较是否相等
           == 在比较的时候，先进行类型转换，再将转换后的值进行比较，值相等返回true，值不相等返回false
           === 在比较的时候，先比较类型，类型相等再比较值，值相等返回true，值不相等返回false；
               若类型不相同，直接返回false
       选择：
           同java
       循环：
           同java
           例子：控制台输出99乘法表
       方法：
           先定义，再调用
           java中
           public static 返回值类型方法名（int a String b）{
               方法体
               return [表达式];
           }

           javaScript中
           [声明式，创建方法]
               function 方法名(a,b){
               }
               ---返回值：可以不写返回值类型，需要返给调用者哪种类型的变量，直接return返回就可以了
               ---参数：实参的个数可以和形参的个数不相等；
               ---形参：不需要写参数类型
           [赋值式]
               var demo10=function(){
                   alert("我是赋值式创建方法demo10");
               }
           [new 对象方式]
               var demo11=new Function("alert('我是new 对象方式创建方法');");
       数组：
           let arr3=[{'name':'婷婷','age':'22','sex':'女'},
                       {'name':'菲菲','age':'21','sex':'女'},
                       {'name':'雅雅','age':'20','sex':'女'}];
           for(let i=0;i<arr3.length;i++){
               let stu=arr3[i];
               alert(stu.name+","+stu.age+","+stu.sex);
           }
           alert(arr3[2].age);
       常用类：
           object类：
               /*let obj=new Object();简写如下：*/
               /*obj.name="娜娜";
               obj.sex="女";
               obj.age=20;简写如下：*/
               let obj={name:"娜娜",age:20,sex:"女"};
               //标准的jSon格式：
               let obj2={"name":"菲菲","age":"21","sex":"女"};

       封装：
       继承：

BOM(浏览器对象模型)
   1，浏览器对象---window
       --js只有一个全局作用区
   2，window对象有哪些常见的属性：
       历史记录栏：
           window.history.go(1);//正数表示前进；负数表示后退
       地址栏：
           window,location.href="https://www.so.com/s";
   2，window对象有哪些常见的方法：（记）
       弹框方法：alert();
               confirm();
               prompt();
       打开关闭方法：

       定时器方法：

       清除定时器：
DOM文档对象模型：
   DOM是BOM的一个属性对象：
   1，如何获得一个标签对象
       function demo1(){
               //根据标签的id属性，唯一获得该标签对象
               let obj=document.getElementById("div1");
               alert(obj.innerText);
               //根据标签的name属性值，获得一组标签对象
               let objs=document.getElementsByName("dname");//获得的是一个数组
               let o2=objs[1];
               alert(o2.innerText);
               //根据标签的class属性值，获得一组标签对象
               let os=document.getElementsByClassName("cdiv");
               alert(os[0].innerText);
               //根据标签名，获得一组标签对象
               let divs=document.getElementsByTagName("div");
               alert(divs[4].innerText);
           }
   2，操作标签对象的属性
       自身属性:获得属性值-->标签对象.属性
               获得属性值-->标签对象.属性=值
       自定义属性：（标签本身没有，自己加的）
           alert(obj.getAttribute("asdsdfghjk"));
               obj.setAttribute("asdsdfghjk","我是img图片标签");
               obj.setAttribute("asdsdfghjk","我是img"); //map集合
               alert(obj.getAttribute("asdsdfghjk"));

   3，操作标签对象的文本
       function demo3(){
               let obj=document.getElementsByTagName("span")[0];
               obj.innerText="<a href='http://www.baidu.com/s' style='color: red;'>我是<span>标签<a>";
               obj.innerHTML="<a href='http://www.baidu.com/s' style='color: red;'>我是<span>标签<a>";
           }
   4，操作标签对象的外观样式
       function demo4(){
               let obj=document.getElementsByTagName("span")[0];
               obj.style.color="#00FFFF";
               obj.style.fontSize="40px";
           }
   5.操作标签对象的结构：
                    function demo5(){
               //创建一个文本框，用来显示面包的价格
               let iobj=document.createElement("input");
               iobj.type="text";
               iobj.value=parseInt(Math.random()*10);

               //创建一个用于删除面包的button按钮:
               let btn=document.createElement("input");
               btn.type="button";
                btn.value="删除面包";
                btn.οnclick=function(){
                   div.removeChild(iobj);
                   div.removeChild(btn);
                   div.removeChild(br);
                }

               //创建换行标签对象；
               let br=document.createElement("br");

               //获得div标签对象：
               let div=document.getElementsByTagName("div")[0];
               div.appendChild(iobj);
               div.appendChild(btn);
               div.appendChild(br);
           }

   6.操作标签对象的事件：

                btn.οnclick=function(){
                   div.removeChild(iobj);
                   div.removeChild(btn);
                   div.removeChild(br);
                }

5.事件类型，事件对象，阻止事件

【事件类型】
鼠标事件：
   单击
   双击
鼠标移动
鼠标移入
鼠标移出
        <div style="height: 300px;
           width: 300px;
           background-color: greenyellow;
           border: 1px red solid;display: inline-block;"
           οnclick="demo1()" οndblclick="demo2()"
           οnmοusemοve="demo4(event)"></div>
       <span></span>

键盘事件：
按下：

加载事件:
body标签的加载：

表单事件：
获得焦点：
失去焦点：
内容改变：--

表单提交:

【事件对象】
描述当前正常产生的事件，存储该事件中的所有信息的对象，就叫事件对象。

           function demo4(event){
               let x= event.pageX;
               let y= event.pageY;
               document.getElementsByTagName("span")[0].innerText=x+":"+y;
           }
           function demo5(event){
               //进到文本框里，按一下shift，在输入字母，才好用。
               let num=event.keyCode;
               let img=document.getElementsByTagName("img")[0];
               if(num==65){//往左走
                       let val=img.style.left;
                        let i=parseInt(val.substring(0,val.length-2))-50;
                       img.style.left=i+"px";
               }else if(num==83){//往下走
                       let val=img.style.top;
                        let i=parseInt(val.substring(0,val.length-2))+50;
                       img.style.top=i+"px";
               }else if(num==68){//往右走
                       let val=img.style.left;
                        let i=parseInt(val.substring(0,val.length-2))+50;
                       img.style.left=i+"px";
               }else if(num==87){//往上走
                        let val=img.style.top;
                        let i=parseInt(val.substring(0,val.length-2))-50;
                       img.style.top=i+"px";
               }
           }

【事件的阻止机制】
       <a href="https://www.baidu.com/s?wd=123"
           οnclick="return demo6()"> 点击跳转百度</a>

       <script type="text/javascript">
           function demo6(){
               return false;
           }
       </script>

6.JavaScript代码所写的位置：
    标签里：
   <input type="button" value="普通按钮" οnclick="javascript:alert('点击一下');" />
当前页面里：
<script type="text/javascript">
           function demo1(){
               let obj=document.getElementsByTagName("input")[0];
               obj.style.backgroundColor="#FF1493";
           }
</script>

提取到一个单独的js文件里：

    使用的时候，当前页面在引用进来：
   <script type="text/javascript" src="js/formEvent.js"></script>

【注意：一对script标签只干一个活，那么导入外部js文件；要不自定义函数。】
       <script type="text/javascript" src="js/formEvent.js">
       </script>
       <script type="text/javascript">
           function test(){
               alert("1234");
           }
       </script>

7.jQuery

jQuery是JavaScript一个非常强大的类库。
jQuery 替代 JavaScript的DOM，ECMAScript，BOM
DOM ---获得标签对象，属性，外观，文本，结构，事件。

介绍jQuery：

1. jQuery版的dom代码减少了很多。
2. jQuery提供了非常强大的选择器
3. 解除硬编码的问题。

7.1 简单使用jQuery：

   A。获得标签对象

    js：document.getElementsByTagName("body")[0]
    jQuery.（1）$("选择器") ---直接获得标签对象
                            （2*）$("html代码")--结构
               （3） $(js对象)---->jQuery对象。
                let obj=document.getElementsByTagName("div")[0];
               $(obj).css("height","500px");

               jQuery对象--js对象：
               $("div")[0].style.backgroundColor="royalblue";

   B。事件名：
       特殊：js onload
       jQuery ready

      其他      js onclick
       jQuery click

   例子1:窗体加载后，背景颜色变成黄色。

            $("body").ready(function(){
               $("body").css("background-color","yellow");
           });

例子2: 设置表格，隔行换色。

       $("tr:even").css("background-color","#0000FF");
       $("tr:odd").css("background-color","aqua");

例子3:为表格中的第一行设置单击事件，点击后背景颜色变成粉色。

    ===补充：jQuery的代码都要写在窗体加载事件里。要保证窗体加载后，在做其他操作。


    B.jQuery 操作标签属性：
               alert($("img").attr("asd"));
               $("img").attr("src","../img/baidu.gif");

               ===特殊：value属性
               $("input").val();
               $("input").val("新值");

    C.外观:
       $(obj).addClass("a");
         $(obj).css("width","300px");

    D.文本
       $("div").text("我不是    div 标签");
       $("div").html("<a href='https://www.baidu.com/s'>点击跳转百度</a>");

    E.结构
                   let val=parseInt(Math.random()*10);
                   $("<input type='text' value='"+val+"'/><input type='button' value='删除'/><br/>").appendTo("div");

    F.事件。

        on();----为不一定存在的标签添加事件。
        $(document).on("click","[value='删除']",function(){
                   $(this).prev().remove();
                   $(this).next().remove();
                   $(this).remove();
               });
7.2 选择器：

BOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>介绍BOM浏览器对象模型</title>
		<script type="text/javascript">
			function test1(){
				window.history.go(1);//正数表示前进；负数表示后退
			}
			function test2(){
				window.location.href="https://www.so.com/s";
			}
			function test4(){
				window.open("open.html");
			}
			
		</script>
	</head>
	<body>
		<a href="index.html">点击跳转到index.html</a><br />
		<input type="button" value="历史记录栏-属性" onclick="test1()" /><br />
		<input type="button" value="地址栏-属性" onclick="test2()"	/><br />
		<input type="button" value="打开方法" onclick="test4()" /><br />
		<a href="https://www.baidu.com/s" onclick="test3()"></a>
		<script type="text/javascript">
			function test3(){
				let obja=document.getElementsByName("a")[1];
				obja.href="https://www.so.com/s";
			}
		</script>
		
	</body>
</html>

DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>介绍DOM
		</title>
		<script type="text/javascript">
		//1，获得一个标签对象
			function demo1(){
				//根据标签的id属性，唯一获得该标签对象
				let obj=document.getElementById("div1");
				alert(obj.innerText);
				//根据标签的name属性值，获得一组标签对象
				let objs=document.getElementsByName("dname");//获得的是一个数组
				let o2=objs[1];
				alert(o2.innerText);
				//根据标签的class属性值，获得一组标签对象
				let os=document.getElementsByClassName("cdiv");
				alert(os[0].innerText);
				//根据标签名，获得一组标签对象
				let divs=document.getElementsByTagName("div");
				alert(divs[5].innerText);
			}
			var i=0;
			function demo2(){
				 let obj=document.getElementsByTagName("img")[0];
				if(i%2==0){
					obj.src="img/p2.jpg";
					i++;
				}else{
					obj.src="img/e8cbce1d53432a6950071bf26b640e2b.gif";
					i=0;
				}
				alert(obj.getAttribute("asdf"));
				obj.setAttribute("asdf","我是img图片标签");
				obj.setAttribute("asdf","我是img");//map集合
				alert(obj.getAttribute("asdf"));
			}
			function demo3(){
				let obj=document.getElementsByTagName("span")[0];
				obj.innerText="<a href='http://www.baidu.com/s' style='color: red;'>我是&lt;span&gt;标签<a>";
				obj.innerHTML="<a href='http://www.baidu.com/s' style='color: red;'>我是&lt;span&gt;标签<a>";
			}
			function demo4(){
				let obj=document.getElementsByTagName("span")[0];
				obj.style.color="#00FFFF";
				obj.style.fontSize="40px";
			}
			function demo5(){
				//创建一个文本框，用来显示面包价钱
				let iobj=document.createElement("input");
				iobj.type="text";
				iobj.value=parseInt(Math.random()*10);
				
				//创建一个用于删除面包的button按钮
				let btn=document.createElement("input");
				btn.type="button";
				btn.value="删除面包";
				btn.onclick=function(){
					div.removeChild(iobj);
					div.removeChild(btn);
					div.removeChild(br);
				}
				//创建一个换行标签对象
				let br=document.createElement("br");
				
				//获得div标签对象
				let div=document.getElementsByTagName("div")[0];
				div.appendChild(iobj);
				div.appendChild(btn);
				div.appendChild(br);
				
			}
		</script>
	</head>
	<body onload="demo1()">
		<div>
			
		</div>
		<input type="button" value="添加面包" onclick="demo5()" /><br />
		<img src="img/p1.jpg" asdf="我是图片标签"
			height="50px" width="100px" /><br />
		<input type="button" value="修改图片" onclick="demo2()" /><br />
		<span>我是span标签</span><br />
		<input type="button" value="修改文本" onclick="demo3()" /><br />
		<input type="button" value="外观样式" onclick="demo4()" /><br />
		<div id="div1">我是div标签,id='div1'</div>
		<div name="dname">我是div标签</div>
		<div name="dname">我是div标签,第二个元素</div>
		<div class="cdiv">我是div标签,class='cdiv'</div>
		<div class="cdiv">我是div标签,div的第五个元素</div>
		
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function demo1(){
				document.getElementsByTagName("div")[0]
				.style.backgroundColor="yellow";
			}
			function demo2(){
				document.getElementsByTagName("div")[0]
				.style.backgroundColor="red";
			}
			function demo3(){
				//alert("鼠标移入");
				document.getElementsByTagName("div")[0]
				.style.backgroundColor="#0000FF";
			}
			function demo4(event){
				let x=event.pageX;
				let y=event.pageY;
				document.getElementsByTagName("span")[0].innerText=x+":"+y;
			}
			function demo5(event){
                //进到文本框里，按一下shift，在输入字母，才好用。
                let num=event.keyCode;
                let img=document.getElementsByTagName("img")[0];
                if(num==65){//往左走
                        let val=img.style.left;
                        let i=parseInt(val.substring(0,val.length-2))-50;
                        img.style.left=i+"px";
                }else if(num==83){//往下走
                        let val=img.style.top;
                        let i=parseInt(val.substring(0,val.length-2))+50;
                        img.style.top=i+"px";
                }else if(num==68){//往右走
                        let val=img.style.left;
                        let i=parseInt(val.substring(0,val.length-2))+50;//substring截取字符串	val.length-2后两位（px）不要
                        img.style.left=i+"px";
                }else if(num==87){//往上走
                        let val=img.style.top;
                        let i=parseInt(val.substring(0,val.length-2))-50;
                        img.style.top=i+"px";
                }    
                return false;
            }
		</script>
	</head>
	<body>
		<div style="height: 300px;
			width: 300px; 
			background-color: greenyellow;
			border:1px red solid;display:inline-block;" 
			onclick="demo1()" 
			ondblclick="demo2()"
			onmousemove="demo4(event)" ></div>
		<span></span><br />
		<input type="text" onkeydown="return demo5(event)" /><br />
		<img src="img/903da5481db4b530b08ef6ff0fed84d1.jpg"
			style="position: absolute; top: 500px; left: 300px;"
			height="100px" width="80px"/><br />
		<a href="http://www.baidu.com/s?wd=123" onclick="return demo6()" >点击跳转百度</a><br />
		<script type="text/javascript">
		//阻止机制 return
			function demo6(){
				return true;
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		div{我的div标签}*10
		<div onclick="show()">我的div标签，点我调函数</div>  /*点击事件*/
		<div id="div1" onmouseover="demo1()">我的div标签</div>
		<div>我的div标签</div>
		<input type="button" value="语法：输出语句" onclick="demo2()" /><br />
		<input type="button" value="变量的使用" onclick="demo3()" /><br />
		<input type="button" value="变量类型" onclick="demo4()" /><br />
		<input type="button" value="99乘法表" onclick="demo5()"/><br />
		<input type="button" value="变量类型转换" onclick="demo6()" /><br />
		<input type="button" value="运算符" onclick="demo7()" /><br />
		<input type="button" value="方法8" onclick="demo9()" /><br />
		<input type="button" value="方法10" onclick="demo10()" /><br />
		<input type="button" value="方法11" onclick="demo11()" /><br />
		<input type="button" value="使用0bject" onclick="demo12()" /><br />
		<input type="button" value="使用json格式" onclick="demo13()" /><br />
		<input type="button" value="数组" onclick="demo14()" /><br />
	</body>
	<script type="text/javascript">
			function demo14(){
				var arr=new Array(5);//声明一个空间长度是5的数组
				alert(arr.length);
				arr[50]=10;//给第五十一位赋值
				alert(arr.length);
				var arr2=new Array('a','b','c');
				alert(arr2);
				/*let arr3=new Array();简写如下*/
				//let arr3=[];
				//arr[0]="{'name':'婷婷','age':'22','sex':'女'}";//存放object类对象
				//简写：
				let arr3=[{'name':'婷婷','age':'22','sex':'女'},
							{'name':'菲菲','age':'21','sex':'女'},
							{'name':'雅雅','age':'20','sex':'女'}];
				/*for(let i=0;i<arr3.length;i++){
					let stu=arr3[i];
					alert(stu.name+","+stu.age+","+stu.sex);
				}*/
				for(var i in arr3){
					let stu=arr3[i];
					alert(stu.name+","+stu.age+","+stu.sex);
				}
				alert(arr3[2].age);
				//alert(arr3);
			}
			function demo13(){
				var str="{'name':'婷婷','age':'22','sex':'女'}";
				eval("var objs="+str);
				//eval(str)可以将string类型的参数，转成解释后的js代码
				alert(objs.name+","+objs.age+","+objs.sex);
			}
			function demo12(){
				/*let obj=new Object();简写如下：*/
				/*obj.name="娜娜";
				obj.sex="女";
				obj.age=20;简写如下：*/
				let obj={name:"娜娜",age:20,sex:"女"};
				//标准的jSon格式：
				let obj2={"name":"菲菲","age":"21","sex":"女"};
				alert(obj.name+","+obj.age+","+obj.sex);
				alert(obj2.name+","+obj2.age+","+obj2.sex);
			}
			function show(){
				alert("你好世界");/*阻断式运行*/ /*输出语句*/
				var i=confirm("确定删除吗？");	/*返回的相当于是布尔类型的*/
				if(i){
					alert("马上执行删除操作");
				}else{
					alert("取消删除");
				}
				/*控制台输出*/
				console.log("你好"+i);
			}
			function demo1(){
				var obj=document.getElementById("div1");
				obj.innerText="我是span标签";
				obj.style.color="red";/*用行内标签方式设置属性*/
				obj.style.fontSize="20px";
				/*document当前页面的所有标签对象，通过id查找相应的对象*/
			}
			function demo2(){
				var name=window.prompt("敢问大虾，尊姓大名？");/*弹窗输入框，单独输入*/
				var obj=document.getElementsByTagName("input")[0];/*[0]改变第一个标签*/
				obj.value=name;
			}
			function demo3(){
				/*用var声明的是成员变量*/
				/*
				const i=9;
				alert(i);
				*/
				/*""和''都表示字符串类型*/
				let i=34;
				let a="123";
				let b='123';
				let c='1';
				alert(b);
			}
			function demo4(){
				let a;
				let b=123;
				let c=123.45;
				let d='asd';
				let e="qwe";
				let f='a';
				let g=true;
				let h=false;
				let i=null;
				console.log(a+";"+typeof a);
				console.log(b+";"+typeof b);
				console.log(c+";"+typeof c);
				console.log(d+";"+typeof d);
				console.log(e+";"+typeof e);
				console.log(f+";"+typeof f);
				console.log(g+";"+typeof g);
				console.log(h+";"+typeof h);
				console.log(i+";"+typeof i);
			}
			function demo5(){
				for(let i=1;i<=9;i++){
					for(let j=1;j<=i;j++){
						document.write(i+"*"+j+"="+(i*j)+"&nbsp;");
					}
					document.write("<br/>");
				}
			}
			function demo6(){
				/*number,boolean,string*/
				let n1=1;
				let n2='1';
				let n3="1";	//转成数字1
				let n4=true;
				let n5=false;
				let n6=1.1;
				let n7=1.0;
				let n8='1.1.1';
				console.log(NaN+";"+typeof NaN);
				console.log(Number(n2)+","+parseInt(n2)+","+parseFloat(n2));
				console.log(Number(n3)+","+parseInt(n3)+","+parseFloat(n3));
				console.log(Number(n4)+","+parseInt(n4)+","+parseFloat(n4));
				console.log(Number(n5)+","+parseInt(n5)+","+parseFloat(n5));
				console.log(Number(n6)+","+parseInt(n6)+","+parseFloat(n6));
				console.log(Number(n7)+","+parseInt(n7)+","+parseFloat(n7));
				console.log(Number(n8)+","+parseInt(n8)+","+parseFloat(n8));
			}
			function demo7(){
				let boo=true;
				let a=1;
				let b='1';
				let c=1;
				alert(boo==a);
				alert(boo===a);
				alert(b==a);
				alert(b===a);//false
				alert(c==a);//true
				alert(c===a);//true
			}
			function demo8(a,b,c){
				alert("我是demo8方法"+a+","+b+","+c);
				return "张三";
			}
			function demo9(){
				alert(demo8());
				if(demo8(1,2,3)==0){
					alert("demo8返回的是true");
				}else{
					alert("demo返回的是false");
				}
			}
			var demo10=function(){
				alert("我是赋值式创建方法demo10");
			}
			var demo11=new Function("alert('我是new 对象方式创建方法');");
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*不匿名
			function closeW(){
				window.setTimeout(show,5000);
			}
			function show(){
				window.close();
			}*/
			//匿名方法
			//setTimeout();指定一段时间后，调用前面的函数
			function closeW(){
				window.setTimeout(function(){
					window.close();
				},5000);
			}
			var num=10;
			var clearobj;
			function closeW(){
				clearobj=window.setInterval(function(){
					num--;
					if(num==0){
						window.close();
					}else{
						document.getElementById("div1").innerText="还剩"+num+"秒关闭页面";
					}
				},1000);
			}
			function clearW(){
				window.clearInterval(clearobj);
				document.getElementById("div1").innerText="";
			}
			
		</script>
	</head>
	<body>
		<h1>我是open.html页面</h1>
		<input type="button" value="关闭页面方法" onclick="closeW()" /><br />
		<div id="div1" style="color: red;font-size: 20px;"></div>
		<input type="button" value="解除关闭" onclick="clearW()" /><br />
	</body>
</html>

body, html {  
    height: 100%;  
    margin: 0;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    background-color: #f0f0f0;  
}  
  
.heart-container {  
    width: 100px;  
    height: 100px;  
    animation: pulse 2s infinite;  
    transform-origin: center;  
}  
  
.heart {  
    fill: red;  
    transition: fill 0.5s;  
}  
  
@keyframes pulse {  
    0% {  
        transform: scale(1);  
    }  
    50% {  
        transform: scale(1.2);  
        .heart {  
            fill: pink;  
        }  
    }  
    100% {  
        transform: scale(1);  
    }  
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		
			$(document).ready(function(){
				//1，验证员工编号，非空，长度=6，前三位是数字，后三位是字母
				$("[name='empno']").blur(ckempno);
				//验证员工姓名是2-10的汉字：
				$("[name='ename']").blur(ckename);
				//验证邮箱：
				$("[name='email']").blur(ckemail);
				//验证工资
				$("[name='sal']").blur(cksal);
				//验证下拉列表，不能选择第一项:
				$("[name='mgr']").click(cksel);
				//验证复选框
				$("[name='city']").change(ckbox);
				//验证条例
				$("[name='ck']").click(ckagree);
				//验证入职时间：
				$("[type='date']").mouseout(ckhiredate);
				//验证是否阻止提交
				$("form").submit(cksubmit);
				
			});
			
			//验证是否要阻止提交：
			function cksubmit(){
				if( ckempno() && ckename() && ckemail() && cksal() && cksel() && ckbox() && ckhiredate()){
					return true;
				}
				 return false;
			}
			
			//验证员工编号
			function ckempno(){
				let val=$("[name='empno']").val();//获得当前文本框输入的value
				let reg=/^\d{3}[a-cA-C]{3}$/;
				if(reg.test(val)){	
					$("[name='empno']").next().css("color","green").text("√");
					return true;
				}else{
					$("[name='empno']").next().css("color","red").text("长度为6位，3位数字3位a-c字母");
					return false;
				}
			}
			
			//验证员工姓名
			function ckename(){
				let val=$("[name='ename']").val();
					let reg=/^[\u4e00-\u9fa5]{2,10}$/;
					if(reg.test(val)){	
						$("[name='ename']").next().css("color","green").text("√");
						return true;
					}else{
						$("[name='ename']").next().css("color","red").text("名字为2-10位的汉字");
						return false;
					}
			}
			
			//验证邮箱
			function ckemail(){
				let val=$("[name='email']").val();
					let reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					if(reg.test(val)){	
						$("[name='email']").next().css("color","green").text("√");
						return true;
					}else{
						$("[name='email']").next().css("color","red").text("邮箱格式不正确");
						return false;
					}
			}
			
			//验证工资：
			function cksal(){
				let val=$("[name='sal']").val();
					if(Number(val)>0){	//NaN 是一个很特殊的变量，
						$("[name='sal']").next().css("color","green").text("√");
						return true;
					}else{
						$("[name='sal']").next().css("color","red").text("工资格式不正确");
						return false;
					}
			}
			
			//验证下拉列表
			function cksel(){
				//selectdeIndex是下拉列表中，选中的option的下标是多少？
				//$(this)[0].selectedIndex;//将jquery对象转换成js对象	
				if($("[name='mgr']")[0].selectedIndex!=0){
						$("[name='mgr']").next().css("color","green").text("√");
						return true;
					}else{
						$("[name='mgr']").next().css("color","red").text("必须选择一个经理编号");
						return false;
					}
			}
			
			//验证复选框
			function ckbox(){
				let arr=$("[type='checkbox'][name='city']");
				let count=0;
				for(let i=0;i<arr.length;i++){
					if(arr[i].checked){
						count++;
					}
				}
				if(count>=2){
					$("#span1").css("color","green").text("√");
					return true;
				}else{
					$("#span1").css("color","red").text("最喜欢的城市必须选两项");
					return false;
				}
			}
			
			//验证入职时间
			function ckhiredate(){
				if($("[type='date']").val()!=""){
						$("[type='date']").next().css("color","green").text("√");
						return true;
					}else{
						$("[type='date']").next().css("color","red").text("必须选择入职时间");
						return false;
					}
			}
			
			//验证条例
			function ckagree(){
				let boo=$("[name='ck']").prop("checked");
				if(boo){
					document.getElementById("sub1").disabled=false;
				}else{
					document.getElementById("sub1").disabled=true;
				}
			}
			
		</script>
	</head>
	<body>
		<form action="https://www.baidu.com/s" method="get" >
			员工编号：<input type="text" name="empno" /><span></span><br />
			员工姓名: <input type="text" name="ename" /><span></span><br />
			岗位名称：<input type="radio" name="job" value="1" checked/>销售
					<input type="radio" name="job" value="2" />开发
					<input type="radio" name="job" value="3" />运维
					<input type="radio" name="job" value="4" />经理<br />
			经理编号：<select name="mgr">
						<option value="-1" disabled>--请选择--</option>
						<option value="7388">7388</option>
						<option value="7311">7311</option>
						<option value="7322">7322</option>
						<option value="7333">7333</option>
					</select><span></span><br />
					
			你最喜欢的城市:
					<input type="checkbox" name="city" value="1" />沈阳
					<input type="checkbox" name="city" value="2" />长春
					<input type="checkbox" name="city" value="3" />北京
					<input type="checkbox" name="city" value="4" />上海
					<input type="checkbox" name="city" value="5" />杭州<span id="span1"></span><br />
			入职时间：<input type="date" name="hiredate" /><span></span><br />
			邮箱：	<input type="text" name="email"  /><span></span><br />
			工资：	<input type="text" name="sal" /><span></span><br />
			<input type="checkbox" name="ck" />我已阅读该网站条例，并同意条例内容<br />
			<input id="sub1" type="submit" value="提交" disabled="disabled"/><br />
			
			
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript">
			/*function demo1(){
				let obj=document.getElementsByTagName("body")[0];
				obj.style.backgroundColor="red";
			}
			<body onload="demo1()">*/
			/*function demo1(){
				let objs=document.getElementsByTagName("tr");
				for(let i=0;i<objs.length;i++){
					if(i%2==0){
						objs[i].style.backgroundColor="#FF0000";
					}else{
						objs[i].style.backgroundColor="blue";
					}
				}
			}
			<body onload="demo1()">*/
			$(document).ready(function(){
				//1,
				$("body").css("background-color","#00FFFF");
				//2,表格隔行换色
				$("tr:even").css("background-color","#0000FF");//even奇数行
				$("tr:odd").css("background-color","#7FFF00");//odd偶数行
				//3,窗体加载后，设置第一行tr单击事件
				$("tr:first").click(function(){
					$(this).css("background-color","pink");//this代指触发标签事件本身
				});
				//4,设置div标签外观属性
				//let obj=document.getElementsByTagName("div")[0];//js对象
				/*$(obj).css("height","500px");//将js对象转换为jquery对象
				$(obj).css("width","300px");
				$(obj).css("background-color","aquamarine");
				$("div")[0].style.backgroundColor="#7FFF00";//将jquery对象转换为js对象*/
				//$(obj).addClass("a");
				
				//5,获得图片标签的自身属性和自定义属性：
				alert($("img").attr("src"));
				alert($("input").val());
				$("img").attr("src","../img/p1.jpg");
				$("img").attr("title","小明");
				
				//6,窗体加载后，操作div标签的文本：
				//text()-->innerText;
				//html()-->innerHtml;
				//alert($("div").text());
				$("div").text("我不是div标签");
				$("div").html("<a href='https://www.baidu.com/s'>点击跳转百度</a>");
				
				//7，窗体加载后，为按钮添加单击事件
				$("[type='button']").click(function(){
					//let val=Math.random()*10;
					let val=parseInt(Math.random()*10);//生成0-10的随机数
					$("<input type='text' value='"+val+"'/><input type='button' value='删除' /><br />").appendTo("div");
				});
				
				//为删除面包按钮，添加单击事件
				$(document).on("click","[value='删除']",function(){
					$(this).prev().remove();//prev获得同辈前面的元素
					$(this).next().remove();//next获得同辈后面的元素
					$(this).remove();
					
					
				})
				
				
			});
			
		</script>
		<style type="text/css">
			.a{
				height: 300px;
				width: 200px;
				background-color:cadetblue;
			}
		</style>
	</head>
	<body>
		<input type="text" value="uname" /><br />
		<img src="../img/p2.jpg" title="壁纸" alt="这个壁纸" value="7388"
			height="250px" width="450px"
			qqq="123" asd="456" /><br />
		
		<!--
        	<div>我是div标签</div>
        -->
        <div>
        	
        </div><input type="button" value="添加面包" /><br />
		<table border="1px">
			<tr>
				<td>00</td>
				<td>00</td>
				<td>00</td>
				<td>00</td>
			</tr>
			<tr>
				<td>00</td>
				<td>00</td>
				<td>00</td>
				<td>00</td>
			</tr>
			<tr>
				<td>00</td>
				<td>00</td>
				<td>00</td>
				<td>00</td>
			</tr>
			<tr>
				<td>00</td>
				<td>00</td>
				<td>00</td>
				<td>00</td>
			</tr>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加面包</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				let money=0;
				$("[value='添加面包']").click(function(){
					let val=parseInt(Math.random()*10);
					money=money+val*5;
					$("<input type='text' value='"+val+"' /><input type='button' value='删除' /><br />").appendTo("div");
				});
				$(document).on("click","[value='删除']",function(){
					let a=parseInt($(this).prev("input[type='text']").val());
					$(this).prev().remove();
					$(this).next().remove();
					$(this).remove();
					money=money-a*5;
				});
				$("[value='总价']").click(function(){
					$("#div1").val(money);
				});
			});
			
		</script>
	</head>
	<body>
		<div>
		
		</div><input type="button" value="添加面包" /><br />
		<input id="div1" type="text" value="0"/>
		<input type="button" value="总价" /><br />
	</body>
</html>