js的页面交互

淩亂°似流年 2021-12-16 11:55 258阅读 0赞

# 与html标签建立关系 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//获取标签，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标签的内容及属性 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//修改样式
    //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","别点我");

获取及修改样式内容

# 事件 #

### 鼠标事件 ###

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//鼠标事件
    // 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;");
    };

鼠标事件

### 键盘事件 ###

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

// 键盘事件
    // 键盘事件的话需要鼠标点一下才会触发（相当于选择你这个程序开始输入键盘的值了）
    //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

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211214/9904a8d1e34045299fca7968f127b1e5.png