5.14 js对象函数 js操作document对象

---对象
var myObject ={} /* 声明对象字面变量*/
myObject点语法取值赋值
代码格式 var person = {
name : "zhangsan",
age : 25,
say :function(){
alert("说汉语");
}
}

函数：有一定功能代码体的集合；函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
基础函数 function funname(){执行的代码}
带有参数的函数形参实参
|---带有返回值的函数 return

|---局部变量与全局变量函数体内定义的变量是局部变量

|---事件
|-----常用事件
|-----给元素挂事件的方式
onclick事件：点击事件
ondbclick事件：双击事件
onload事件：页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中
onchange事件
onblur事件和onfocus事件：onblur事件，当前元素失去焦点时触发该事件。对应的是onfocus事件：得到焦点事件
onscroll事件：窗口滚动事件
鼠标相关事件：
onmousemove：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。
onmouseout：鼠标离开某对象范围时，触发事件调用函数。
onmouseover：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。
onmouseup：当鼠标松开时触发事件
onmousedown：当鼠标按下键时触发事件
js操作document对象
找到我的对象
var div1 = document.getElementById("first"); 通过id名找到唯一的
var div2 = document.getElementsByClassName("second")[1];通过class名找到达是集合所以要通过索引找到每一项
var div3 = document.getElementsByName("inp")[0];通过name名找到达是集合所以要通过索引找到每一项
var div4 = document.getElementsByTagName("div")[0];通过标签名找到达是集合所以要通过索引找到每一项
var div5 = document.querySelector(".second");document.querySelector("#first");通过选择器的名找到第一个的
var div6 = document.querySelectorAll(".second");
操作
操作内容
表单 value
非表单 innerHTML innerText
操作样式
style.样式名
className =
操作属性
getattribute("属性名")；
setattribute("属性名"，"属性值")；
removeattribute("属性名")；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #first{
                width: 100px;
                height: 60px;
                background-color:#002752;
                color:white;
                border-radius: 5px;
                text-align: center;
                line-height:60px;
            }
            .sixth{
                width: 100px;
                height: 60px;
                background-color:orange;
                border-radius: 5px;
                float: left;
                margin-left: 20px;
            }
        
        </style>
    </head>
    <body>
        <div id="first" onmouseover="second()" onclick="first()" >
             事件
        </div>
        <input type="text" name="" id="" value="" onfocus="fifth()"onblur="forth()" />
        <select name="" onchange="third()">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">江苏</option>
        </select>
        <div class="sixth"></div>
        <div class="sixth"></div>
        <div class="sixth"></div>
    
    </body>
</html>
<script type="text/javascript">
    /*function hanshu () {
        alert("这是我的第一个函数");
        
    }
        hanshu();*/ //调用函数
    /*function sum (a,b) {
        alert(a+b);
    }
      sum(3,4);*/

    /*function chengji (a,b,c,d,e) {
        alert(a*b*c*d*e)
    }
       chengji(3,5,6,1,2)*/
    /*function sum (a,b) {
        return a+b; (可以把a+b赋给一个变量)
    }  
      sum(10,5);//程序执行完这句话，sum(10,5)变成了15；
      var c=sum(10,5);
       alert(c);///c是15
      */
     //对象
    /* var person ={
         name :"张三",
         age :18,
         sex:"男",
         say : function  () {
             return "我是中国人";
         }
     }*/
    /* alert(person.name+"说"+person.say());*/
    /* person.name="张三" ;
     person.age=18;*/
    /*console.log(person);*/
//=========================     
    function first () {
        console.log("我点击了");
    }  
    function second () {
        console.log("我的鼠标移上了");
    }  
    function third () {
        console.log("我的文本改变了");
    }  
    function forth () {
        console.log("我失去焦点");
    }  
    function fifth () {
        console.log("我获得了焦点");
    }  
      
    
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #first{
                width: 100px;
                height: 60px;
                background-color:#002752 ;
                border-radius: 5px;
                /*text-align: center;
                line-height: 60px*/
                color:white;
            }
            .second{
                width: 100px;
                height: 60px;
                background-color:orange ;
                border-radius: 5px;
                float: left;
                margin-left: 20px;
            }
            .five{
                width: 200px;
                height: 160px;
                background-color: blue;
                border-radius: 5px;
                float: left;
                margin-left: 20px;
            }
            .third{
                width: 100px;
                height: 60px;
                background-color:black ;
                border-radius: 5px;
                float: left;
                margin-left: 20px;
                color:white;
            }
        </style>
    </head>
    <body>
        <input type="" name="inp" id="inp" value="" />
            <div id="first" onclick="dianji()">
                    <span>按钮</span>
               </div>         
               <div class="second">1</div>
               <div class="second">2</div>
               <div class="second">3</div>
                       
         <!-- =====================    -->           
         <input type="checkbox" name="" id="" value=""  onclick="quanxuan()"/>全选
         <input type="checkbox" name="chk" id="" value="" />张店
         <input type="checkbox" name="chk" id="" value="" />桓台
         <input type="checkbox" name="chk" id="" value="" />周村
         
         
         <div class="third"></div>
         <div class="third"bs = "1" ></div>    
        <div class="third"></div>
        <div class="third" onclick="dianji1()">点击</div>
         <div style="clear: both;"></div>
         
     <!--===============事件补充================-->    
         <div id="btn_dj">
             事件补充点击
         </div>
                
         
        
    </body>
</html>
<script type="text/javascript">
    //找到元素
    var div1 = document.getElementById("first");
    var div2 = document.getElementsByClassName("second")[1];
    var div3 = document.getElementsByName("inp")[0];
    var div4 = document.getElementsByTagName("div")[0];
    var div5 = document.querySelector(".second"); /*document.querySelector("#first");*/
    var div6 = document.querySelectorAll(".second");
    console.log(div1);
    console.log(div2);
    console.log(div3);
    console.log(div4);
    console.log(div5);
//操作元素    
    //操作内容
        //非表单元素
          //获得文本
             /* alert(div1.innerHTML);
              alert(div1.innerText);*/
          // 修改文本   
           /* div1.innerHTML ="<p>按钮1</p>"
             div1.innerText ="<p>按钮1</p>"*/
          //表单元素
          //找到内容
          //alert(div3.value);
          //修改内容
            div3.value ="aaa";
        //操作样式
        function dianji(){
            div2.style.transition ="3s";
            div2.style.backgroundColor = "blue";
            div2.style.width = "200px";
            
            //div5.style.transition ="3s";
            div5.className ="five";
            
            div2.setAttribute("id","first");
            
        }
    /*============================*/
    var chk =document.getElementsByName("chk");
    //alert(chk[0].getAttribue("type"));
   // chk[0].setAttribute("checked","checked");
    //全选
    function dianji1(){
        var third = document.getElementsByClassName("third");
        for (var i = 0;i<third.length;i++) {
            var bs = third[i].getAttribute("bs");
            if(bs=="1"){
                third[i].style.backgroundColor="blue";
                    
                
            }
        }
    }
    
    /*==============事件补充===========*/
    var btn_dj = document.getElementById("btn_dj");
    btn_dj.onclick =function(){
        alert(111);
    }
    var second =document.getElementsByClassName("second");
    for (var i=0;i<second.length;i++) {
        second[i].onclick=function  () {
            //this代表该对象
            console.log(this.innerHTML);
        }
    }
    
    
    
    
    
    
    
    
</script>

posted @ 2018-05-14 21:34 sun1987 阅读(257) 评论(0) 收藏举报

刷新页面返回顶部

sun1987

5.14 js对象 函数 js操作document对象

公告

5.14 js对象函数 js操作document对象