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总结更新中

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