JS.006:WEB API总结更新中

小脑斧 · 发表于 2020-5-15 17:05:00

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由小脑斧于 2020-5-15 17:05 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv1">
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
</div>
<div id="dv2">
<p>嘎嘎</p>
<p>嘎嘎</p>
<p>嘎嘎</p>
<p>嘎嘎</p>
</div>
<script>
//document.getElementsByTagName("标签的名字");返回的是一个伪数组,
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
//案例:点击按钮设置多个p标签的文字内容
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//根据标签名字获取标签
var pObjs= document.getElementsByTagName("p");
//var pObjs=document.getElementById("dv1").getElementsByTagName("p");
//循环遍历这个数组
for(var i=0;i<pObjs.length;i++){
//每个p标签,设置文字
pObjs[i].innerText="我们都是p";
}
};
</script>
</body>
</html>

复制代码

登录/注册后可看大图

<body>
<input type="button" value="修改所有文本框的值" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//获取所有的文本框
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判断这个元素是不是按钮
if (inputs[i].type != "button") {
inputs[i].value = "其实,,,,";
}
}
};
</script>
</body>

复制代码

登录/注册后可看大图

案例排他功能：

<input type="button" value="咩咩咩咩咩咩"/>

<input type="button" value="咩咩咩咩咩咩"/>

<script>

//获取所有的按钮,分别注册点击事件

var btnObjs = document.getElementsByTagName("input");

//循环遍历所有的按钮

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

//为每个按钮都要注册点击事件

btnObjs.onclick = function () {

//把所有的按钮的value值设置为默认的值:咩咩咩咩咩咩

for (var j = 0; j < btnObjs.length; j++) {

btnObjs[j].value = "没怀孕";

}

//当前被点击的按钮设置为:淡淡的

this.value = "淡淡的";

};

}

</script>
复制代码

登录/注册后可看大图

<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>
//点击图片标签,设置图片标签的src路径为超链接中大图的路径
document.getElementById("im").onclick=function () {
this.src=document.getElementById("ak").href;
return false;//防止跳转
};
</script>
</body>

复制代码

<input type="button" value="注册" id="btn2"/>
<script>
//disabled=====>这个属性是禁用的,
//html中属性和值是自己的,并且只有一个的,其实,可以只写这个属性,不用赋值
my$("btn2").onclick=function () {
my$("tt").value="嘎嘎";//推荐用value,因为看成了是表单的标签
//my$("tt").innerText="哈哈";
};
</script>

复制代码

<script>
//凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
//点击按钮,修改div的宽,高,背景颜色
my$("btn").onclick = function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "pink";
};
</script>

复制代码

显示隐藏

<script>
<em> </em>//根据id获取按钮,注册点击事件,添加事件处理函数
my$("btn").onclick=function () {
//判断当前点击的按钮的value属性值
if(this.value=="隐藏"){
my$("dv").style.display="none";//隐藏
this.value="显示";
}else if(this.value=="显示"){
my$("dv").style.display="block";//显示
this.value="隐藏";
}
};
</script>

复制代码

<p>//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
//my$("dv").className="cls";</p>

复制代码

//判断的是div是否应用了类样式
if (my$("dv").className != "cls") {
//现在是显示的,应该隐藏
my$("dv").className = "cls";
this.value = "显示";
} else {
//隐藏的状态----立刻显示
my$("dv").className = "";
this.value = "隐藏";
}

复制代码

开关灯

my$("btn").onclick = function () {

//获取body标签

document.body.className = document.body.className != "cls" ? "cls" : "";

};
复制代码

Hello. · 发表于 2020-5-15 17:08:16

登录/注册后可看大图

乘号 · 发表于 2020-5-15 17:20:13

账号		自动登录	找回密码
密码			立即注册

[学习笔记] JS.006:WEB API总结更新中

马上注册，结交更多好友，享用更多功能^_^