2020-11-24

最新推荐文章于 2023-09-23 17:40:07 发布
最新推荐文章于 2023-09-23 17:40:07 发布
阅读量106 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52398687/article/details/110070041
版权

JavaScript_9

Javascript中的dom对象
1.控制html元素
2.控制html元素的属性
3.控制css
4.控制事件

1.按钮点击事件 onclick
具体用法:

<script>
function    点击事件的处理函数（）{
    //事件处理动作
}
</script>
<input type=”button” value=”按钮”  onclick=”按钮点击以后的处理函数”/>

2.页面初始化事件 onload
具体用法:

<script>
function    处理函数（）{
    //事件处理动作
}
</script>
<body   onload=”处理函数”></body>

3.常见的javascript事件，事件的具体使用方法

1.页面初始化事件
方法一：

    <title>Document</title>
    <script>
        function testOnload(){
            alert("李博，耗子尾汁！");
        }
    </script>
</head>
<body onload="testOnload();">
    
</body>
</html>

在这里插入图片描述
方法二：

    <title>Document</title>
    <script>
    //通过window对象调用onload事件
        window.onload=function(){
            alert("页面初始化之李博耗子尾汁！")
        }
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
2.按钮点击事件 onclick
方法一：

    <title>Document</title>
    <script>
        function testClick(){
            alert("马保国之徒李博");
        }
    </script>
</head>
<body>
    <input type="button"  value="李博耗子尾汁事件！"  onclick="testClick();">
</body>
</html>

在这里插入图片描述
方法二：

    <title>Document</title>
    <script>
        function testClick(){
            alert("马保国之徒李博");
        }
        window.onload=function(){
            var libo=document.getElementById("libo");//object HTMLInputElement
            //alert(libo);
            libo.onclick=function(){
                alert("李博打马保国事件！");
            }
        }
    </script>
</head>
<body>
    <input type="button"  value="李博耗子尾汁事件！"  onclick="testClick();"><br>
    <input id="libo" type="button"  value="李博/陈廷、耗子尾汁事件！" >
</body>
</html>

在这里插入图片描述
3. onchange 事件，当用户改变输入字段的内容时触发

方法一：属性控制

    <title>Document</title>
    <script>
        function testonchange(){
            alert("马保国劝李博耗子尾汁!")
        }
    </script>
</head>
<body>
    <input type="text"  value=" 李博打马保国！"  onchange="testonchange();">
</body>
</html>

在这里插入图片描述
方法二：DOM对象控制

    <title>Document</title>
    <script>
        function testonchange(){
            alert("马保国劝李博耗子尾汁!")
        }
        window.onload=function(){
            var qipian=document.getElementById("qipian");
            qipian.onchange=function(){
                alert("马保国劝李博耗子尾汁,并用闪电五连鞭教训李博!");
            }
        }
    </script>
</head>
<body>
    <input type="text"  value=" 李博打马保国！"  onchange="testonchange();"><br>
    <input id="qipian" type="text"  value=" 李博打马保国！"  >
</body>
</html>

在这里插入图片描述
4.onfocus当获得焦点时触发
5.onblur当失去焦点时触发

    <title>Document</title>
    <script>
        function testonfocus(){
            var touxi=document.getElementById("touxi"); 
            touxi .value="";
        }
        window.onload=function(){
            var touxi=document.getElementById("touxi");
            touxi.onblur=function(){
                //alert("失去焦点")
                var val=touxi.value;
                //alert("val=="+val);
                if(val==""){
                   alert("输入不能为空，李博不能偷袭六十九岁的老人！");
                }
            }
        }
    </script>
</head>
<body>
    <input  id="touxi" type="text" value="李博三拳KO马保国" onfocus="testonfocus();">
</body>
</html>

在这里插入图片描述
在这里插入图片描述
例子：手机号码

    <title>Document</title>
    <script>
        function  testonfocus(){
            var text1=document.getElementById("text1");
            text1.value="";
        }
        
        window.onload=function(){
                var text1=document.getElementById("text1");
                text1.onblur=function(){
                    var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
                    var val=text1.value;
                    var boo=reg1.test(val);
                    if(boo){
                        alert("手机号码正确，获取短息验证码");
                    }else{
                        alert("手机号码不正确，请重新输入");
                    }
                }
        }
    </script>
</head>
<body>
    <input id="text1" type="text"  value="请输入手机号码" onfocus="testonfocus();" /><br>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
6.onmouseover 和 onmouseout 事件

    <title>Document</title>
    <script>
        window.onload=function(){
            var img1=document.getElementById("img1");
            img1.onmouseover=function(){
                img1.style.width="300px";
                img1.style.height="300px";
            }
            img1.onmouseup=function(){
                img1.style.width="400px";
                img1.style.height="400px";
            }
        }
    </script>
</head>
<body>
    <img id="img1" src="img/4.jpg" alt="">
</body>
</html>

