Html—JavaScript（三）

最新推荐文章于 2023-06-02 16:02:13 发布

谛庭

最新推荐文章于 2023-06-02 16:02:13 发布

阅读量175

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44193450/article/details/107722494

版权

JavaScript

1.事件

1.1 常用事件类型

onload:当页面或图像加载完后立即触发

onblur:元素失去焦点

onfocus:元素获得焦点

onclick:单击

onchange:改变内容

onmouseover:鼠标移动到

onmouseout:鼠标离开

onkeyup:键盘按键抬起

onkeydown:键盘按键按下

1.2事件流和事件模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <div id="myDiv">Click me</div>
    </body>
</html>

事件捕获
document–>html–>body–>div
事件冒泡
div–>body–>html–>document

1.3事件处理程序

1.3.1HTML事件处理程序

<button type="button" onclick="alert('HTML 事件处理程序  处理程序')">HTML 事件处理程序</button>

1.3.2DOM0级事件处理程序

注意：若写了两个一样的点击事件，那个只有第一个有效，但是一般不能这么写。

<button type="button" id="lbw">DOM0级按钮</button>
<script type="text/javascript">
    var lbw=document.getElementById("lbw");
    lbw.onclick=function(){
        console.log("我是卢本伟");
    }
    
    lbw.onclick=function(){
        console.log("我是五五开");
    }
</script>

1.3.3DOM2级事件处理程序

注意：若写了两个一样的点击事件，那么这两个点击事件都会有效，并且按着程序的先后进行执行。

<button type="button" id="pdd">DOM2级   按钮</button>
<button type="button" id="sc">删除事件监听 按钮</button>
<script type="text/javascript">
    var pdd=document.getElementById("pdd");
    pdd.addEventListener('click',function(){
        console.log("我是骚弟弟");
    });

    function fn(){
        console.log("我是猪");
    }
    pdd.addEventListener('click',fn);

    var sc=document.getElementById("sc");
    sc.onclick=function(){
        pdd.removeEventListener('click',fn);
    }
</script>

2.BOM对象

2.1window对象的方法

2.1.1对话框

（1）消息框：alter()
（2）输入框：prompt () 返回值为输入框中的内容
参数：第一个参数：输入框中应该要输入的内容
第二个参数：往输入框中输入默认的文本
（3）确认框：confirm 返回值为true或flase

<button type="button" onclick="fun1()">alert 消息框</button>
<button type="button" onclick="fun2()">prompt 输入框</button>
<button type="button" onclick="fun3()">confirm 确认框</button>
<script type="text/javascript">
    function fun1(){
        alert("alter消息框");
    }

    function fun2(){
        var name=prompt("请输入你的VIP账户","leader");
        if(name=="admin"){
            alert("登录成功"+name+"VIP");
        }else{
            alert("普通用户登录成功"+name);
        }
    }

    function fun3(){
        var bol=confirm("确认删除吗？");
        if(bol){
            alert("删除成功");
        }else{
            alert("取消成功");
        }
    }
</script>

2.1.2浏览器窗口

1.打开窗口

<button type="button" onclick="fun1()">打开空窗口</button>
<button type="button" onclick="fun2()">打开本地资源</button>
<button type="button" onclick="fun3()">打开淘宝</button>
<button type="button" onclick="fun4()">当前窗口打开百度</button>
<script type="text/javascript">
    function fun1(){
        open();
    }

    function fun2(){
        open("01_系统弹出框.html");
    }

    function fun3(){
        open("http://www.taobao.com");
    }

    function fun4(){
        open("http://www.baidu.com","_self");
    }
</script>

2.关闭当前窗口

<button type="button" onclick="fun5()">关闭窗口</button>
<script type="text/javascript">
    function fun5(){
        window.close();
    }
</script>

2.1.3与时间相关的函数

setTimeOut()
在指定毫秒数之后执行返回ID 方便关闭
var id = window.setTimeOut(“函数名”,毫秒数);
setInterval()
每隔指定毫秒数执行一次返回ID 方便关闭
var id = window.setInterval(“函数名”,毫秒数);
例子：制作一个时钟

<button type="button" onclick="startTime()">开始</button>
<button type="button" onclick="closeTime()">关闭</button>

