JavaSrcipt

// 一、js选择器：js如何与html标签建立起联系
// 1)
let h1 = document.getElementById('hhh');
console.log(h1);
console.log(hhh); // id是标签的唯一标识，所以js通过id名可以直接拿到标签
// let h2s = document.getElementsByClassName('hh2');
let h2s = document.getElementsByTagName('h2');
console.log(h2s);
console.log(h2s[0]);

// 2) 同css3选择器
// querySelector就是获取一个
// h1 = document.querySelector('#hhh');
h1 = document.querySelector('body h1#hhh');
console.log(h1);
h21 = document.querySelector('#hhh ~ .hh2');
console.log(h21);
// querySelectorAll就是获取多个
h2s = document.querySelectorAll('#hhh ~ .hh2');
console.log(h2s);
// 优势：通过id、class或标签，都可以快速定位到某一个或某几个
h22 = document.querySelector('.hh2:nth-of-type(2)');
console.log(h22);

 

// 1）找目标标签
let h1 = document.querySelector('h1');

// 2）获取样式、内容、属性
let fontSize = h1.style.fontSize;
console.log(fontSize);
// 标签.style.属性名 只能获取行间式
// getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式)
let bgColor = getComputedStyle(h1, null).backgroundColor;
console.log(bgColor);

console.log(h1.innerText);
console.log(h1.innerHTML);

console.log(h1.getAttribute('id'));
console.log(h1.getAttribute('owen'));

// 3）修改样式、内容、属性
h1.style.color = 'red'; // js可以直接修改样式 - 修改的是行间式
h1.style.borderRadius = '50%'; // css的 - 链接语法对应 js的 小驼峰命名法

h1.innerText = '修改过后的内容';
h1.innerHTML = '<i>修改过后的内容</i>';

h1.setAttribute('owen', 'oooooooooooooooo');

let img = document.querySelector('img');

if (Math.random() > 0.5) {
img.setAttribute('src', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=255676174,1347478056&fm=26&gp=0.jpg')
} else {
img.setAttribute('src', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3706411226,1037337437&fm=26&gp=0.jpg')
}

// 鼠标事件
let h1 = document.querySelector('h1');
// onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup
h1.onclick = function (ev) {
console.log(ev); // 包含着鼠标的相关信息
// 鼠标点击点
console.log(ev.clientX, ev.clientY);
// 特殊按键
console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
};

h2 = document.querySelector('h2');
h2.onmouseover = function () {
h1.innerText = 'h2被悬浮了';
h1.style.color = 'green';
};
h2.onmouseleave = function () {
h1.innerText = 'h2被放开了';
h1.style.color = 'red';
};
let count = 1;
h2.onmousemove = function () {
++count;
h1.innerText = '鼠标在h2身上游走' + count + '下';
this.innerText = '鼠标在h2身上游走' + count + '下';
};
// 为某个标签绑定事件，去控制页面中任何一个标签（绑定事件中的this就代表自身）

// 键盘事件
// 只要在窗口下，点击鼠标就可以触发
// onkeydown、onkeyup、onkeypress
/*
document.onkeydown = function (ev) {
console.log(ev.keyCode);
if (ev.keyCode == 37) {
console.log('你按了左键');
} else if (ev.keyCode == 38) {
console.log('你按了上键');
}
console.log(ev.altKey);
if (ev.ctrlKey && ev.keyCode == 13) {
console.log('留言');
}
}
*/
// let inp = document.querySelector('input');
// inp.onkeydown = function (ev) {
// console.log(ev.keyCode)
// }