JAVA集中学习第五周学习记录(一)

系列文章目录

第一章 JAVA集中学习第一周学习记录(一)
第二章 JAVA集中学习第一周项目实践
第三章 JAVA集中学习第一周学习记录(二)
第四章 JAVA集中学习第一周课后习题
第五章 JAVA集中学习第二周学习记录(一)
第六章 JAVA集中学习第二周项目实践
第七章 JAVA集中学习第二周学习记录(二)
第八章 JAVA集中学习第二周课后习题
第九章 JAVA集中学习第二周学习记录(三)
第十章 JAVA集中学习第二周学习记录(四)
第十一章 JAVA集中学习第三周学习记录(一)
第十二章 JAVA集中学习第三周小组项目开发
第十三章 JAVA集中学习第四周学习记录(一)
第十四章 JAVA集中学习第四周学习记录(二)
第十五章 JAVA集中学习第四周学习记录(三)
第十六章 JAVA集中学习第四周学习记录(四)
第十七章 JAVA集中学习第五周学习记录(一)

文章目录

系列文章目录
前言
一、DOM文档对象模型
- 1. 获取一个标签对象
- 2. 操作标签对象的属性
- - 2.1 操作属性
  - 2.2 综合实例——图片移动
- 3. 事件
二、jQuery
- 1. JavaScript与jQuery区别
- 2. 获得标签对象
- 3. 代码示例
- - 3.1 设置表格隔行换色
  - 3.2 为表格中的第一行设置单击事件，点击后，背景颜色变成粉色
  - 3.3 获取属性
  - 3.4 操作外观
  - - 3.4.1 第一种方式
    - 3.4.2 第二种方式
  - 3.5 结构与事件
  - 3.5.1 面包例子
  - 3.5.2 图片跳转例子
- 4. 表单验证
总结

前言

本文我们将讲述：
DOM文档对象模型：在方法内对控件进行增删改查
jQuery库：引入第三方库简化DOM操作
哦，以这种方式写前言还好明了嘞，以后这么写吧！今天心情好，人类甄别计划暂时搁置。

一、DOM文档对象模型

DOM是BOM的一个属性对象。
获得标签对象，属性，文本，外观，事件

1. 获取一个标签对象

function fun1(){//根据标签Id属性，唯一获取该标签对象let obj = document.getElementById("div1");alert(obj.innerText);//根据标签name属性，获取一组标签对象let objs = document.getElementsByName("dname");let obj1 = objs[1];alert(obj1.innerText);//根据标签的class属性，获取一组标签对象let  os = document.getElementsByClassName("cdiv");alert(os[0].innerText);//根据标签属性，获取一组标签对象let divs = document.getElementsByTagName("div");alert(divs[4].innerText);
}

2. 操作标签对象的属性

2.1 操作属性

获得属性值：标签对象.getAttribute(属性);
设置属性值：标签对象.setAttribute(属性, 值);

let img1 = document.getElementsByTagName("img")[0];
img1.setAttribute("title","我是img");//键值对
alert(img1.getAttribute("title"));

2.2 综合实例——图片移动

