0
点赞
收藏
分享

微信扫一扫

JavaScript Dom 事件 Bom 定时器方法

青青子衿谈育儿 2022-03-11 阅读 60
mysql数据库jar

目录



  Dom

介绍
控制Html文档的内容

概念:将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态对象

核心DOM 针对任何结构化文档的标准模型
Attribute:属性对象
Text:文本对象
Comment:注释对象

Documnet:文档对象
Element:元素对象
获取Element对象
getElementsByTagName():根据元素名称获取元素对象们,返回值是一个数组

 div class="div2">1</div>
<div class="div1">1</div>
<script>
var sc=document.getElementsByTagName("div");
alert(sc.length)//获取长度，有多少个
</script>

getElementsByClassName():根据class属性获取元素对象们，返回值是一个数组

 <div class="div1">1</div>
<div class="div1">1</div>
<script>
	var sc=document.getElementsByClassName("div1");
alert(sc.length)
</script>

getElementsByname():根据name属性获取元素对象，返回值是一个数组

<body>
<input type="button" name="name">
<script>
var sc=document.getElementsByName("name");
alert(sc.length)

getElementsById():根据id属性值获取元素对象,id属性值一般唯一

创建其他DOM对象
createComment():创建注释节点
createElement():创建元素节点,是在对象中创建一个对象
createTextNode():创建文本节点
createAttribute(name):创建拥有指定名称属性节点，并返回新的Attr对象

HTML Dom

标签体的设置和获取：innerHTML
innerHTML:获取到标签体内容

<div id ="div1"></div>
<script>
var div=document.getElementById("div1")
div.innerHTML;
</script>

使用HTML元素对象属性
控制元素样式
使用元素的style属性来设置

	<input type="button" id="x1">
<script>
var input = document.getElementById("x1");
input.onclick=function (){
    input.style.width="200px";
}
</script>

提前定义类选择器的样式，通过元素的classname属性来设置class属性值 
 <style>
    .d1{
        width: 100px;
        height: 100px;
        border: 1px  solid red;
    }
</style>
</head>
<body>
<input type="button" id="x1">
<script>
var input = document.getElementById("x1");
input.onclick=function (){
   input.className="d1";
}

Node:节点对象,其他5个的父对象

Node对象是整个DOM的主要的数据类型
特点:所有dom对象都可以被认为是一个节点
方法
CRUD dom树
appendChild():向节点的子节点列表的结尾添加新的子节点

  <div id="h1">1
   <div id="h2">2
 <div id="h3"></div>
   </div>
   </div>
<a href="javascript:void(0);" id="name">属性</a>
<script>
    let elm = document.getElementById("name");
elm.onclick=function (){
    let h1 = document.getElementById("h1");
    //创建div节点
    let div = document.createElement("div");
    div.setAttribute("id","h3");
    h1.appendChild(h3);
}
</script>

removeChild():删除(并返回)当前节点的指定子节点

   <div id="h1">1
   <div id="h2">2</div>
 </div>
<a href="javascript:void(0);" id="name">属性</a>
<script>
var el = document.getElementById("name");
  el.onclick=function (){
  var h1 = document.getElementById("h1");
  var h2 = document.getElementById("h2");
	 h1.removeChild(h2);
    }

replaveChild():用新节点替换一个子节点

属性:
parentNode:返回节点的父对象

Element

Element 对象表示 HTML 元素 Element 对象可以拥有类型为元素节点文本节点、注释节点的子节点。

创建:通过documetn获取和创建
方法：
removeAttribute():删除属性

点击a标签删除属性

<a href="" id="name">属性</a>

<script>
    //点击a标签删除href属性
   var elementById = document.getElementById("name");
elementById.onclick=function (){
   var elme = document.getElementsByTagName("a")[0];
   elme.removeAttribute("href");
       }
</script>

setAttriibutre():设置属性 设置属性案例 
<input  type="button" value="效果">
<input id="name" type="button" value="设置效果" >
<script>
   //通过document调用input的id值来设置input变改为文本框
   var elementById = document.getElementById("name");
  elementById.onclick=function (){
     var elme = document.getElementsByTagName("input")[0];
 	  elme.setAttribute("type","text");//设置input中的属性来更改input的属性
 	      }
</script>



修改标签体内容 属性 innerHTML

	<P id="text">小样</P>
<script>
		var emo=document.getElementById("text")
		alert("改变");
		emo.innerHTML="小菜";
</script>

效果
获取页面标签(元素)

代码:
document.getElementById(“id值”)通过Html中的id获取元素对象

document.getElementById(“id值”)
通过所设置的id值的HTML对象可以来修改原对象的属性值
代码解释:

<body>
	<img id="img" src="../img/mmexport1646140315201.jpg"><!-- 原图片-->
<script>
	 var id1= document.getElementById("img");
	id1.src="../img/QQ截图20220302181120.png";//更换了图片
</script>
</body>




  事件

功能
什么被什么执行了操作,触发的什么代码

绑定事务
直接在HTML标签上,指定事件的属性操作,属性值就是js代码

事件:onclick 单击事件

通过js获取元素对象,指定事件属性,设置一个函数

案例 头像点击更换

<script>
	    var fa=false;
function fun(){
    var src1=document.getElementById("x");
    if (fa){
        src1.src="../img/x.png";
        fa=false;
    }else {
        src1.src="../img/y.png";
        fa=true;
    }
}
</script>
</head>
<body>
	<img src="../img/x.png" id="x" onclick="fun()">
