js基本操作

js操作

1.js内置对象String

在js中如何创建一个String对象
        var 对象名 = new String("字符串") ;
        
           //常用的方法在js中
               var str = "helloworldJavaEE" ;
               //charAt(index):获取指定索引处的字符
               document.write("charAt():"+str.charAt(4)+"<br/>") ;
               //concat 方法（String）:字符串拼接功能
               document.write("concat():"+str.concat("高圆圆")+"<br/>") ;
               //fontcolor 方法:给字符串颜色标记 ("参数英文单词或者#xxxxxx")
               document.write("fontcolor():"+str.fontcolor("greenyellow")+"<br/>") ; 
               //substring(start, end):截取功能 跟Java中的String一样
               document.write("substring():"+str.substring(5,10)+"<br/>") ;
               //split 方法:拆分,分割,获取到的字符串数组
               var str2 = "JavaEE-PhP-Go-R-C-C++" ;
              var strArray = str2.split("-") ;
              //遍历 for-in语句
              for(var i in strArray){
                  document.write(strArray[i]+"&nbsp;");
              }
    

2.js自定义对象

类似于java中的有参构造
方式1:类似于Java中有参构造
    
                定义对象的格式 跟定义函数格式一样
                function 对象(属性名称1,属性名称2,属性名称3....){
                    //追加它的成员属性
                    this.成员属性1 = 属性名称1 ;
                    this.成员属性2 = 属性名称2 ;
                    this.成员属性3 = 属性名称3 ; 
                    //追加功能
                    this.方法名 = function(空参/带参){
                        ....
                    }
                }
             创建对象
                var  对象名 =  new 对象(实际参数列表); 
        
           //创建一个人对象
           function Person(name,age,gender){
               //追加它的成员属性
               this.name  = name ;
               this.age = age ;
               this.gender = gender ;
               
               //追加功能
               this.speakEnglish = function(name){
                   alert("会说"+name) ;
               }
           }
           
           //创建Person对象
           var p = new Person("高圆圆",42,"女") ;
           document.write("姓名是:"+p.name+",年龄是:"+p.age+",性别是:"+p.gender+"<br/>") ;
           //调用功能
           p.speakEnglish("英语") ;
           
           document.write

方式2:类似于Java中的无参构造
           //1_定义对象的格式:function 对象(){}
           //2_创建对象 var 对象名 = new 对象() ;
           //3_追加属性和追加功能
           //对象名.属性名称 = "值"
           //对象名.方法名 = function(){}...
           
           //定义对象
           function Person2(){}
           //创建Person2对象
           var p2 = new Person2() ;
           //追加属性和追加功能
           p2.name = "文章" ;
           p2.age = 35 ;
           p2.gender = "男" ;
           p2.playGame = function(gameName){
               alert("会玩"+gameName) ;
               
           }
           
            document.write("姓名是:"+p2.name+",年龄是:"+p2.age+",性别是:"+p2.gender+"<br/>") ;
            p2.playGame("csgo") ;
           document.write("<hr/>") ;

方式3:使用Object对象(代表所有js对象)
           //直接new 对象
           var p3 = new Object() ;
           //追加属性和追加功能
           p3.name = "张佳宁" ;
           p3.age = 31 ;
           p3.gender = "女" ;
           p3.speakEnglish = function(name){
                    alert(p3.name+"会说"+name) ;
                       
           }
           document.write("姓名是:"+p3.name+",年龄是:"+p3.age+",性别是:"+p3.gender+"<br/>") ;
           p3.speakEnglish("英语") ;
           
           document.write("<hr/>") ;
           
           //字面值的方式: "Json数据格式"  (后期的重点)
           //基本格式:{"key":value} 这种键值对
           //需要描述一个学生---->姓名,年龄,性别,住址
           var student = {
                            "name":"高圆圆",
                            "age" : 42,
                            "gender":"女",
                            "address":"鄠邑区",
                            "playGame":function(gameName){
                                document.write("会玩"+gameName+"<br/>") ;
                    
           };
           

 方式4字面值方式
            复杂格式 :var 对象名 =   [{},{},{}...]
           //使用json对象.key获取value
           document.write(student.name+"<br/>") ;
           student.playGame("lol") ;
         

3.json_复杂类型

  //复杂格式  
           //var 对象名 =   [{},{},{}...]  描述类似数组或者集合
           var students = 
           [
                {"name":"高圆圆","age":42,"gender":"女","address":"西安市"},
                {"name":"王宝强","age":35,"gender":"男","address":"北京市"},
                {"name":"文章","age":32,"gender":"男","address":"渭南市"},
                {"name":"姚笛","age":25,"gender":"女","address":"西安市"}
           ]  ;
           //json对象[索引值].key 获取对应value值
           document.write(students[1].address) ;

4.DOM入门

    核心思想：获取元素对象，改变对象标签的属性
    
            根据docment获取标签对象
                方式1:在标签中给定id属性值,必须唯一 (推荐)
                //document.getElementById("id属性值") 获取标签对象
                var username = document.getElementById("username") ;
                
                //方式2:docuement.getElementsByClassName("class属性值") ; 获取的标签对象列表
                //var username = document.getElementsByClassName("cl_username")[0] ;
                
                //方式3:docuement.getElementsByName("name属性值") ;//获取的标签对象列表
                //var username = document.getElementsByName("name")[0] ;
                
                //方式4:通过标签名称获取标签对象
                //docuement.getElementsByTagName("同名的标签名称") ; //返回的标签对象列表
                //var username = document.getElementsByTagName("input")[0] ;
                
                //标签对象获取value属性:内容可以获取到
                alert(username.value) ;
​

5.js常见事件

            点击相关的 
                      单击事件 (重点)  onclick
                      双击事件         ondbclick
​
                     焦点事件 (重点)
                     获取焦点      onfocus
                     失去焦点      onblur
                     选项卡发生变化的事件 (重点)        
              select标签 下拉菜单       onchange     
                                option 下拉选项
                      鼠标经过事件 :onmouseover
                      鼠标移出事件:onmouseout
​
                      页面载入事件 (重点)