首页 > 编程语言 >JavaScript

JavaScript

时间：2023-08-12 21:35:04浏览次数：48  
标签：function 对象 标签 JavaScript alert var JS

JavaScrip

JS介绍


JS和html代码的第一种结合方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScript和html的第一种结合方式</title>
  <script type="text/javascript">
    // alert是javaScript提供的警告框函数
    //他可以接收任意的数据类型的参数，这个参数就是警告框的提示信息
   alert("hello JavaScript")

  </script>
</head>
<body>

</body>
</html>

JS的第二种使用方式


和前面的一样这样的方式可以提高代码的复用性

  • JS文件

  • html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的第二种使用方式</title>
  <!-- script代码可以用来引入js文件，也可以用来定义JS代码
  此时用来引入JS文件，但是一个script标签中也2种功能只能使用一种
  src用来指定JS文件所在的路径（相对路径和绝对路径都可以）


  -->
  <script type="text/javascript" src="1.js">
    alert("hello")//此时定义的JS代码将无效
  </script>
</head>
<body>

</body>
</html>

JS的变量和数据类型介绍


没有赋初始值的变量值都是undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的变量和数据类型介绍</title>
  <script type="text/javascript">
    var i;
  // alert(i)//undefined（此时还没赋值，值为未定义）
    i=10;//给她赋值
   // alert(i)
    //typeof()是javaScrip语言提供的一个函数，可以返回该数据的数据类型
  // alert(typeof(i))
   // i="abc";//类型可变
 //alert(i)//abc
 var b=12;
 var c ="ccc";
 var d = b*c;
 alert(d)//NAN此时的结果，非数字，非数值

  </script>


</head>
<body>

</body>
</html>

JS的关系运算

  • 和java的关系运算基本相同，下面的是和java中不同的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的关系运算符（和java不同的部分）</title>
  <script type="text/javascript">
  var a =10;
  var b="10";
  alert(a==b);//true
  alert(a===b);//false(除了比较数值，还有比较类型)

  </script>
</head>
<body>

</body>
</html>

JS的逻辑运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
  <script type="text/javascript">
    /*
    在javascript中,所有的变量，都可以作为一个boolean类型的变量区使用
    0,null,undefined,""(空串)都认为是false
     */

    /*var a=0;//output:0为真
    if(a){
        alert("0为假");
    }else {
      alert("0为真")
    }*/
  /*  var b = null;ouptput:null为假
    if(b){
        alert("null为真");
    }else{
        alert("null为假");
    }*/
 /* var c = undefined;ouptput:undefined为假
    if(c){
        alert("undefined为真");
    }else {
        alert("undefined为假");
    }*/
  /*  var d = "";
    if(d){
        alert("空串为真");
    }else{
        alert("空串为假");
    }*/
  </script>
</head>
<body>

</body>
</html>
  • 和java相比的特殊情况
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
<script type="text/javascript">
  /*
  &&运算
  2种情况：
  第一种：当表达式全为真的时候。返回最后一个表达式的值
  第二种：当表达式中，有一个为假的时候，返回第一个为假表达式的值
   */
  var a ="abc";
  var b =true;
  var d =false;
  var c =null;
//alert(b&&a);//abc
  //alert(a&&b); //true
//alert(a&&d);//false
//alert(a&&c);//null
//alert(a&&d&&c);//false
/*
||运算
第一种情况：当表达式都为假时，返回最后一个表达式的值
第二种情况：当表达式有一个为真时，返回第一个为真的表达式的值
 */
//alert(d||c);//null
//alert(c||d);//false
alert(a||b);//abc
  alert(a||c);//abc
</script>
</head>
<body>

</body>
</html>

JS的数组（重点）

  • 和java中数组使用上的区别
  • 1.JS中的数组可以放不同类型的数据
  • 2.JS中的数组可以进行自动扩容，定义长度为0的数组，a[0],a[2]等等都可以使用
  • 3.javascript语言的数组中，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组做扩容操作

