js基础(3)~元素自定义，元素修改，js类型节点，定时器，日期类对象，js基础事件

本文链接：https://blog.csdn.net/kingdalong2021/article/details/115430793

一.元素的属性修改和自定义属性

Html标签属性可以分为2种;

html标准属性：在html语法中能够直接被浏览器识别，有专门用途。
自定义属性：标准属性之外的都叫做自定义属性，满足个性化。

基本所有的html属性都可以使用对象.属性的形式访问，属性也支持读和写。

var h1 =document.getElementById("name");
console.log(h1.title);属性读
h1.title ="不忘初心!";属性写

每一个元素对象都有一个完整的style层叠样式表。

元素的style属性代表该元素的样式表。当为元素的标签设置style属性之后，进行赋值。实际上是把字符串(red)解析成了一个对象，然后再赋值。

       h1.style.color ="red";
	//上面的那个等于下面的这个
 h1.style="color:red"

标准的class属性可以设置多个值，因为class本身就是一个列表。

className：添加样式名称
p1.className ="green bold";

Class样式增删改查

//删除，有则删除：remove
p1.classList.remove("bold");
//添加：add
p1.classList.add("bold");
//切换，有则删，无则添：toggle
p1.classList.toggle("bold");
//判断某些样式是否存在：contains
console.log(p1.classList.contains("bold"));

自定义属性

getAttribute:可以获取自定义属性和标准属性。

var v1 =p1.getAttribute("dalong");

setAttribute:可以添加自定义属性和标准属性。两个参数：1参是属性名，2参属性值

p1.setAttribute("state","ready");

判断是否有自定义属性

console.log(p1.hasAttribute("state"));

删除自定义属性

 p1.removeAttribute("state");

对于标签对象，打开访问的对象属性，标准属性和对象属性的访问方式一样的(people.name与p1.title);如果是非标准属性，访问的就是对象的属性而不是标签的属性了；

二.元素的添加和删除

createElement：创建一个标签，参数是标签名称。

var h1 =document.createElement("h1");

给标签添加内容

h1.textContent ="这是通过js语法创建的h1标签";

appendChild：添加子元素。Document.body代表body对象。这句代码的意思：把一个名为h1的标签添加到body对象中。

document.body.appendChild(h1);

insertBefore：将一个标签作为子元素插入到另一个标签中。两个参数:1参是要插入的元素对象，2参是插入到哪个元素之前。

document.body.insertBefore(h2,firstTitle);

parentElement：表示本元素的父元素对象

console.log(firstTitle.parentElement);

删除子元素

document.body.removeChild(firstTitle);

三.Js中访问元素的尺寸和位置

如果元素的样式是通过css设置的，那么不能通过style属性来获取。

获取到元素展示的时候的宽高(包含边框)

console.log(box.offsetWidth);
    console.log(box.offsetHeight);

不含边框的宽高

console.log(box.clientWidth);
    console.log(box.clientHeight);

获取元素相对于离自己最近的position(必须是非static)。left：父元素的横坐标。Top：纵坐标。

console.log(box.offsetLeft);
console.log(box.offsetTop);

到内容区域的距离

console.log(box.clientLeft);
    console.log(box.clientTop);

获取浏览器工作区域的宽高

console.log(window.innerWidth);
   console.log(window.innerHeight);

获取浏览器窗口的宽高

console.log(window.outerWidth);
  console.log(window.outerHeight);

四.属性类型节点

Attributes：查找某个元素节点上所有的属性，返回一个属性列表。

var attList =a.attributes;//(每一个属性都可以理解为是一个小的数据)

修改或者添加属性

a.setAttribute("target","_self");//属性有就代表修改
a.setAttribute("title","百度一下，你就知道");//属性无则代表添加

删除

a.removeAttribute("href");

对于class属性的修改，有专门的样式表，提供了增删改查。

a.classList.add("bgy");增
// 删除
a.classList.remove("kaiti");
// 替换
 a.classList.toggle("red");

对于style属性的修改，直接修改元素节点就可以

a.style.marginLeft ="100px";

五.文本类型节点

childNodes表示本节点所有的子节点，类型是一个nodeList。

var list =ul.childNodes;

Nod：表示单一的节点

 var nod =list[i];

元素中的标签和文本(包括空格和换行)都属于元素的子节点。nodeType表示节点类型：1.为元素 2.属性 3.文本。

console.log(nod.nodeType);

文本节点属于叶子节点，往下没有子节点了。

六.定时器

定时器分2种：1.延迟定时器(setTimeout)，2.重复定时器(setInterval)。

延迟定时器：可以延迟某个时间之后再调用该函数。

参数：1参是要调用的函数，2参是时间。以毫秒为单位，1m =1000mm；
格式：timer是定时器编号

var timer = setTimeout(function(){
        console.log("4秒时间到");
    },4000);