在这里插入图片描述
在这里插入图片描述
7.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。

    <title>Document</title>
    <script>
        //1.普通按钮type="button",无法触发表单提交事件onsubmit
		//2.onsubmit事件对应的处理函数一定要有返回值【boolean】
        //true---提交表单数据
		//false---不提交表单数据
        //3.表单的οnsubmit="return 处理函数";
        function testOnsubmit(){
            //alert("表单提交事件");
            var  text1=document.getElementById("text1");
            var  pass1=document.getElementById("pass1");
            var  span1=document.getElementById("span1");
            var  username=text1.value;
            var  password=pass1.value;
            if(username=="libo" && password=="haoziweizhi" ){
                alert("登录成功！年轻人")
                return   true;
            }else{
                span1.innerHTML="<font color='red' size='20'>年轻人，不讲武德 来偷袭，六十九岁老同志</font>";
                return  false;
            }
           
        }
    </script>
</head>
<body>
    <span id="span1"></span>
    <form action="#" method="get" onsubmit="return testOnsubmit()">
        用户名：<input id="text1" name="username" type="text"><br>
        密码：  <input id="pass1" name="password" type="password"><br>
    <input type="button"  value="普通按钮"><br>
    <input type="submit"  value="登录">
    </form>
</body>
</html>

登录正确时：
在这里插入图片描述
登录错误时：
在这里插入图片描述
8.onkeydown 事件会在用户按下一个键盘按键时发生。

    <title>Document</title>
    <script>
        //1.testKeydown事件在调用的时候需要一个event参数
		//2.event参数的keyCode属性得到键盘按键对应的数字。
        function testkeydown(event){
            alert("键盘按下==" +event.keyCode);
            var num=event.keyCode;
            if(num==65 || num==37){
                alert("马保国老同志向你打出了左勾拳！")
            }
            if(num==68 || num==39){
					alert("马保国老同志向你打出了右勾拳！");
				}
			if(num==87 || num==38){
					alert("马保国老同志向你踢出了上抬腿！");
				}
			if(num==83 || num==40){
					alert("马保国老同志向你踢出了下劈跨！");
				}
			if(num==32){
					alert("马保国老师喊了暂停");
				}
        }
       
    </script>
</head>
<body onkeydown="testkeydown(event);">
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
https://www.w3school.com.cn/jsref/dom_obj_event.asp

onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中。
onsubmit确认按钮被点击。
onunload用户退出页面。

创建新的 HTML 元素

document.createElement(“元素名称”);
document.createTextNode(“文本内容”);

父元素的dom对象.appendChild(node);
删除元素 父元素的dom对象.removeChild(子元素的dom对象);

    <title>Document</title>
    <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
        }
    </style>
    <script>
        window.onload=function(){
            var addbut=document.getElementById("add");
            var deletebut=document.getElementById("delete");
            addbut.onclick=function(){
                 //创建元素
                var  hdom=document.createElement("h1");
                var  htext=document.createTextNode("李博ko马保国！");
                hdom.appendChild(htext);
                var divdom=document.getElementById("div1");
                divdom.appendChild(hdom);
            }
            deletebut.onclick=function(){
					var divdom=document.getElementById("div1");
					var hdom=document.getElementById("h1");
					//删除元素
					divdom.removeChild(hdom);
				}
        }
    </script>
</head>
<body>
    <div id="div1">
        <h1 id="h1">马保国老师，闪电五连鞭！</h1>
    </div>
    <input id="add" type="button" value="李博三拳解决马老师！"><br>
    <input id="delete" type="button" value="马老师用闪电五连鞭教训李博">
</body>
</html>

添加元素：
在这里插入图片描述
删除元素：
在这里插入图片描述

