JS对象，自定义对象，DOM操作,事件编程

Sunqi01

已于 2022-04-26 21:24:04 修改

阅读量245

点赞数

文章标签： html html5 javascript

于 2022-04-26 19:48:00 首次发布

本文链接：https://blog.csdn.net/Sunqi01/article/details/124435390

版权

1.JS内置对象之Array

"] ;

           //对象名.length属性:获取长度
           //alert(arr.length) ;
           //分配数组元素
           //数组的对象名称[索引值] = 实际值; //索引值从开始
           /* arr[0] = 1 ;
           arr[1] = 10 ;
           arr[2] = 20 ;
           arr[3] = 30 ;
           arr[4] = 100; */
           alert(arr.length)
           //遍历数组,获取arr数组对象的运算
           for(var i = 0 ; i < arr.length ;i++){ //i就是角标 0,1,2,3,4
               document.write(arr[i]+"<br/>") ;//i=0,0<3,arr[0]
           }
       </script>

2.JS自定义对象方式

3.DOM操作方法

<!-- : DOM节点分为三大类：元素节点、属性节点、文本节点；

DOM事件:

onclick事件---当用户点击时执行

onload事件---当用户进入时执行

onunload事件---用用户离开时执

// 通过id号来获取元素，返回一个元素对象
document.getElementById(idName)
            要求是：当在输入框中输入内容完毕,鼠标光标失去焦点,
                       触发一个失去焦点事件,将文输入框的内容弹框出来 -->
   </head>
   <body>
       用户名:<input type="text" id="username" placeholder="请输入用户名" οnblur="textBlur()"/>
   
   </body>
   <script>
       function textBlur(){
           //失去焦点的函数
           var input = document.getElementById(username);
           //通过id="username"获取input标签对象
           alert(input.value);
           //获取它的value属性:获取内容
       }
   </script>

4.JS事件编程

这些所有的事件在标签上只需要在事件名称前面加上on..,将指定的事件绑定到onxx属性上

           1)点击相关的事件
                   单击 click -- onclick属性
                   双击 dbclick -- ondblick属性
           2)焦点事件
                   获取焦点 focus -- onfocus属性
                   失去焦点 blur -- onblur

           3)选项卡发生变化的事件,一般用在select下拉菜单中
                   事件名称 change --onchange属性
       -->
   </head>
   <body>
       <input type="button" value="click" οnclick="testClick()" /><br/>
       <input type="button" value="dbClick" οndblclick="testDbClick()" /><br/>
       用户名:<input type="text" id="username" value="请输入用户名"
       οnfοcus="testFouces()" οnblur="testBlur()" /><span id="tip"></span> <br/>
       <hr/>
       籍贯:
       <select οnchange="testChange()" id="pro">
           <option value="请选择">请选择</option>
           <option value="陕西省">陕西省</option>
           <option value="山西省">山西省</option>
           <option value="广东省">广东省</option>
       </select>
       <select id="city">
               

       </select>
   </body>
   <script>
       //单击点击事件函数
       function testClick(){
           alert("单击事件触发") ;
       }
       //双击点击事件的函数
       function testDbClick(){
           alert("双击事件触发") ;
       }

       //定义获取焦点事件函数
       function testFouces(){
           //将文本输入框的value属性值清空掉
           //dom操作:通过id="username"获取input标签对象
           var a = document.getElementById("username") ;
           //将input标签对象的value属性清空掉
           a.value = "" ;
       }

       //定义一个函数:失去焦点的函数
       function testBlur(){

           //需求:当鼠标移出文本框,触发失去焦点事件,
           //获取文本输入的内容,判断它的内容如果不是"高圆圆",在文本输入框的后面提示,"是否可用"

           //1)获取文本输入框的内容
           var username = document.getElementById("username").value ;

           //2)获取id="tip"所在的span标签对象
           var a = document.getElementById("tip") ;
           //3)逻辑判断
           if(username !="高圆圆"){
               //给span标签对象设置文本
               a.innerHTML = "×".fontcolor("red") ;
           }else{
               //可用
               a.innerHTML = "√".fontcolor("green") ;
           }

       }


       //定义函数:选项卡发生变化的事件
       function testChange(){
           //alert("选项卡变化了") ;
           //通过id="pro" 所在的select标签,获取它的标签对象
           //同时获取下拉菜单的内容
           var province = document.getElementById("pro").value ;
           //alert(province) ;
           //应该要给第二个select标签(城市所在的下拉菜单),获取它的标签对象,动态给力拼接城市
           //获取id="city"所在的select标签对象
           var city = document.getElementById("city") ;

           //将city的innerHTML清空掉

           city.innerHTML = "" ;
           //判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"
           if(province=="陕西省"){
               //定义一个城市数组
               var arr = ["西安市","渭南市","咸阳市","宝鸡市"] ;

               //遍历数组,获取每一个城市
               for(var i = 0 ; i < arr.length;i++){
                   // 拼接<option value="渭南市">渭南市</option> 文本
                   //给city标签对象(代表就是第二个select标签对象)拼接上面的文本
                   city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "
               }

           }

           if(province=="山西省"){
               //定义一个城市数组
               var arr = ["太原市","晋中市","临汾市","大同市"] ;

               //遍历数组,获取每一个城市
               for(var i = 0 ; i < arr.length;i++){
                   // 拼接<option value="渭南市">渭南市</option> 文本
                   //给city标签对象(代表就是第二个select标签对象)拼接上面的文本
                   city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "
               }

           }

           if(province=="广东省"){
               //定义一个城市数组
               var arr = ["广州市","东莞市","佛山市","深圳市"] ;

               //遍历数组,获取每一个城市
               for(var i = 0 ; i < arr.length;i++){
                   // 拼接<option value="渭南市">渭南市</option> 文本
                   //给city标签对象(代表就是第二个select标签对象)拼接上面的文本
                   city.innerHTML += "<option value="+arr[i]+">"+arr[i]+"</option> "
               }
           }
       }
   </script>

JSON的总结 (全称是 JavaScript Object Notation),

JSON 的执行快速简单，总结起来有：

数组（Array）用方括号(“[]”)表示，

对象（0bject）用大括号(“{}”)表示。

Sunqi01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS对象，自定义对象，DOM操作,事件编程

js的创建数组三种格式目录js的创建数组三种格式<script> //方式1:创建数组对象 //var arr = new Array() ; //方式2: 数组对象名 = new Array(size) ;//指定数组长度 // var arr = new Array(4) ; // 数组中最大索引值:arr.length-1 ...
复制链接

扫一扫