当我们的代码出现问题，运算不了的时候，可以在浏览器中按F12+(Fn)来看到底出现了什么问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <script type="text/javascript">
    var arr=[];//定义一个空数组
    //alert(arr.length)//0
   // alert(arr[0]);
    arr[0]=12;//数组将自动扩容为1
   // alert(arr.length);//1
  arr[2]="hello";
  alert(arr.length);//3
  //遍历数组
  for(int i=0;i<arr.length;i++){
      alert(arr[i]);
  }

    </script>
</head>
<body>

</body>
</html>

JS函数的第一种定义方式（重点）


  • 在java中函数的参数是确定的类型，所有需要写上数据类型用于限定所传入的参数。而js中不需要限定数据类型，所有不需要在定义函数时写类型（var也不用）也变量即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的第一种定义方式</title>
 <script type="text/javascript">
     //1.定义一个无参函数
     function fun(){
         alert("无参函数fun被调用了");
     }
   fun();//函数需要调用才会被执行
     //2.定义一个有参函数
   function fun2(a,b) {
       alert("有参函数fun2被调用了a->"+a+"b->"+b);
   }
fun2(12,"abc");
//3.定义带有返回值的函数
     function fun3(){
         return 1+2;
     }
     alert(fun3())//3
 </script>
</head>
<body>

</body>
</html>

函数的第二种定义方式

  • 感觉和前面的方式差别不大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的第二种定义方式</title>
</head>
<body>
<script type="text/javascript">
  //1.无参函数
  var fun = function (){
    alert("无参函数被调用了");
  }
  //2.有参函数
  var fun1 = funtion(a,b){
    alert("有参函数被调用了a->"+a+"b->"+b);
  }
  //3.有返回值的函数
  var fun2 = function () {
    return 1+2;;
  }

</script>
</body>
</html>

JS中的函数不允许重载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS不允许函数重载</title>
  <script type="text/javascript">
    function  fun(){
      alert("无参函数fun()")
    }
    function  fun(a,b){
      alert("有参函数fun(a,b)"+a+b);
    }
//上面的2个 fun函数进行了重载
    fun();//有参函数fun(a,b)
   // fun(2,"hello");//有参函数fun(a,b)

  </script>
</head>
<body>

</body>
</html>

我们从运算的结果可以发现：fun()和fun(2,"hello")都是执行的第二个函数。即第一个函数被第二个函数覆盖掉了。fun()没有传递参数，a,b的值用undefined替代了

隐形参数arguments



arguments相当于java中的变长参数（本质上也是数组），但是他是隐藏在JS函数中的参数列表中的。参数名即为数组名，可以直接当成数组用

  • 1.隐形参数接收参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐形参数</title>
    <script type="text/javascript">
        function fun(){//存在隐形参数arguments

         alert(arguments.length)//查看数组长度
            //遍历数组
            for (var i = 0; i < arguments.length; i++) {
                alert(arguments[i]);
            }

        }

     fun(2,"hello","world");
    </script>
</head>
<body>

</body>
</html>
  • 发现问题：
    经过验证：JS的可变参数和java中类似，当也出现普通参数时，将对应的参数传递给普通参数（相同），只是会将所有的参数都传递给隐形可变参数

在JS中数值和字符串相加也是做字符串拼接

  • 应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐形参数</title>
    <script type="text/javascript">
     //需求：编写一个函数。用于计算所有参数相加并返回
     function sum(){
         var result = 0;
         for (var i = 0; i < arguments.length ; i++) {
             if(typeof (arguments[i])=="number"){//过滤字符串类型
                 result += arguments[i];
             }

         }
         return result;
     }
     alert(    sum(1,"hello",3,4,5,6,7,8,9,10));//字符串和数值相加直接拼接
    </script>
</head>
<body>

</body>
</html>

object形式的自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>object形式的自定义对象</title>
  <script>
  var obj = new Object();//创建一个实例对象
  //定义属性
  obj.name = "周润发";
  obj.age = 18;
  //定义函数
  obj.fun= new function () {
    alert("姓名："+this.name+"年龄"+this.age);
  }
//对象访问
  alert(obj.name);




  </script>
</head>
<body>

</body>
</html>