<!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="gray";}function demo3(){alert("shubiaoyiru");}function demo4(){alert("shubiaoyichu");}function demo5(){alert("shubiaoyidong");}function demo6(event){let x = event.pageX;let y = event.pageY;document.getElementsByTagName("span")[0].innerText=x + ":" + y;}function demo7(event){let num= event.keyCode;//let num = event.code;//alert(num);let img = document.getElementsByTagName("img")[0];if(num== 87){let val = img.style.top;let i = parseInt(val.substring(0, val.length - 2)) - 50;img.style.top=i+"px";}else 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";}return false;}</script></head><body><div style="height: 300px; width: 300px; background-color: red;display: inline-block;"onclick="demo1()"ondblclick="demo2()"onmousemove="demo6(event)"></div><span> </span><input type="text" onkeydown="return demo7(event)" /><img src="img/OIP-C.jpg" style="height: 100px; width: 100px;position: absolute;/*设置图片绝对定位*/top: 500px;left: 300px;"/><a href="https://www.baidu.com/s?wd=蝙蝠侠"  onclick="demo10()">dianji</a><script type="text/javascript">function demo10(){return false;}</script></body>
</html>

3. 事件

事件：事件类型，事件对象，阻止事件

事件对象：描述当前正在进行的事件，存储该事件内的所有信息的对象，就是事件对象

鼠标事件：单机、双击、鼠标移动、鼠标移入、鼠标移出。

键盘事件：按下、抬起。

表单事件：获得焦点事件（鼠标在点）、失去焦点事件、内容更改事件、表单提交事件。

加载事件：body标签的加载

补充：
JavaScript代码所写的位置
1、可以直接放在标签里
2、当前页面里
3、放在外部js文件里用，src引入源文件进行使用

二、jQuery

是JavaScript的函数库之一，对JavaScript进行了封装。将常用、复杂的操作进行函数化封装，直接调用，降低了使用的难度，能够大幅度降低使用JS的难度。可以简化DOM操作

1. JavaScript与jQuery区别

1、js选择器功能弱，jQuery选择器强
2、DOM操作繁琐，jQuery对DOM进行封装
3、浏览器兼容性不好，jQuery对浏览器兼容性好
4、动画能力弱，jQuery动画能力强
5、体积小
6、事件处理机制可靠
7、使用隐式迭代简化编程
8、丰富的插件支持

2. 获得标签对象

$(“选择器”)：直接获得所有符合的标签对象
$(“html代码”)：结构
JavaScript的对象要通过jQuery进行
let obj = document.getElementsByTagName(“div”)[0];
$(obj).css(“height”, “500px”);

jQuery的对象要通过JavaScript进行

设计名
因为使用jQuery，我们先要让其他控件提前就绪，所以我们所有jQuery代码都写在$(document).ready()里。

3. 代码示例

3.1 设置表格隔行换色

$("body").css("background-color", "yellow");
$("tr:even").css("background-color","blue");
$("tr:odd").css("background-color","red");

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

$("tr:even").click(function(){$(this).css("background-color","aqua");});$("tr:odd").click(function(){$(this).css("background-color","orangered");});

！！！jQuery要保证窗体加载后，在做其他操作，所以方法代码都写在document.ready内
操作属性

3.3 获取属性

//获取属性
alert($("img").attr("src"));
alert($("input").attr("value"));//最好不用
alert($("input").val());//用这个

3.4 操作外观

3.4.1 第一种方式

let obj = document.getElementsByTagName("div")[0];
$(obj).css("height", "500px");
$(obj).css("width", "300px");
$(obj).css("background-color", "red");
$("div")[0].style.backgroundColor = "red";

3.4.2 第二种方式

//设置属性
<style type="text/css">.a{/*类选择器*/height=500px；width=300px;background-color="azure";}
</style>
//使用更改
(obj).addClass("a");

3.5 结构与事件

3.5.1 面包例子

放到一个例子里讲，这个例子是算面包总价，并且我们可以删除面包、添加面包，使用jQuery来编写。

<!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(){var sum =0;$("[value='buy']").click(function(){let mon = parseInt(Math.random()*10);$("<input type='text' value='" +mon+"'/><input type='button' value='delete'/><br />").appendTo($("div").last());sum+=mon;$("#sds").text(sum);});$(document).on("click", "[value='delete']", function(){sum -= $(this).prev().val();$(this).prev().remove();$(this).next().remove();$(this).remove();$("#sds").text(sum);});});</script></head><body><input type="button" value="buy" /><div>sum is</div><div id="sds"></div><div></div></body>
</html>

3.5.2 图片跳转例子

实现不同图片跳转不同连接：

<!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">var num = 3;$(document).ready(function(){$("[value='start']").click(close1)});function close1(){window.setInterval(function(){num--;if(num == 10){$("#pio").attr("src", "../img/R-C.jpg");$("#1ds").text(num);}else if(num == 0){$("#pio").attr("src", "../img/OIP-C.jpg");$("#1ds").text(num);num = 20;$("#1ds").text(num);}else$("#1ds").text(num);}, 1000);$("#pio").click(function(){if(num<10)window.location.href="https://www.baidu.com/s";elsewindow.location.href="https://www.so.com/s";});}	</script></head><body><input type="image" id="pio" alt="pic" style="height: 150px;width: 150px;" src="../img/R-C.jpg" title="superman" /><br /><input type="button" value="start"/><br /><div id="1ds">3</div></body>
</html>