小姐夫。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 页面的生命周期、HTML 事件
墨鱼菜鸡
07-11 922
From：https://blog.csdn.net/WuLex/article/details/101016936 1、页面生命周期 HTML页面的生命周期有以下三个重要事件，每个事件都有特定的用途 DOMContentLoaded： 浏览器已经完全加载 HTML，DOM 树已经构建完毕，js 可以访问所有DOM节点，初始化界面。但是像是&l...
初始HTML
weixin_45813597的博客
07-17 748
学习HTML基础知识
HTML.5初始
qq_52796714的博客
07-18 389
初始HTML5，对其页面结构，基本标签认知
关于页面初始化
m0_63263973的博客
08-05 1134
就成功初始化了，就说明，当把一个html页面引入另一个html页面时，初始化需要用jq的初始化方法。今天想把导航栏导入一个单独的html页面时，发现导航栏竟然不能初始化。我之前用的是js的页面初始化的方法。于是我换成了jq的页面初始化的方法。这里再提供一个jq初始化方法。...
页面初始化要做的操作
最新发布
czlj1998的博客
09-23 1000
页面交互效果：在页面初始化后，可以通过JavaScript实现一些交互效果，如动画、轮播图、表单验证等。加载所需资源：在页面初始化时，需要加载所需的资源，如CSS文件、JavaScript文件、字体文件、图片等。可以使用HTML标签和属性来定义页面的结构和内容。样式初始化：在页面初始化时，可以对一些基本样式进行初始化，如设置默认字体、颜色、边距等。在前端开发中，页面初始化是一个重要的步骤，它涉及到一些常见的操作。标签中可以设置页面的标题和描述，以便在浏览器的标签页和搜索结果中显示正确的信息。
2020-11-25
weixin_45636954的博客
11-25 778
数据库系统概论 软件工程实验报告 数据库设计与应用开发大作业数据库系统概论实验目的实验器材实验内容1.USE StudentMIS2.学生信息查询页面：3.授课信息查询页面:4.选课信息查询页面：5.任课教师查询页面：6.班级课程查询页面：在学生信息管理系统——教学模块的开发过程中，需要实现以下数据统计页面：1、班级人数统计页面：2、学生成绩统计页面：3、创建选课统计页面需要的视图:实验步骤： 实验目的 1.学会建立数据库的一般思路 2.深入的学习掌握数据库设计的各项过程和要求 3.熟练掌握SQL语句
2020-11-26
weixin_47628082的博客
11-26 1338
输入一个字符串，分别统计字符串中，ASCII值为奇数和偶数的字符个数并输出。 输入一个字符串，把其中的字母字符大小写转换一下，同时把非字母字符单独存放在一个新的字符数组最后以字符串的方式输出（如：输入a2Bn4Pc8defWWg5，输出A2Bn4pC8DEFwwG5和2484）. 编写程序实现对以下数组的逆序输出（已知数组a中的数据是10 20 40 30 24 15 8 17 35 11） #include<stdio.h> void main() { int a[10]={10,20,40
magento-ce-2.4.0-2020-07-24-11-15-38.tar.gz
08-25
magento-ce-2.4.0-2020-07-24-11-15-38.tar.gz 不带sample data
食品饮料行业：旺季驱动，白酒景气度较优_2020-11-24_中国银河证券.pdf
09-01
2020年11月24日，中国银河证券发布的报告指出，尽管受到新冠疫情的影响，但食品饮料行业，特别是白酒领域，展现出了较高的景气度。 【白酒行业】白酒作为中国特有的饮品，其市场在旺季受到显著驱动。次高端白酒市场...
HTML页面初始化
06-16
重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。
init:html初始化
06-14
HTML初始集 内容 HTML 字符编码为 UTF-8 说明是 html5 删除未使用的js 在初始状态，id = `Wrapper` 被设置 CSS 用 YUI 重置 less.js 可用 JavaScript 在js文件夹的main.js中描述 main.js 加载了 jQery Underscore.js 也是初始加载的 图书馆相关 JavaScript jQuery 下划线.js 三.js 少.js Modernizr.js html5.js excanvas.js CSS YUI 重置 CSS
html初始化代码
11-05
针对各浏览器对html标签默认初始值的不同，而编写的代码。
weibo-trending-hot-search：微博热搜榜，记录从2020-11-24日开始的微博热门搜索。每小时抓取一次数据，按天压缩
02-09
微博趋势热搜微博热搜榜，记录从2020-11-24日开始的微博热门搜索。每小时抓取一次数据，按天。相关项目今日热门搜索历史归档执照的许可证使用MIT许可证发布。具体内容请查看文件。
zhihu-trending-hot-questions：知乎热门话题，记录从2020-11-24日开始的知乎热门话题。每小时抓取一次数据，按天压缩
02-08
这个项目从2020年11月24日开始，每小时更新一次，将每小时的热门话题数据进行记录，并按天进行打包压缩。 【描述】：该项目的主要目标是提供知乎热门话题的实时趋势分析。它通过每小时抓取一次数据，确保了信息的...
前端技能点--页面初始化方法
程序员大阳
11-17 3398
window.onload代表窗口页面全部加载完毕（包括图片等）后触发的事件
HTML事件的种类
qq_38220914的博客
11-03 747
在IE和Opera浏览器中，只要窗口边框被拖动，就触发该事件，在Mozilla浏览器中，resize 事件只是在停止改变窗口大小时才会触发。load 事件一般用于对页面进行初始化，它在页面完全载入后发生（注意：在页面完全载入前任何DOM操作都是不能进行的）。document.getElementById("bleft").innerHTML = "水平滚动距离："+document.body.scrollLeft;load 事件一般在 标签中处理，但它实际上是由 window 对象处理的。
HTML 页面初始化
时越的博客
09-03 2401
body {margin:0;padding:0;}
INSERT INTO `借阅表` VALUES (100001,'123413','0001','2020-11-05',NULL,'借阅'), (100002,'223411','0002','2020-9-28',2020-10-13,'已还'), (100003,'321123','1001','2020-7-01',NULL,'过期'), (100004,'321124','2001','2020-10-09',2020-10-14,'已还'), (100005,'321124','0001','2020-10-15',NULL,'借阅'), (100006,'223411','2001','2020-10-16',NULL,'借阅'), (100007,'411111','1002','2020-9-01',2020-9-24,'已还'), (100008,'411111','0001','2020-9-25',NULL,'借阅'), (100009,'411111','1001','2020-10-08',NULL,'借阅');
05-11
- 借阅编号：100007，读者编号：411111，书籍编号：1002，借阅日期：2020-9-01，归还日期：2020-9-24，借阅状态：已还 - 借阅编号：100008，读者编号：411111，书籍编号：0001，借阅日期：2020-9-25，归还日期：NULL...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值