注意：对object对象的运算还不是很理解与熟悉

花括号形式的自定义对象

  • 定义空对象
  • 属性的定义以及访问
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花括号形式定义对象</title>
  <script type="text/javascript">
    var obj = {
      name:"张三",
      age:18,
      fun:function (){
        alert("姓名："+this.name+"年龄"+this.age);
      }
    }
   //对象的访问
    alert(obj.fun());
  </script>

</head>
<body>

</body>
</html>

感觉这一种对象的对象和java中对象的定义更像，更能通俗易懂

事件的介绍

2种事件注册（绑定）的介绍

onload事件

** onl oad事件当浏览器解析完页面之后自动触发**

  • 静态注册

但是如果我们将需要执行的js代码都写在标签里面，这样代码的可读性将会很差

  • 解决方法--将需要执行的所有代码写成一个方法，然后在标签中只写一个方法即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
  <!--
  onl oad事件:当页面加载完成之后，常用于做页面js代码初始化操作
  onl oad事件当浏览器解析完页面之后自动触发

  -->
    <script type="text/javascript">
        //onoload事件的方法
        function onl oadFun(){
            alert("静态注册onload事件1");
            alert("静态注册onload事件2");
            alert("静态注册onload事件3");
        }
    </script>
</head>
<!-- 静态注册onload事件-->
<body onl oad="onLoadFun()"><!--此时这里的事件里面就只用写一个函数就可以了-->

</body>
</html>
  • 动态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
  <!--
  onl oad事件:当页面加载完成之后，常用于做页面js代码初始化操作
  onl oad事件当浏览器解析完页面之后自动触发

  -->
    <script type="text/javascript">

        window.onload=function () {
            alert("页面加载完成1");
            alert("页面加载完成2");
            alert("页面加载完成3");
        }
    </script>



</head>

<body >

</body>
</html>

和静态加载相比，动态加载不用依赖标签，写法也更加简单

onclick事件（单击事件）

  • onclick一般和按钮一起用的比较多，故用button进行演示

  • 静态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单击事件onclick</title>
  <!--onclick常用于按钮点击后的响应操作-->
    <script type="text/javascript">

   function  onclickFun(){
       alert("你是谁啊");
     }
    </script>
</head>
<body>
<!--静态注册-->
<button onclick="onclickFun()">按钮一</button>
<button>按钮二</button>
</body>
</html>

  • 动态注册
    onclick的动态注册和onload的动态注册有点不同
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单击事件onclick</title>
  <!--onclick常用于按钮点击后的响应操作-->
  <script type="text/javascript">
    window.onload=function(){
      //onclick事件动态注册
      //1.获取标签对象
      /*
      document是JS提供的一个对象，表示当前这个页面（html文件）的对象
      getElementById()方法通过标签的id来返回该标签的对象（element元素：表示的就是标签）
       */

      var buobj = document.getElementById("bu001");
      //2.通过标签对象.时间名=function(){}
      buobj.onclick = function () {
        alert("按钮被点击了");
      }
    }



  </script>
</head>
<body>
<!--onclick的动态注册-->

<button id="bu001">按钮二</button>
</body>
</html>

onblur事件（失去焦点事件）

  • onblur事件常用于表单的输入框中
  • 对于焦点和失去焦点的理解


  • 静态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <!--
  常用于输入框失去焦点后，验证其输入的内容是否合法
  -->
    <title>onblur事件</title>
  <script type="text/javascript">
    //失去焦点事件的静态注册
      //console是由javaScript提供的一个对象，专门用来向浏览器的控制台打印输入，用于测试使用
    //log()是打印的方法(相当于sout)
      function onblurFun(){
          alert("密码错误");
          console.log("动态注册失去焦点事件");
      }



  </script>
</head>
<body>
  用户名：<input type="text" onblur="onblurFun()" ><br>
  密码：<input type="password" ><br>
</body>
</html>

  • 动态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <!--
  常用于输入框失去焦点后，验证其输入的内容是否合法
  -->
    <title>onblur事件</title>
  <script type="text/javascript">

