JavaScript学习记录七

Typora查看文档工具

Document对象

    * JavaScript分三个部分:
    * ECMAScript标准:JS的基本的语法
    * DOM:Document Object Model --->文档对象模型----操作页面的元素
    * BOM:Browser Object Model----->浏览器对象模型---操作的是浏览器
    *
    * DOM: 文档对象模型
    *
    * 文档:把一个html文件看成是一个文档,由于万物皆对象,所以把这个文档看成是一个对象
    * XML文件也可以看成是一个文档
    *
    * HTML:展示信息,展示数据的
    * XML:侧重于存储数据
    * html文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有的标签都可以看成是一个对象
    *
    * 页面中的每个标签,都是一个元素(element),每个元素都可以看成是一个对象
    * 标签可以嵌套,标签中有标签,元素中有元素
    *
    * html页面中都有一个根标签--html--也叫根元素
    *
    * 页面中的有一个根元素(标签--html),里面有很多的元素(有很多的标签,有很多的对象)
    *
    * 文档:一个页面就是一个文档
    *
    * 元素(element):页面中的所有的标签都是元素,元素可以看成是对象
    *
    * 节点(node):页面中所有的内容都是节点:标签,属性,文本
    * root:根
    *
    *
    * 页面就是文档--document,文档中有根元素:html
    * html--->head
    *------>body--->其他的标签
    *
    * 由文档及文档中的所有的元素(标签)组成的

一个树形结构图,叫树状图(DOM树)

案例：简单的文档对象模型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<script>
  //最终极的点击按钮弹出对话框的代码
  document.getElementById("btn").onclick=function () {
      alert("哈哈,我又变帅了");
  };
</script>
</body>
</html>

第二种实现(通过定义函数的方式来实现)

*注意那个不加括号的实现

  function f2() {
    alert("嘎嘎");
  }
  //根据id获取这个标签(元素)
  var btnObj=document.getElementById("btn");
  //为按钮注册点击事件
  btnObj.onclick=f2;//不加括号
//-----------------------------------------
//最终版
  var btnObj1=document.getElementById("btn1");
  //为该元素注册点击事件
  btnObj1.onclick=function () {
    alert("哦,这真是太好了");
  };

案例：点击按钮显示图片

  var btnObj=document.getElementById("btn");
  //为按钮注册点击事件,添加事件处理函数
  btnObj.onclick=function () {
    //根据id获取图片的标签,设置图片的src属性值
    var imObj=document.getElementById("im");
    imObj.src="images/liuyan.jpg";
    //设置图片的大小
    imObj.width="300";
    imObj.height="400";
  };

案例：点击修改文本内容

*凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式

<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">我是一个p标签</p>
<script>
  //案例:点击按钮,修改p标签的显示内容
  document.getElementById("btn").onclick=function () {
    //根据id获取p标签,设置内容
    document.getElementById("p1").innerText="这是一个p";
  };

</script>

案例：点击按钮修改a标签的地址和热点文字

  document.getElementById("btn").onclick = function () {
    //根据id获取超链接,设置href属性
    var aObj = document.getElementById("ak");
    aObj.href = "http://www.itcast.cn";
    //根据id获取超链接,设置文字内容
    aObj.innerText = "传智播客";
  };

//document.getElementsByTagName("标签的名字");返回的是一个伪数组,
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的，可以通过数组下标的方式来获取指定的元素

