js的页面交互

与html标签建立关系

//获取标签,js如何与html标签建立联系  两种方式
//1、
let num = document.getElementsByClassName('d1');
console.log(num[0]);
let n = document.getElementById('aa');
console.log(n);
let c = document.getElementsByTagName('div');
console.log(c);
//2、同css选择器  querySelector querySelectorAll
let p1 = document.querySelector(".d2");
// querySelector 是选一个
// querySelectorAll 是选多个,放在数组里面
console.log(p1);
建立联系的两种方式

获取并修改html标签的内容及属性

//修改样式
//1.找到修改目标
let d1 = document.querySelector('.d1');
//2.获取样式
console.log(d1.style.color);
// getAttribute 也是获取标签属性,也是只能获取行间式的属性
console.log(d1.getAttribute("background"));
//前两种获取方式只能获取行间式的属性
//想要获取内联外联的属性,需要getComputedStyle
let d4 = getComputedStyle(d1,null).background;
console.log(d4);
//3.修改样式
d1.style.color = "black";
console.log(d1.style.color);
//修改内容
d1.innerText = "大沙地";
d1.innerHTML = "<b>哈哈</b>";
//修改属性 setAttribute(属性key  属性value)
d1.setAttribute("title","别点我");
获取及修改样式内容

事件

鼠标事件

//鼠标事件
// onclick ondblclick onmouseover onmouseleave onmousedown onmouseup
// onclick 单击触发(只是鼠标左键)
// ondblclick 双击触发(也是鼠标左键)
// onmouseover 鼠标移到上面就触发
// onmouseleave 鼠标移开触发
// onmousedown 鼠标处于点下状态触发,所以单击也会触发(时间短),不区分左右键
// onmouseup 鼠标松开触发,不区分左右键
// 在鼠标事件绑定的函数中,我们可以修改任意标签的属性,没有了css之前的限制
// 自身的属性页可以修改,this就是代表自身标签
//eg:
let ms = document.querySelector('.d1');
ms.ondblclick = function (ev) {
    //鼠标事件绑定函数这里传入的参数就是鼠标的一些相关信息
    //我们比较关心的几个参数是:clientX clientY altKey ctrlKey shiftKey
    console.log(ev.clientX, ev.clientY);
    console.log(ev.altKey, ev.ctrlKey , ev.shiftKey);
    // this.setAttribute("background-color","blue"); 这样只会给标签
    // 添加一个background-color属性,而不会添加到他的样式中
    // this.setAttribute('style',"background-color:blue;");
    //修改是直接在行间式里修改
};
ms.onmousedown = function (ev) {
    this.setAttribute('style',"background-color:blue;");
};
ms.onmouseup = function (ev) {
    this.setAttribute('style',"background-color:black;");
};
鼠标事件

键盘事件

// 键盘事件
// 键盘事件的话需要鼠标点一下才会触发(相当于选择你这个程序开始输入键盘的值了)
//onkeydown onkeyup onkeypress
// onkeydown 键盘按下去就会触发,并且不松开的话会一直触发
// onkeyup 键盘松开就会触发
// onkeypress 也是键盘按下去就会触发,但是不松开的话只会触发一次
// ev 里面重要的几个参数,也有altKey ctrlKey altKey
// 还有一个keyCode  表示的是每个键的键盘编码
document.onkeypress = function (ev) {
    console.log(ev);
};
document.onkeydown = function (ev) {
    console.log(1111111,ev);
};
键盘事件

表单事件  

转载于:https://www.cnblogs.com/hesujian/p/11135251.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页