//失去焦点动态注册
    window.onload=function (){
        //1.获取标签对象
        var buobj = document.getElementById("in001");
        //2.通过标签对象.时间名=function(){}
        buobj.onblur = function (){
          alert("密码错误")
        }
    }


  </script>
</head>
<body>
  用户名：<input type="text" id="in001" ><br>
  密码：<input type="password" ><br>
</body>
</html>
  • 运行结果和前面一样

onchange事件（内容发生改变）

  • 常用于下拉列表和输入框内容发生改变后操作
  • 静态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
  <!--onchange事件常用于下拉列表-->
<script type="text/javascript">
  //静态注册
  function onchangeFun(){
    alert("女神已经改变了")
  }

</script>

</head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun()" >
  <option>--女神--</option>
  <option>--芳芳--</option>
  <option>--佳佳--</option>
  <option>--甜甜--</option>

</select>
</body>
</html>

  • 动态注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
  <!--onchange事件常用于下拉列表-->
<script type="text/javascript">
  
  //动态注册
  window.onload = function(){
    //1.获取标签对象
    var buobj = document.getElementById("se001");
    //2.通过标签对象.事件=function(){}
    buobj.onchange = function (){
        alert("女神发生改变了");
    }
  }

</script>

</head>
<body>
请选择你心中的女神：
<select id ="se001" >
  <option>--女神--</option>
  <option>--芳芳--</option>
  <option>--佳佳--</option>
  <option>--甜甜--</option>

</select>
</body>
</html>
  • 运算结果和前面的一样

onsubmit事件（表单提交事件）

  • 常用于表单提交之前，验证所有表单项是否合法
  • 错误演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
<script type="text/javascript">
  //静态注册
  function onsubmitFun(){
    alert("静态注册表单提交事件");
  }


</script>
</head>
<body>
<!--这个事件一般用于表单，所有用表单来演示-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">

  <input type="submit" value="静态注册"  />

</form>
</body>
</html>

从运行结果可以看到，当我们点击提交后，即使表单项不合法，也进行了表单项的提交。即并没有阻止表单的提交

从上面的尝试中我们可以知道,当我们的函数返回false，将会阻止我们的表单的提交

  • 静态注册的return 不能省略
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
<script type="text/javascript">
  //静态注册
  function onsubmitFun(){
    alert("静态注册表单提交事件---发现不合法");
    return false;
  }


</script>
</head>
<body>
<!--这个事件一般用于表单，所有用表单来演示-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">

  <input type="submit" value="静态注册"  />

</form>
</body>
</html>

此时当我们的数据出现不合法时，将不会进行提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
<script type="text/javascript">
 
//动态注册
  window.onload=function (){
      //1.获取标签的对象
      var buobj=document.getElementById("in001");
      //2.通过标签对象.事件=function(){}
      buobj.onsubmit=function (){
        alert("动态注册表单提交事件---发现不合法");
        return false;
      }
  }

</script>
</head>
<body>
<!--这个事件一般用于表单，所有用表单来演示-->
<form action="http://localhost:8080" method="get"  id="in001">

  <input type="submit" value="静态注册" />

</form>
</body>
</html>
  • 结果和前面的一样
  • 感悟：要想提交不成功，不管是动态还是静态函数都要返回false

doucument对象概念介绍


  • 对于document对象的理解

  • 什么是标签对象化



标签对象化即将一个标签看成是一个对象，标签的属性内容等内容看成是这个标签的属性

验证用户名是否有效


分析：验证输入框的内容是否合法

  • 1.需要获取输入框的内容
  • 1.1.通过DOM获取对应标签的对象
  • 1.2.通过标签对象获取其值（即输入框的内容）
    **并且当我们输入框的值进行了填写了，相当于改变了value属性的值，其获取的值也会相应的发送改变（变成修改后的值）
  • 2.验证内容是否合法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById（验证用户名是否有效）</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
        验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
         */
