js基础部分

喝水的猫

已于 2023-04-27 11:53:22 修改

阅读量62

点赞数

文章标签： javascript Powered by 金山文档

于 2023-01-31 11:06:49 首次发布

本文链接：https://blog.csdn.net/m0_50995655/article/details/128814011

版权

在html的文本最下面书写

//所有的js代码都要使用英文状态下的符号

alert('我是弹窗');

</script>

找元素/标签/找标记

F12源代码查看（控制台中见查看）

//document 代表页面文档

//getElementById 使用id来获取页面中的标签、标记、元素

document.getElementById('div2')

</script>

Js实体化三属性

<style>

#div1{width: 100px; height: 30px; background-color: red;}

</style>

</head>

<body>

</body>

</html>

//想要设置谁就必须要先找到他，使用英文状态下的（点.）来连接

//最后的数值和前面的属性使用的符号链接

document.getElementById('div2').style.width='200px';

document.getElementById('div2').style.height='200px';

document.getElementById('div2').style.background='pink';

</script>

简化代码

//变量就是给数据请了一个代言人，今后出现这个代言人就是代表这串代码

var stc = document.getElementById('div2').style;

stc.width='200px';

stc.height='200px';

stc.background='pink';

//变量起名时的注意事项：可以使用中文，可以使用符号_$，名字不能数字开头

//不能使用js占用的单词（保留字）

</script>

点击事件

<body>

</body>

</html>

//什么情况下做什么事情

//事件三要素：事件源.事件类型=匿名函数中写的就是执行命令

//寻找代言人

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

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

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

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

but1.onclick = function(){

//这里写要执行的命令--变高

box.style.width = '200px';

}

but2.onclick = function(){

//这里写要执行的命令--变宽

box.style.height = "100px";

}

but3.onclick = function(){

//这里写要执行的命令--变色

box.style.background = "red";

}

</script>

寻找元素的放法

<body>

<div name="name">有name</div>

</body>

</html>

//getElementsByClassName 找页面中class的方法必须在后面加【数字】从0开始

document.getElementsByClassName("div1")[2].οnclick=function(){

alert();

}

//getElementsByName 找页面中name的方法必须在后面加【数字】从0开始

document.getElementsByName('name')[0].οnclick=function(){

alert();

}

</script>

Js事件

Onclick单机显示，ondblclick双击显示,onmouseover移入显示，onmouseout移出显示

var div1 = document.getElementById("div1");

div1.onclick = function(){

alert("单机显示");

}

var div2 = document.getElementById("div2");

div2.ondblclick = function(){

alert("双击显示");

}

var div3 = document.getElementById("div3");

div3.onmouseover = function(){

alert("鼠标移入");

}

var div4 = document.getElementById("div4");

div4.onmouseout = function(){

alert("鼠标移出");

}

</script>

行内js使用，不推荐使用他

<div οnclick="alert('我是行内式js')">我是行内式js</div>

代码搬家

<style>

div{width: 200px; height: 100px; background-color: aqua; border: 2px solid red;}

</style>

//window告诉计算机这个最后执行

window.onload = function(){

var box = document.getElementById("box");

box.onclick = function(){

alert("点击成功")

}

</script>

动态添加删除

<style>

div{width: 300px; height: 200px; border: 1px solid red; background-color: aqua;}

</style>

window.onload = function(){

var a = document.getElementById("a");

var b = document.getElementById("b");

var c = document.getElementById("c");

b.onclick = function(){

//innerHTML添加

a.innerHTML = "wshiasdfasdf ";}

c.onclick = function(){

//innerHTMl 为空时为清空

a.innerHTML = '';}}

</script>

</head>

<body>

</body>

函数自定义

<title>函数自定义</title>

window.onload = function(){

//自定义函数可以简化代码量

//function 名字() {自己的js程序} 在调用

function suntingchao(){

alert();

}

suntingchao();

}

喝水的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础部分

js基础部分
复制链接

扫一扫

js基础部分

“相关推荐”对你有帮助么？