<h2 id="tm"></h2>
<script type="text/javascript">
    function start(){
        var date=new Date();
        var newDate=formatDate(date);
        if(date.getSeconds()==0){
            document.getElementById("tm").style.color="red";
            document.getElementById("tm").innerHTML = newDate;
        }else{
            document.getElementById("tm").style.color="black";
            document.getElementById("tm").innerHTML = newDate;
        }

    }
    function startTime(){
        id=setInterval(start,1000);
    }
    function closeTime(){
        window.clearInterval(id);
    }
    function formatDate(date){
        var year=date.getFullYear();
        var month=date.getMonth()+1<10?'0'+(date.getMonth()+1):(date.getMonth()+1);
        var dat=date.getDate()<10?'0'+date.getDate():date.getDate();
        var hour=date.getHours()<10?'0'+date.getHours():date.getHours();
        var min=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes();
        var secon=date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds();

        var str=year+'-'+month+'-'+dat+' '+hour+':'+min+':'+secon;
        return str;
    }
</script>

3. history对象

history
属性
length 获取到历史网页的个数
方法
back() ; 后退一个页面
forward(); 前进一个页面
go(1); 数据为正数1，前进数据为负数后退

注意：当下一个页面已经被打开之后，才能通过这个方法去进入下一个页面

第一个页面：
<body>
    <h2>页面1</h2>
    <a href="05_history对象2.html">跳转到页面二</a>
</body>
第二个页面：
<body>
    <h2>页面2</h2>
    <a href="05_history对象3.html">跳转到页面三</a>
    <a href="javascript:window.history.forward()">前进一个</a> <!--要先打开页面三，再回到页面二的时候，这个a标签才有效-->
    <a href="javascript:window.history.back()">后退一个</a>
</body>
第三个页面：
<body>
    <h2>页面3</h2>
    <a href="javascript:window.history.back()">回退一个</a>
    <a href="javascript:window.history.go(-2)">回退二个</a>
</body>

4.location对象

location
window.location.href=; 获取当前网页的url地址
方法
reload () 重新加载
replace () 替换

<h2>lcoation</h2>

<button type="button" onclick="test()">button</button>
<button type="button" onclick="test2()">刷新</button>
<button type="button" onclick="test3()">替换</button>

<script type="text/javascript">
    function test(){
        window.location.href="01_系统弹出框.html";
    }

    function test2(){
        location.reload();
    }

    function test3(){
        location.replace("http://www.taobao.com");
    }
</script>

5.DOM对象

5.1节点

注意： 操作DOM必须等节点初始化完毕之后，才能执行。
因此有两种方式处理：
（1）把 script 调用标签移到html末尾即可
（2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS

5.2获取节点

getElementById() 根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName() 根据标签名获取dom对象数组
getElementsByClassName() 根据样式名获取dom对象数组
getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值

<p id="p1" class="para">这又是一个段落</p>
		<p id="p1" class="para">这是一个段落<span>文本</span></p>
		<input type="text" class="para" name="txt" />
		<input type="checkbox" name="hobby" value="游泳" />游泳
		<input type="checkbox" name="hobby" value="篮球" />篮球
		<input type="checkbox" name="hobby" value="足球" />足球
		<pre name="pr">
			
		</pre>
		<hr />
		<a href="javascript:testById()" >按照id获取</a>
		<a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
		<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
		<a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>
		
		<script type="text/javascript">
			function testById(){
				var p=document.getElementById("p1");
				console.log(p);
			}
			
			function testByName(){
				var check=document.getElementsByName("hobby");
				console.log(check);
			}
			
			function testByTagName(){
				var inp=document.getElementsByTagName("a");
				console.log(inp);
			}
			
			function testByClass(){
				var pi=document.getElementsByClassName("para");
				console.log(pi);
			}
</script>

谛庭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html—JavaScript（三）

JavaScript1.事件1.1 常用事件类型onload:当页面或图像加载完后立即触发onblur:元素失去焦点onfocus:元素获得焦点onclick:单击onchange:改变内容onmouseover:鼠标移动到onmouseout:鼠标离开onkeyup:键盘按键抬起onkeydown:键盘按键按下1.2事件流和事件模型<!DOCTYPE html><html> <head> <meta charse
复制链接

扫一扫