//因为是点击按钮后才进行操作的，所有需要绑定点击事件
        function onclickFun(){
            //1.当我们需要操作一个标签的时候，一定要线获取这个标签的对象
         var obj = document.getElementById("username");
         //2.通过标签对象获取获取输入框的值
            var usernametext =obj.value;
            //3.验证字符串，符合某个规则，需要使用正则表达式技术
            var patt = /^[\w_]{5,12}$/;
          /*
          test()方法用户测试某个字符串，是不是匹配我的规则
          匹配返回true，不匹配返回false

           */
            if(patt.test(usernametext)){
                alert("用户名合法");
            }else{
                alert("用户名不合法");
            }

        }

    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="www" \>
  <button onclick="onclickFun()">校验</button>
</body>
</html>


正则表达式对象

关于正则表达式，和java中的很像，用的时候查一下啊即可

2种常见的验证提示效果

  • 在前面的代码中，我们所有的功能都实现了，但是我们的校验提示太垃圾了

    第一种提示效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById（验证用户名是否有效）</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
        验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
         */
//因为是点击按钮后才进行操作的，所有需要绑定点击事件
        function onclickFun(){
            //1.当我们需要操作一个标签的时候，一定要线获取这个标签的对象
         var obj = document.getElementById("username");
         var usernameSpanObj = document.getElementById("usernameSpan");//获取span标签的对象
         //2.通过标签对象获取获取输入框的值
            var usernametext =obj.value;
            //3.验证字符串，符合某个规则，需要使用正则表达式技术
            var patt = /^[\w_]{5,12}$/;
          /*
          test()方法用户测试某个字符串，是不是匹配我的规则
          匹配返回true，不匹配返回false

           */
            if(patt.test(usernametext)){
              //innnerHTML是标签的一个属性，表示起始标签到结束标签中间的内容
                usernameSpanObj.innerHTML = "用户名合法";
            }else{

                usernameSpanObj.innerHTML = "用户名不合法";
            }

        }

    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="www" \>
    <span id="usernameSpan" style="color:red">1234</span>
  <button onclick="onclickFun()">校验</button>
</body>
</html>
  • 这样的提示效果更好

    第二种提示效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById（验证用户名是否有效）</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
        验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
         */
//因为是点击按钮后才进行操作的，所有需要绑定点击事件
        function onclickFun(){
            //1.当我们需要操作一个标签的时候，一定要线获取这个标签的对象
         var obj = document.getElementById("username");
         var usernameSpanObj = document.getElementById("usernameSpan");//获取span标签的对象
         //2.通过标签对象获取获取输入框的值
            var usernametext =obj.value;
            //3.验证字符串，符合某个规则，需要使用正则表达式技术
            var patt = /^[\w_]{5,12}$/;
          /*
          test()方法用户测试某个字符串，是不是匹配我的规则
          匹配返回true，不匹配返回false

           */
            if(patt.test(usernametext)){
              //innnerHTML是标签的一个属性，表示起始标签到结束标签中间的内容
            //用户名合法
                //在src地址里面需要用到JS里面的转义字符
                usernameSpanObj.innerHTML = "<img src=\"对勾.jpg\" width=\"18\" height=\"18\">";

            }else{
            //用户名不合法

                usernameSpanObj.innerHTML =   "<img src=\"差.jpg\" width=\"18\" height=\"18\">"

            }

        }

    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="www" \>
    <span id="usernameSpan" style="color:red">
        <img src="对勾.jpg" width="18" height="18">

    </span>
  <button onclick="onclickFun()">校验</button>
</body>
</html>
  • 第二种提示就是将第一种的字变成了图片了，这样更生动明了

getElementsByName方法


