JS 03-CSDN博客

本文链接：https://blog.csdn.net/Aary1990/article/details/81025319

元素对象了解

select 对象了解

属性:
    options :   获取下拉选框中所有选项 (option数组)
    selectedIndex: 当前被选中的选项下标

函数:
    add(option) : 追加一个选项
    remove(index): 删除指定索引的选项

事件:
    onchange    :   当选项被改变时, 触发 !

option 对象了解

创建对象:

    var opt = new Option(文本内容,value属性值);

常用属性:
    -   index   :   当前选项在选框中的下标
    -   text    :   文本内容属性 (与innerHTML一致)
    -   value   :   提交服务器的数据值
    -   selected:   boolean类型, true表示当前选项被选中

table对象(table标签对象) 了解

属性:
    -   rows    :   获取表格中所有的行对象(tableRow)

函数:
    -   insertRow():    追加一行, 并返回tableRow对象
    -   insertRow(index):   在指定索引的位置, 插入一行, 并返回tableRow对象
    -   deleteRow(index):   从指定索引的位置, 删除一行

tableRow 对象(tr标签对象) 了解

属性:
    -   cells   :   获取当前行中所有的列对象(tableCell)
    -   rowIndex:   当前行在表格中的索引值;

函数:
    -   insertCell()    :   追加一列, 并返回tableCell对象
    -   insertCell(index):  在指定索引的位置, 插入一列, 并返回tableCell对象
    -   deleteCell(index):  从指定索引的位置, 删除一列

tableCell 对象(td标签对象) 了解

属性:
    -   cellIndex   :   获取列在当前行中的下标
    -   colSpan     :   获取/设置 td垂直占用单元格的数量
    -   rowSpan     :   获取/设置 td横向占用单元格的数量

浏览器对象

打开新窗口了解

格式:

    var 新窗口 = window.open(url,[name],[config],[specs]);

    参数:
        1.  url :   必须传递的参数, 表示打开的新窗口加载的内容地址,可以是本地相对地址,也可以是网络地址 !
        2.  name:   窗口的名称, 唯一标识! 相同name的窗口,无法打开两个 !
        3.  config: 配置对象,字符串类型参数, 包含多个键值对, 键与值之间使用等号连接, 多个键值对之间使用逗号分隔!
            常用配置:
                -   height  : 窗口高度 px;
                -   width   : 窗口宽度 px;
                -   left    : 新窗口距离屏幕左边框的距离!
                -   top     : 新窗口距离屏幕上边框的距离!

        4.  specs   :   是否允许加载历史文件

关闭窗口了解

window.close();

案例:

var height=153;
var width=195;

for(x=0;x<3;x++){

    for(i=0;i<5;i++){
        var xtop=i*height;
        for(j=0;j<7;j++){
            var xleft=j*width;
            window.open("http://itdage.cn",x+""+i+""+j,"height=153px,width=195px,left="+xleft+"px,top="+xtop+"px",true);
        }
    }

}

定时器 ***

一次性定时器 ****

格式:
    setTimeout("执行语句",毫秒时间);

案例:
    定时弹窗
    function dialog(){
        alert("高清无码武术教学视频已经加载完毕...");
    }

    alert("请稍等,  正在加载...");
    setTimeout("dialog()",5000);

周期性定时器 *****

-   开启周期定时器
    格式:
        var obj = setInterval("执行语句",毫秒时间);


-   关闭周期定时器
    格式:
        clearInterval(周期定时器对象);


案例:

    <script>
    var count = 10;
    var interval ;
    function init(){
        interval = setInterval("x()",1000); 
    }
    function x(){
        if(count==0){
            window.close();
        }
        count--;
        document.getElementById("h3").innerHTML = "因各种原因,本网站不适宜长时间浏览,将在"
        +count+"秒后关闭";
    }
</script>
</head>
<body onload="init()">
    <h3 id="h3">因各种原因,本网站不适宜长时间浏览,将在10秒后关闭</h3>

获取屏幕信息 screen 了解