</body>
<br>








  BOM

基本概念

Brwser Object Model 浏览器对象模型

对象

Window:窗口对象

属性

获取其他BOM对象
history:对History对象的只读引用 获取到[object History]
location:对窗口或框架的Location对象. 获取到当前页面的地址信息 http://localhost:63342/js/cn/js/
Navigator:对Navigator对象的只读引用 获取到导航器的信息 function Navigator() { [native code] }
Screen:对Screen对象的只读引用 获取到屏幕的信息 function Screen() { [native code] }

获取DOM对象
document:获取文档对象

使用格式
window.方法名(); 对象不需要创建直接使用
方法名(); window可以省用

方法

弹出框:

alert():显示带有一段消息和一个确定按钮的警告框

confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
确定返回true,取消返回 false
	var sc= confirm("确定退出或取消");
if (sc){
    document.write("进入")
}else {
    document.write("退出")
}

propet():显示提示用户输入的对话框
		用户输入什么返回什么值

关闭和开启方法
close():关闭浏览器
理解：
想关闭哪个调用哪个
open():打开一个浏览器窗口

<script>
 var num=document.getElementById("x");
		 var se;
 num.onclick=function (){
 //打开窗口
    se= open("https://www.baidu.com");
 }
	 var nu1=document.getElementById("y");
nu1.onclick=function (){
	    //关闭窗口
  	   se.close();
 }


定时器方法

 setTimeout()：指定的毫秒数后调用函数,或计算表达式 时间之后就执行某些代码,只执行一次 一次性的定时器 拥有一个返回值 唯一的标识，用于取消定时器

参数: :js代码或对象 毫秒值
clearTimeout(): 取消由setTimeout() 方法设置的 timeout 一般时间卡在一秒钟

setInterval():
按照指定的周期(以毫秒计) 来调用函数或计算表达式 循环定时器 拥有一个返回值
参数:js代码或对象 毫秒值

注意:
直接在定义是无法让代码执行循环的

  setInterval(alert('xxxx'),2000);

通过对象定义的名称来调用实现循环效果

function  fun(){
    alert('xxx')
}
   setInterval(fun,2000);

clearInterval():
取消由 setInterval()设置的timeout. 唯一的标识，用于取消定时器

   var Interval = setIntervalt(fun,2000);
 	 clearInterval(timeout); //取消谁就调用谁

案例实现：图片切换

     <script>
    var c=true;
    var p=true;
    //定义函数
    function  fun(){
        //定义循环判断
        while (p){
            var b=document.getElementById('x');
            if (c){
                b.src="../img/x.png"
                c=false;
                p++;
            }else {
                b.src="../img/ban_2.png"
                c=true;
                p++;
            }
            if (p>3){
                break;
            }
        }
    }
    setInterval(fun,200);
</script>
</head>
<body>
<img src="../img/x.png" id="x" >
</body>

Navigator:浏览器对象


creen:显示器屏幕对象


History:历史记录对象

获取History对象
window.history:[object History]
history

方法
back():加载history列表中的前一个URL(前进)
forward():加载history列表中的下一个URL(后退一步)
go():加载history列表中的某个具体页面 (包括前进或者后退)
go(参数):
正数:前进几个历史记录
负数:后退几个历史记录

属性
length 返回当前窗口历史列表中的URL数量(历史记录中当前窗口使用的个数)

Location:地址栏对象

Location:对象包含有关URL的信息

地址栏对象解释: 当前浏览器窗口地址栏的信息

获取Location
可以通过windos来获取Location
windos.Location

可以直接使用
Location
方法
reload：刷新
通过Location.reload调用方法
href:设置或返回完整的URL

返回完整的URL

 let href = location.href;
alert(href);

通过设置的URL,前往URL地址

<input type="button" value="哔哩哔哩" id="x">
<script>
   var c=document.getElementById('x');
   c.onclick=function (){
   location.href="https://www.bilibili.com";
  }
</script>

案例：搭配innerHTML来使用制定跳转页面

<span id="red" >5</span>秒后跳转....
</p>
<script>
//初始化值为5;
var sec=5;
function fun(){
    //进入函数方法每次减一
    sec--;
    //调用id
    let elementById = document.getElementById("red");
    //修改HTML内容
    elementById.innerHTML=sec+"";//调用sec 修改为字符串形式
    if (sec<1){
        document.getElementById("red");
        location.href="http://www.baidu.com";
    }
}
//定义定时器
setInterval(fun, 1000);


a标签使用js代码

案例:

<a href="javascript:void(0)">使用运算符阻止返回值</a>
举报

相关推荐

javascript定时器，取消定时器，及js定时器优化方法

定时器延时跳转加载setIntervalsetTimeoutJava后端开发

javascript定时器的计时事件

javascript前端开发语言

深入JavaScript之BOM、DOM和事件

加载html属性值Java编程语言

JavaScript定时器

javascript前端开发语言

JavaScript 定时器

日记本前端开发那些事儿让前端飞

[JavaScript] 定时器

javascript开发语言ecmascripthtml5前端

JS——BOM概述、window常见事件、定时器、JS执行机制

javascript前端开发语言

JavaScript----定时器

vue.js前端javascript

JavaScript - 销毁定时器

销毁定时器javascriptOpenStack云计算

javaScript高级（DOM，BOM，点击事件）+例题+例题代码

javascript开发语言ecmascript
0 条评论