需求：当我们点击下面的按钮时，通过事件的绑定，可以实现上面多选对应的操作

  • 思路分析：
    ，通过点击按钮后依次操作，我们需要同时对多个多选框进行操作，即我们需要通过获取多个标签的对象，即通过getElementByName方法获得对象数组（即获取多个标签的对象）。
    然后通过标签的选中属性，依次对多个标签进行操作
  • 通过getElementByName获取的对象数组，数组里面对象的顺序就和标签的排列顺序一样（从前往后）
  • checked这个属性表示选中框的选中状态，true表示选中，false表示不选中，这个属性可读可写(可以在输入时改变)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName方法</title>
    <script type="text/javascript">
        //全选方法(让所有的复选框都选中)
        function clickAll(){
            //1.操作标签需要获取标签的对象
            //hobby的操作就和数组一样
            var hobby = document.getElementsByName("hobby");//获取所有input标签的对象数组
            //2.遍历对象集合将所有input对象的checked属性的值都改成true
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked = true;
            }




        }
        //全都不选方法
        function clickNo(){
            //1.获取标签的对象数组
            var hobby = document.getElementsByName("hobby");
            //2.遍历数组将标签的checked属性赋值为false
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked = false;
            }
        }
        //反选方法
        function clickReverse(){
            //1.获取标签的对象数组
            var hobby = document.getElementsByName("hobby");
            //2.遍历数组将checked为false的标签的checked属性赋值为true
            //将为false的赋值为true
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked = !hobby[i].checked;
            }
        }

    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" > c++
<input type="checkbox" name="hobby" value="java" >java
<input type="checkbox" name="hobby" value="python">python
<br>
<button onclick="clickAll()">全选</button>
<button onclick="clickNo()">全不选</button>
<button  onclick="clickReverse()">反选</button>

</body>
</html>

运行结果不好演示，自己演示

getElementsByTagName方法

  • TagName标签名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName方法</title>
    <script type="text/javascript">
        //全选方法(让所有的复选框都选中)
        function clickAll(){
            //1.操作标签需要获取标签的对象
            //hobby的操作就和数组一样
             //此时我们没有name这个属性，我们可以按照标签名来创建标签的对象数组
            let hobby = document.getElementsByTagName("input");

            //2.遍历对象集合将所有input对象的checked属性的值都改成true
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked = true;
            }
        }


    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" > c++
<input type="checkbox" value="java" >java
<input type="checkbox" value="python">python
<br>
<button onclick="clickAll()">全选</button>


</body>
</html>

获取的对象数组的使用和对象数组的顺序和之前的一样

document对象的三个查询方法的使用注意事项

浏览器执行html页面的代码，是从上往下执行的

因为代码是从上到下执行的，当执行到alert(document.getElementById(“id001”))时，还没有执行到button标签，所有执行结果为null

  • 注意事项

dom对象查询练习(JS综合练习)

  • 就是咋演示一个标签对象，他有哪些方法可以使用


  • 需求概述
    1. 需要理解文档对象模型，即一个文档在解析的时候要知道将会被解析成几个对象，哪些是对象，有几个对象（参考前面的文档解析树）
  • 2.innerText和innnerHTML有什么区别：innerText仅仅会取文本，而innnerHTML还会取到标签

document对象的补充内容

  • 补充内容（2个方法）

  • 关于window.load的解释
    在JavaScript中，window.onload 是一个事件处理程序，它用于指定在整个 HTML 文档加载完毕后执行的代码。具体来说，它会在所有的 HTML 元素、样式、脚本以及其他资源都被下载并完全加载到浏览器之后触发。window.onload 是一种确保在页面完全加载后执行代码的有效方法。

  • 错误示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document补充内容</title>
  <script type="text/javascript">
//要求：需要我们使用js代码来创建html标签，并显示在页面上
//createElement()和appendChild()方法
//标签的内容就是:<div>国哥，我爱你</div>
//1.使用creatElement()方法创建标签
var divobj = document.createElement("div");//<div></div>在内存中
divobjinnerHTML ="国哥,我爱你";//<div>国哥,我爱你</div>，仅仅存在与内存中
//2.我们将创建的div标签，添加作为body的子标签
//appendChild(ChildNode)方法，用于为一个标签添加子标签
document.body.appendChild(divobj);

alert(divobj)
  </script>
</head>
<body>