删除定时器：根据定时器编号删除

 function cancelTimer(){
        clearTimeout(timer);
          // 清除掉内存
        timer =null;
        // 清空重复定时器的
        clearInterval(timer2);
        timer2 =null;
    }

重复定时器：会在填入的时间内，按照时间，间隔重复执行。

//也会返回一个定时器编号
 var timer2 =setInterval(function(){
        console.log("我变帅了"); 
    },1000);

七.三目运算符(条件运算符)

格式：条件?结果1:结果2。
如果满足条件，会执行结果1，否则执行结果2.
在传参时值不固定时使用。

console.log(age<20?"未成年":"成年");

嵌套使用

console.log(salary<3000?"贫困户":salary<6000?"正常":"小康");

八.日期类

创建系统提供的日期类(Date)

var now =new Date();

getTime()：返回自1970年7月1日起至今的毫秒数。

 console.log(now.getTime());
 返回自传入的时间到1970的毫秒数
console.log(now.setFullYear(2018,10,16));

拿到当前的年月日

	var year =now.getFullYear();//拿到当前的年份
	var month =now.getMonth();//拿到当前的月份 
	var date =now.getDate(); //拿到当前是几号
    var day =now.getDay(); //拿到当前是星期几

拿到当前的时分秒

	var hour =now.getHours();//拿到小时 0(午夜) ~~23
    var minute =now.getMinutes();//分钟 返回值是0~~59 
    var second =now.getSeconds();//秒数 返回值是0~~59

九.Js事件绑定方法

通过html标签的属性进行事件绑定

<!-- onclick代表 点击事件:当点击按钮的时候事件会被激活
    zanClick(event):当事件激活的时候要去执行的函数的名称和参数
    onclick:属性名称 zanClick是属性值 可以使用全局作用域
的函数-->
    <button onclick="zanClick(event)"

在js中为元素绑定事件

var btn =document.getElementById("btn");
    // 因为onclick是个标准属性所以可以直接调用
    btn.onclick =function(e){
        console.log("这是通过js来执行的事件:"+e);
    }

十.鼠标事件

Onmousedown：鼠标按下时触发

box.onmousedown =function(e){
        console.log("鼠标按下去了!!!");
    }

Onmouseup：鼠标松开了

 box.onmouseup =function(e){
        console.log("鼠标松开了!!!");
    }

Onmouseenter：鼠标指针进入时触发

box.onmouseenter =function(e){
        console.log("鼠标指针进入了!!!");
    }

Onmouseleave：鼠标离开时触发

box.onmouseleave =function(e){
        console.log("鼠标离开了!!!");
    }

Onmousemove：鼠标指针移动，频繁触发

box.onmousemove =function(e){
        console.log("鼠标指针移动，频发!!!");
    }

十一.键盘事件

onkeydown：键盘按下时触发

document.body.onkeydown =function(e){
        //   e.key代表键盘按键上面的值，系统通过捕捉按键，
        // 来拿到按键的值
          console.log(e.key);
        //   按键的编码
          console.log(e.keyCode);
    }

按键弹起时：onkeyup

 document.body.onkeyup =function(e){
        console.log(e.key);
    }

正在点击时触发：onkeypress

document.body.onkeypress =function(e)
    {// 正在点击按键的时候触发
        console.log(e.key);
    }

十二.元素的滚动事件

onscroll：滚动监听事件，当元素发生内容滚动时，事件触发。

page.onscroll =function(e){
        // e.target >>>当前事件的所属对象
        // 获取当前元素本身的高度
        console.log("元素本身:"+e.target.clientHeight);
        // 元素内容高度
        console.log("滚动内容:"+e.target.scrollHeight);
        //  纵向偏移量
        console.log("元素的纵向偏移:"+e.target.scrollTop);
        // 判断内容是否到底
        if (e.target.scrollTop ==
        e.target.scrollHeight - e.target.clientHeight) {
            console.log("拖到了底部");
        }
    }

十三.事件的传播过程

子元素的事件触发会带动父元素的事件触发。

事件传播分为两个：

①从上到下的捕获过程
②从下到上的冒泡过程

事件绑定类型

①系统自带的事件:鼠标，键盘
②添加监听

addEventListener：添加监听，3个参数

①1参：代表监听事件的类型
②2参：代表监听事件的函数，监听成功后调用
③3参：一个布尔值，代表事件在XX阶段触发。默认是flase表示在冒泡阶段触发，True代表该事件在捕获阶段触发。

newBtn.addEventListener("click",f1,true);

removeEventListener：删除事件。如果事件在捕获阶段进行监听的，是无法删除的。

newBtn.removeEventListener("click",f1);

一些特殊的事件是无法阻止的。例如a标签的跳转。

通知

如果你想讨论，交流技术，那就来群里吧。我在群里等你！
在这里插入图片描述