系列文章目录
文章目录
前言
本文我们将讲述：
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";
else
window.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()!=-1
if($(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进行表单验证。
我们星球上有一种特殊的生物，他的五脏六腑都聚集在一起呈球状，从肉球中伸出来很多触手，每个触手上都有一个器官，他的触手尖端由干细胞构成，如果某个特殊功能的触手被砍掉了，另一个触手尖端上的干细胞会快速分化，代替原来触手的功能，同时原来的触手也会慢慢长回来。他在我们ൠ♄§星的名称是♇〒﹞₪，翻译成中音类似’古咯斯巴’。
扫一扫
9187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