4. 表单验证

直接上代码，其实跟普通的表单操作没什么区别：

<!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，必须前三项是数字，后三项由abc组成$("[name='empno']").blur(ckempno);function ckempno(){let val = $(this).val();let reg = /^\d{3}[a-cA-C]{3}$/;if(reg.test(val)){$(this).next().css("color","green").text("✓");return true;}else{$(this).next().css("color","red").text("员工编号必须是6位，3位数字3位abc");return false;}}//2验证员工姓名是2-10位汉字$("[name='ename']").blur(ckename);function ckename(){let val = $(this).val();let reg=/^[\u4e00-\u9fa5]{2,10}$/;if(reg.test(val)){$(this).next().css("color","green").text("✓");return true;}else{$(this).next().css("color","red").text("员工姓名必须是2-10位汉字");return false;}}//3验证邮箱$("[name='email']").blur(ckemail);function ckemail(){let val = $(this).val();let reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;if(reg.test(val)){$(this).next().css("color","green").text("✓");return true;}else{$(this).next().css("color","red").text("邮箱格式实例123456@123.com");return false;}}//4验证工资$("[name='sal']").blur(cksal);function cksal(){let val = $(this).val();if(Number(val)>=0){$(this).next().css("color","green").text("✓");return true;}else{$(this).next().css("color","red").text("工资格式不正确");return false;}}//5验证下拉列表，不能选择第一项$("[name='mgr']").change(ckmgr);function ckmgr(){//selectedIndex 是下拉列表中，选中的option下标是多少//或者$(this).val()!=-1if($(this)[0].selectedIndex != 0){$(this).next().css("color","green").text("✓");return true;}else{$(this).next().css("color","red").text("必须选择一个实际存在的经理编号");return false;}}//6验证复选框选两个以上$("[type='checkbox']").mouseout(ckbox);function ckbox(){let arr = $("[type='checkbox'][name='planet']");let count = 0;for(let i = 0; i < arr.length; i++){if(arr[i].checked){count++;}}if(count >= 2){$("#planet").css("color","green").text("✓");return true;}else{$("#planet").css("color","red").text("必须选择两个星球");return false;}}//验证入职时间$("[type='date']").mouseout(ckhiredate);function ckhiredate(){if($(this).val()!=""){$(this).next().css("color","green").text("✓");return true;}else{$(this).next().css("color","red").text("必须选择一个日期");return false;}}//验证提交按钮$("[name='ck']").click(ckagree);$("form").submit(cksubmit);//验证是否需要阻止提交function cksubmit(){return ckempno() && ckename() && ckemail() && cksal() && ckmgr() && ckbox() && ckhiredate();}});		//验证条例function ckagree(){let bool = $("[name='ck']").prop("checked");if(bool)document.getElementById("sub").disabled=false;else	document.getElementById("sub").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" />运维<br />经理编号：<select name="mgr"><option value="-1" disabled>---请选择---</option><option value="7388">7388</option><option value="7312" selected>7312</option><option value="7528">7528</option><option value="7128">7128</option></select><span></span><br />你最喜欢的星球：<input type="checkbox" name="planet" value="1"/>地球<input type="checkbox" name="planet" value="2"/>气球<input type="checkbox" name="planet" value="3"/>太阳<input type="checkbox" name="planet" value="4"/>ൠ♄§星<span id="planet"></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 type="submit" id="sub" value="表单验证" disabled/></form></body>
</html>

总结

本文介绍了
1、使用DOM进行对控件进行操作；
2、使用jQuery改善DOM操作；
以及例子：
1、图片移动；
2、面包总额；
3、不同图片跳转链接；
4、使用jQuery进行表单验证。

我们星球上有一种特殊的生物，他的五脏六腑都聚集在一起呈球状，从肉球中伸出来很多触手，每个触手上都有一个器官，他的触手尖端由干细胞构成，如果某个特殊功能的触手被砍掉了，另一个触手尖端上的干细胞会快速分化，代替原来触手的功能，同时原来的触手也会慢慢长回来。他在我们ൠ♄§星的名称是♇〒﹞₪，翻译成中音类似’古咯斯巴’。