JS--1.4

听花海的双鱼男

已于 2022-04-15 19:50:58 修改

阅读量174

点赞数

文章标签： javascript

于 2022-04-15 19:46:24 首次发布

本文链接：https://blog.csdn.net/LYL000305/article/details/124202468

版权

或与非

var key = 2;

if (key == 2 || key ==3){

//key等于2或等于3的时候成立

console.log('key是2或者3');

}

// 1<key<10

if (key >1 && key <10){

//key 大于1 并且小于10的时候成立

console.log('key');

}

//语句：声明的 if的 for的 switch的

//表达式：三元，函数执行

var a =3 || 5; //前边成立（转成布尔是true）给前边，不成立给后边

var b =3 && 5; //前边成立给后边，不成立给前边

console.log(a,b); //3 5

</script>

开关灯

<p>愤怒了看过哪里可能是你闺女啊看的女生看</p>

var btn = document.querySelector('button')

var p = document.querySelector('p')

var flag = true;

btn.onclick = function(){

if(!flag){

btn.innerText = '白天模式'

p.style.background = '#fff'

p.style.color = '#333'

flag = true

}else{

btn.innerText = '夜间模式'

p.style.background = '#333'

p.style.color = '#fff'

flag = false

}

</script>

操作DOM

<style>

.box {

background-color: #ccc;

}

</style>

<body>

hello word

</div>

// getElementById() 获取的是一个元素

// getElementByClassName() 获取的是元素的集合

// getElementByTagName() 获取的是元素的集合

var box = document.getElementById('app')

console.log(box);

var box2 = document.getElementsByClassName('box')

console.log(box2);

var box3 = document.getElementsByTagName('span')

console.log(box3);

//querySelector(css选择器)获取的是一个元素

//querySelectorAll(css选择器)获取的是一个集合

var box4 = document.querySelector('#app')

var box5 = document.querySelectorAll('span')

console.log(box.innerHTML);

console.log(box.innerText);

//box.innerText = '<h1>666</h1>'

innerHTML:能识别结构获取的是能够获取结构，设置的时候能够识别结构

innerText：都是文本

//box.style.color = 'red'

//xxx.style 是操作的行内样式

console.log(box.style);

//var obj = getComputedStyle(box)

//console.log(obj);

//xxx.className 是用来设置类名的

console.log(box.className);//当前元素的类名

box.className = 'ccc'

赋值的时候，看看等号后边是什么类型的，若是值类型的，则可以理解成复制一份（相互独立）；若是引用类型，则可以理解成同一个地址

box.className = box.className = ' ccc'

box.classList.add('qqq')//添加类名

box.classList.remove('box')//移除类名

box.classList.toggle('box')//若元素本来就有这个类名，则移除，若没有这个类名就添加

//给box这个元素对应的点击行为，绑定了一个点击执行的代码

//事件

box.onclick = function(){

console.log("有人点击我");

}

box.onmouseenter = function(){

console.log("鼠标进入box盒子了");

}

box.onmouseleave = function(){

console.log("鼠标离开box盒子了");

}

</script>

</body>

隔行变色

<style>

li:nth-child(2n){

background-color: brown;

}

li:nth-child(2n+1){

background-color: aqua;

}

</style>

<body>

<ulid="ul">

</ul>

</body>

var ul = document.getElementById('ul');

var lis = ul.getElementsByTagName('li');

// console.log(lis);

for (var i = 0; i < lis.length;i++){

// 模就是取余

if(i % 2 == 0){

//代表i是偶数

lis [i].style.backgroundColor = 'red'

}else{

//代表i是奇数

lis [i].style.backgroundColor = 'blue'

}

// switch(i % 2){

// case 0:

// lis[i].style.backgroundColor= 'red'

// break;

// default:

// lis[i].style.backgroundColor= 'blue'

// break;

// }

var ul = document.getElementById('ul');

var lis = ul.getElementsByTagName('li');

for (var i = 0; i < lis.length;i++){

lis[i].backgroundColor = i % 2? 'blue':'red'

// 给每个li绑定了点击li

lis[i].qqq=i;//给每一个li添加一个自定义属性qqq 值对应的是li 的索引

console.log(lis[i].qqq);

lis[li].onclick = function(){

//this 在这里就是绑定的那个元素

console.log("点击了li",i,this.qqq);

}

</script>

划入变色

<body>

<ul>

</ul>

</body>

</html>

var lis = document.querySelectorAll('ul>li');

console.log(lis);//一共六个，最大到五

for (var i = 0;i < lis.length;i++){

lis[i].style.backgroundColor = i%2 ?'blue':'red';

lis[i].bg = lis[i].style.backgroundColor;

// 自定义属性bg的目的是为了存储当前li的初始色值

lis[i].onmouseenter = function(){

// 鼠标划入，背景颜色换成pink

this.style.backgroundColor = 'pink'

}

lis[i].onmouseleave = function(){

this.style.backgroundColor=this.bg

}

</script>

听花海的双鱼男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS--1.4

或与非<script>var key = 2;if (key == 2 || key ==3){//key等于2或等于3的时候成立console.log('key是2或者3');}// 1<key<10if (key >1 && key <10){//key 大于1 并且小于10的时候成立console.log('key');}//语句：声明的 if的 for的 switch的//表达式：三元，函数执
复制链接

扫一扫