document.getElementById("btn").onclick=function () {
    //根据标签名字获取标签
    var pObjs= document.getElementsByTagName("p");
    获得指定ID下的p标签
    //var pObjs=document.getElementById("dv1").getElementsByTagName("p");
    //循环遍历这个数组
    for(var i=0;i<pObjs.length;i++){
      //每个p标签,设置文字
      pObjs[i].innerText="我们都是p";
    }

案例：修改文本框的值

<input type="button" value="修改文本框的值" id="btn"/><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>

案例：在某个元素的事件中,自己的事件中的this就是当前的这个元素对象

  var btnObj = document.getElementById("btn");
  btnObj.onclick = function () {
    //修改按钮的value属性
    this.value="我是按钮,谁咬我,我就咬谁";
    this.type="text";
    this.id="btn2";
  };

案例：点击图片修改宽和高

  var imgObj = document.getElementById("im");
  imgObj.onclick = function () {
    this.width = "200";
    this.height = "300";
  };

案例：关于怀孕。。

<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<script>

  //获取所有的按钮,分别注册点击事件
  var btnObjs = document.getElementsByTagName("input");
  //循环遍历所有的按钮
  for (var i = 0; i < btnObjs.length; i++) {
    //为每个按钮都要注册点击事件
    btnObjs[i].onclick = function () {
      //把所有的按钮的value值设置为默认的值:没怀孕
      for (var j = 0; j < btnObjs.length; j++) {
        btnObjs[j].value = "没怀孕";
      }
      //当前被点击的按钮设置为:怀孕了
      this.value = "怀孕了";
    };

案例：点击求换图片

<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;
  };

案例：点击切换图片

<input type="button" value="显示大图" id="btn"/>
<img src="images/1-small.jpg" alt="" id="im">
<script>
  function my$(id) {
    return document.getElementById(id);
  }


  my$("btn").onclick=function () {
      my$("im").src="images/1.jpg";
  };

案例：单选

*规律:在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么
*那么,在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了

<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密
<script>

  function my$(id) {
    return document.getElementById(id);
  }
  my$("btn1").onclick = function () {
    my$("rad1").checked = true;
  };

案例：下拉框

*注：这里引入了common.js,可以直接使用my$

<input type="button" value="点菜" id="btn"/>
<select name="" id="ss">
  <option value="1">油炸榴莲</option>
  <option value="2">爆炒臭豆腐</option>
  <option value="3">清蒸助教</option>
  <option value="4" id="op1">凉拌班主任</option>
  <option value="5">红烧小苏</option>
</select>
<script src="common.js"></script>
<script>
  my$("btn").onclick=function () {
    //点击按钮选择菜
    my$("op1").selected=true;
  };
</script>

案例：多行文本域修改值


<textarea name="" id="tt" cols="30" rows="10" readonly="readonly" >
  注册用户的协议:
  某人问智者,
  大师:您觉得怎么做才是最快乐的?
</textarea>
<input type="button" value="注册" id="btn2"/>
<script>
  //disabled=====>这个属性是禁用的,
  //html中属性和值是自己的,并且只有一个的,其实,可以只写这个属性,不用赋值

  my$("btn2").onclick=function () {
    my$("tt").value="嘎嘎";//推荐用value,因为看成了是表单的标签
    //my$("tt").innerText="哈哈";
  };

案例：设置样式

<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script src="common.js"></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>

案例：显示和隐藏

<input type="button" value="隐藏" id="btn"/>
<input type="button" value="显示" id="btn2"/>
  //根据id获取按钮,注册点击事件,添加事件处理函数
  my$("btn").onclick=function () {
      my$("dv").style.display="none";
  };
  my$("btn2").onclick=function () {
    my$("dv").style.display="block";
  };

案例：设置样式

*注：在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className

  <style>
    .cls {
      width: 300px;
      height: 200px;
      background-color: yellow;
      border: 2px solid red;
    }
  </style>
</head>
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //设置div的样式
  my$("btn").onclick = function () {
//    var dvObj = my$("dv");
//    dvObj.style.width = "300px";
//    dvObj.style.height = "300px";
//    dvObj.style.backgroundColor = "yellow";
//    dvObj.style.border = "10px solid red";

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

案例：通过类样式来控制显示和隐藏

  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: yellow;
      border: 2px solid red;
    }

    .cls {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮,通过类样式的方式设置div的显示和隐藏
  my$("btn").onclick = function () {
    // console.log(my$("dv").className);

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

案例：页面开关灯

  <style>
    .cls {
      background-color: black;
    }
  </style>
</head>
<body id="bd">
<input type="button" value="开/关灯" id="btn"/>
<script src="common.js"></script>
<script>
  my$("btn").onclick = function () {
    //获取body标签
    document.body.className = document.body.className != "cls" ? "cls" : "";
  };

JavaScript学习记录七

猜你喜欢