属性:
    -   width   :   获取屏幕宽度
    -   height  :   获取屏幕高度
    -   availWidth: 获取屏幕可用宽度
    -   availHeight:获取屏幕可用宽度


windows任务栏: win7|10 40px  , windowsxp 30px

获取历史信息 history 了解

函数:
    -   back()  :   后退到上一页
    -   forward():  前进到下一页
    -   go(数字)  :   传入正数表示前进的页数, 传入负数表示后退的页数 !

浏览器地址对象 location ***

属性:
    -   href    :   用来获取以及设置 地址栏中的网址

函数:
    -   reload();   刷新网页
    -   replace(url)    :   替换当前网页内容为指定URL下的内容 !  替换不等于跳转 , 无法通过后退回到替换前的页面!
    -   assign(url)     :   跳转到指定url , 与location.href=url 效果一直

--------------------------------------------------

location对象, 重要在后端学习时,  
    我们可以通过js进行运算, 
    然后将运算的结果 拼接为一个带有参数的url  
    并进行跳转 !

事件熟悉

事件: 指的是在HTML元素状态改变, 用户操作鼠标, 操作键盘时触发的动作 !

分类:
    状态事件
    鼠标事件
    键盘事件

事件对象 event 熟悉

事件在触发后, 会产生一个事件对象, 此对象可以直接操作!

-   常用属性:
    -   clientX :   触发鼠标事件时 , 鼠标在网页中的横向坐标x点的位置
    -   clientY :   触发鼠标事件时 , 鼠标在网页中的垂直坐标Y点的位置
    -   keyCode :   触发键盘事件时, 键盘代码!

键盘事件了解

-   键盘按下
        onkeydown

-   键盘弹起
        onkeyup

案例:

    window.onkeydown = function(){
        console.info("键盘被按下了:"+event.keyCode);
    }

    window.onkeyup = function(){
        console.info("键盘弹起了:"+event.keyCode);
    }

事件冒泡机制了解

html元素 在触发鼠标事件时,  会依次激活触发父元素的同类事件 !

如何停止事件冒泡:

    方式1.    设置取消冒泡标签 为true
        在触发事件的代码块中: event.cancelBubble = true;

    方式2.    调用停止事件冒泡函数
        在触发事件的代码块中: event.stopPropagation();

事件源对象了解

指的就是最初触发事件的 元素对象 !

我们可以在事件的代码中, 获取到当前事件的源对象 !

格式:

    -   IE      :   var e = event.srcElement;

    -   其他  :   var e = event.target;

兼容:

    var e = event.target;
    if(e=="undefined"){
        e = event.srcElement;
    }

计算器案例:

<style>
    button{
        width:50px;
        height:30px;
        margin: 1px;
    }
    #content{
    display:inline-block;
        border:1px solid #999;
        padding: 5px;
    }
    #header{
        border:1px solid #999;
        padding: 5px;
        height:20px;
    }
</style>
<script>
    function x(){
        //1.    获取到用户点击的内容
        var e = event.target;
        if(e=="undefined"){
            e = event.srcElement;
        }
        if(e.nodeName=="BUTTON"){
            var text = e.innerHTML;
            //2.    根据点击的内容进行分类操作
            var header = document.getElementById("header");
            switch(text){
            case "c":
                //清空内容
                header.innerHTML = "";
                break;
            case "=":
                header.innerHTML = eval(header.innerHTML);
                break;
            default:
                header.innerHTML += text;
            }
        }
    }
</script>
</head>
<body >

    <div id="content">
        <div id="header">

        </div>
        <table onclick="x()">
            <tr><td><button>0</button></td><td><button>=</button></td><td><button>c</button></td><td><button>+</button></td></tr>
            <tr><td><button>1</button></td><td><button>2</button></td><td><button>3</button></td><td><button>-</button></td></tr>
            <tr><td><button>4</button></td><td><button>5</button></td><td><button>6</button></td><td><button>*</button></td></tr>
            <tr><td><button>7</button></td><td><button>8</button></td><td><button>9</button></td><td><button>/</button></td></tr>
        </table>
    </div>
</body>