</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document补充内容</title>
  <script type="text/javascript">
 window.onload = function (){
     //要求：需要我们使用js代码来创建html标签，并显示在页面上
//createElement()和appendChild()方法
//标签的内容就是:<div>国哥，我爱你</div>
//1.使用creatElement()方法创建标签
     var divobj = document.createElement("div");//<div></div>在内存中
     divobj.innerHTML ="国哥,我爱你";//<div>国哥,我爱你</div>，仅仅存在与内存中
//2.我们将创建的div标签，添加作为body的子标签
//appendChild(ChildNode)方法，用于为一个标签添加子标签
     document.body.appendChild(divobj);
 }



  </script>
</head>
<body>

</body>
</html>

  • 从运行结果看是否添加成功

  • 文本也是一个结点

标签：function,对象,标签,JavaScript,alert,var,JS
From： https://www.cnblogs.com/swtaa/p/17617746.html

相关文章

  • JavaScript之流程控制
    1流程控制2顺序流程空制顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照(代码的先后顺序，依次执行)程序中大多数的代码都是这样执行的。3分支流程控制if语句3.1分支结构3.2if语句3.2.1语法结构//条件成立执行代码，否则什么也不做if(条件表达式){/......
  • 前端JavaScript高频面试题
    一、js基本概念1.HTML语义化理解？得分点：语义化标签,利于页面结构化,利于没有css页面也可读,利于SEO,利于代码可读标准答案：在使用html标签构建页面时,避免大篇幅的使用无语句的标签2.说一说盒模型？得分点：标准盒模型、怪异盒模型（box-sizing:border-box;）、盒模型大小标准答案：标......
  • C C++ Java python HTML/CSS/JavaScript
    C/C++是一种底层的语言，它可以直接操作内存和硬件，运行速度很快，但是也很难学习和调试，容易出错。Java是一种面向对象的语言，它可以跨平台运行，有很多成熟的框架和库，适合做大型的企业级应用，但是也很繁琐和冗长，需要写很多代码。Python是一种高级的语言，它可以用简洁的语法来实现复杂的功能......
  • How to set z-index order in Canvas using javascript All In One
    Howtosetz-indexorderinCanvasusingjavascriptAllInOne如何使用javascript在Canvas中设置z-index顺序globalCompositeOperation//全局作用域globalscopeconstcvs=document.querySelector("#canvas");constctx=canvas.ge......
  • 【面试题】 JavaScript中高级语法--?? 表达式 的作用
    前言在JavaScript中，双问号（??）表达式是一种非常有用的方法。它的作用是用来检测一个值是否为null或undefined。如果该值为null或undefined，那么双问号表达式会返回一个默认值。下面我们就来具体探究一下双问号表达式的用法，以及它与其他相似方法的区别。具体用法。其实，双问号表达式就是......
  • Javascript 面向对象编程
    avascript是一个类C的语言，他的面向对象的东西相对于C++/Java比较奇怪，但是其的确相当的强大，在 Todd同学的“对象的消息模型”一文中我们已经可以看到一些端倪了。这两天有个前同事总在问我Javascript面向对象的东西，所以，索性写篇文章让他看去吧，这里这篇文章主要想从一个整体的角度......
  • 认识Javascript数组
    1.认识数组 数组就是某类数据的集合，数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组，但是因为数组里面可以包含对象（数组也是一个对象），所以数组可以通过相互嵌套实现类似多维数组的功能 1.1定义数组声明有10个元素的数组vara=newArray(10此时为a已经......
  • javascript 数组(array) 常用的方法集锦(上)
    由于三大框架的出现,对DOM的操作转成对数据的操作,对数据的操作主要体现在数组和对象上,今天就以数组为例,对数组的各种操作进行总结欢迎访问幸福拾荒者，一个前端知识总结分享平台，与大家一起共同成长共同进步！......
  • javaScript操作符
    1运算符运算符(operator)也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算有:算数运算符递增和递减运算符比较运算符逻运算符赋值运算符2算术运算符2.1算术运算符的概述概念：算术运算符使用的符号，用于执行两个变量或值的算术运算。运算符描......
  • Javascript学习笔记-js实现拷贝复制功能
    /***复制单行内容到粘贴板*content:需要复制的内容*message:复制完后的提示，不传则默认提示"复制成功"*/functioncopyToClip(content,message){varaux=document.createElement("input");aux.setAttribute("value"......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99