javascript的基础交互详解

2022-04-15 750
目录
  • 一.元素的获取方式
    • 文档下获取
      • id获取
      • 类名获取(className)
      • 标签名(tagName)
    • 自定义获取范围
    • 二.鼠标事件
      • 区别:
      • 三.元素操作
        • 1.操作元素内容
          • 操作表单元素内容
          • 操作普通闭合标签
        • 2.操作元素属性
        • 总结

          一.元素的获取方式

          文档下获取

          只要在文档中符合都会获取到

          id获取

          • 基本语法:document.getElementById(id值);
            • document:文档,表示获取的范围
            • get:获取 Element:元素 By:通过..
            • 返回的是元素对象
          • 返回值:获取到了返回具体的元素,获取不到返回null
          • 用过id获取只能在document下获取,不能自定义获取范围
            var box = document.getElementById("box1");
                  console.log(box);//<div id="box1">我是DIV</div>
                  var box = document.getElementById("box2");
                  console.log(box); //null
                  var myH2 = document.getElementById("my-h2");
                  console.log(myH2);

          类名获取(className)

          • 基本语法:document.getElementsByClassName(类名值);
            • document:文档,表示获取的范围
            • get:获取 Elements:元素(复数) By:通过..
            • 得到的元素对象是动态的伪数组
            • 可以通过遍历的形式打印出来
          • 返回值:获取到了:返回一个元素集合 HTMLCollection,这个集合由索引和值组成,0对应第一项,1对应第二项依次类推,天生自带length属性,最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0
          • length属性 集合的长度 或 集合中元素的个数
            • 集合.length;
          • 获取集合中具体元素
            • 集合[索引]
           var tests = document.getElementsByClassName("test");
                  console.log(tests);
                  console.log(tests.length); //获取长度
                  // 直接输出到控制台
                  console.log(tests[0]);
                  console.log(tests[1]);
                  console.log(tests[tests.length - 1]);
                  // 存储起来
                  var oDiv = tests[0];
                  var oH2 = tests[1];
                  console.log(oDiv, oH2);
                  var test1 = document.getElementsByClassName("test1");
                  console.log(test1, test1.length);
                  console.log(test1[0]);
                  console.log(test1[1]); //没有这个小标或索引 相当于集合中这个位置还没有初始化,或未定义 返回undefined
                  var hello = document.getElementsByClassName("hello");
                  console.log(hello, hello.length);
                  console.log(hello[0]); //undefined

          标签名(tagName)

          • 基本语法:document.getElementsByTagName(标签名);
            • document:文档,表示获取的范围
            • get:获取 Elements:元素(复数) By:通过..
          • 返回值:获取到了:返回一个元素集合 HTMLCollection,这个集合由索引和值组成,0对应第一项,1对应第二项依次类推,天生自带length属性,最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0
          • length属性 集合的长度 或 集合中元素的个数
            • 集合.length;
          • 获取集合中具体元素
            • 集合[索引]
             var oLis = document.getElementsByTagName("li");
                  console.log(oLis);
                  // 获取长度
                  console.log(oLis.length);
                  // 获取具体的元素
                  console.log(oLis[0]);
                  console.log(oLis[1]);
                  console.log(oLis[2]);
                  console.log(oLis[oLis.length - 1]);

          自定义获取范围

          父级元素:必须是具体的元素

          • 父级元素.getElementsByClassName(类名值);
          • 父级元素.getElementsByTagName(标签名);
          // 获取ol下的li
                  // 获取父级元素
                  var wrap = document.getElementById("wrap");
                  console.log(wrap);
                  // var oLis = wrap.getElementsByClassName("test");
                  var oLis = wrap.getElementsByTagName("li");
                  console.log(oLis);
                  console.log(oLis.length);
                  console.log(oLis[0]);
                  console.log(oLis[1]);
                  console.log(oLis[oLis.length - 1]);
                  // 获取ul下的li
                  // 获取父级
                  var wrap1 = document.getElementsByClassName("wrap");
                  console.log(wrap1);
                  console.log(wrap1[0]);
                  console.log(wrap1[1]);
                  // var ullis = wrap1[1].getElementsByClassName("test");
                  var ullis = wrap1[1].getElementsByTagName("li");
                  console.log(ullis);
                  console.log(ullis.length);
                  console.log(ullis[0]);
                  console.log(ullis[1]);
                  console.log(ullis[ullis.length - 1]);

          二.鼠标事件

          绑定事件也要是具体的元素,不能够直接去操作集合

          • onclick 单击事件
          • ondblclick 双击事件
          • onmousedown 鼠标按下
          • onmouseup 鼠标抬起
          • onmousemove 鼠标移动
          • oncontextmenu 鼠标右击
          • onmouseover 鼠标移入
          • onmouseout 鼠标移出
          • onmouseenter 鼠标进入
          • onmouseleave 鼠标离开
            <div id="box"></div>
              <ul id="myUl">
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
              </ul>
              <script>
             var box = document.getElementById("box");
             console.log(box);
             var myUl = document.getElementById("myUl")
             console.log(myUl);
             var oLis = myUl.getElementsByTagName("li");
             console.log(oLis);
                      // - onclick  单击事件
                      box.onclick = function() {
                          console.log("单击");
                      }
                      // - ondblclick  双击事件
                      oLis[0].ondblclick = function() {
                          console.log("双击事件");
                      }
                      // - onmousedown 鼠标按下
                      oLis[1].onmousedown = function() {
                          console.log("鼠标按下");
                      }
                      // - onmouseup  鼠标抬起
                      oLis[1].onmouseup = function() {
                          console.log("鼠标抬起");
                      }
                      // - onmousemove 鼠标移动
                      oLis[1].onmousemove= function() {
                          console.log("鼠标移动");
                      }
                      // - oncontextmenu 鼠标右击
                      oLis[2].oncontextmenu = function() {
                          console.log("鼠标右击");
                      }
                      // - onmouseover 鼠标移入
                      myUl.onmouseover = function() {
                          console.log("鼠标移入");
                      }
                      // - onmouseout 鼠标移出
                      myUl.onmouseout = function() {
                          console.log("鼠标移出");
                      }
                      // - onmouseenter  鼠标进入
                      myUl.onmouseenter = function() {
                          console.log("鼠标进入");
                      }
                      // - onmouseleave  鼠标离开
                      myUl.onmouseleave = function() {
                          console.log("鼠标离开");
                      }
              </script>
          • onmouseover 鼠标移入
          • onmouseout 鼠标移出
          • onmouseenter 鼠标进入
          • onmouseleave 鼠标离开

          区别:

          onmouseover及onmouseout不仅会触发自身这个事件对应的事情还会将父级这个事件对应做的事情再次触发

          onmouseenter及onmouseleave:只会触发自身这个事件对应做的事情,不会触发父级这个事件对应做的事情

          三.元素操作

          原则:给值就是设置,不给值就是获取

          元素的所有操作都必须是具体的元素,集合不能直接操作

          1.操作元素内容

          从元素中获取到的内容都是字符串,没有内容获取到的是空字符串

          操作表单元素内容

          • 设置:表单元素.value = 值;
          • 获取:表单元素.value;

          // 多次赋值后边覆盖前边的

          // 获取元素
          var inputs = document.getElementsByTagName("input");
          var btn = document.getElementsByTagName("button")[0];
          console.log(inputs, btn);
          // 将两个输入框的和展示到第三个输入框
          // 绑定事件
          // 事件每点击一次 函数中代码就重新执行一次
          btn.onclick = function () { //做什么事情
              // 获取两个输入框的值
              var oneVal = inputs[0].value;
              var twoVal = inputs[1].value;
              console.log(oneVal, twoVal);
              // 遇到字符串表示拼接 先转为数字
              var total = parseFloat(oneVal) + parseFloat(twoVal);
              console.log(total);
              // 将和设置给第三个输入框
              inputs[2].value = total;
          }

          操作普通闭合标签

          • 设置:表单元素.innerText/innHTML = 值;
          • 获取:表单元素.innerText/innHTML;
          • 区别:innerText只能识别文本,而innHTML既可以识别文本,又可以识别标签
          var div = document.getElementsByTagName("div")[0];
          var h2 = document.getElementsByTagName("h2")[0];
          var p = document.getElementsByTagName("p")[0];
          console.log(div, h2,p);
          // 设置:表单元素.innerText/innHTML = 值;
          // 后边设置的覆盖前边的
          // div.innerText = "我是div";
          // div.innerText = "<h6>我是div</h6>";
          // div.innerHTML = "我是div";
          div.innerHTML = "<h6><a href='https://www.baidu.com'>我是div</a></h6>";
          h2.innerHTML = "我是H2";
          // 获取:表单元素.innerText/innHTML;  
          console.log(div.innerText);//我是div
          console.log(div.innerHTML);//<h6><a href="https://www.baidu.com" rel="external nofollow" >我是div</a></h6>
          console.log(p.innerText);
          console.log(p.innerHTML);

          2.操作元素属性

          操作结构上天生自带的属性

          • 设置:元素.属性 = 值; 获取不到返回空字符串
          • 获取:元素.属性;

          元素.id = 值;/元素.id;
          元素.className = 值;/元素.className;
          元素.title = 值;/元素.title;

          // 获取元素
          var div =  document.getElementsByTagName("div")[0];
          // 设置
          div.className = "myBox";
          div.title = "我是div";
          // 获取
          console.log(div.id);
          console.log(div.className);
          console.log(div.title);

          总结

          本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!

          免责声明:
          1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

          2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
          如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
          如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

          NICE源码网 JavaScript javascript的基础交互详解 https://www.niceym.com/18323.html

          常见问题
          • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
          查看详情
          • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
          查看详情