JavaScript

行呗 2022-03-18 原文

JavaScript.html

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="JavaScript.css"/>
        
        <script src="./JavaScript.js" type="text/javascript" charset="utf-8"></script>
        
        <!-- JavaScript：客户端的一个脚本语言 -->
<!--         <script language="JavaScript" type="text/javascript">
        /*
        // js是一门弱类型的语言，变量的数据类型由后面赋的值的类型决定
        //这里的str是string类型
        var str="hello world";
        //alert:弹出一个窗口，窗口里显示的是括号里的信息
        alert(typeof str);
        //这里的str是number类型
        str=999;
        alert(typeof str);
        */
        
        /*
        基本数据类型
            数值型：javaScript不区分整数、小数
            字符串：javaScript不区分字符、字符串；
                    单引号、双引号意思一样。
            布尔型：true false
                    在JavaScript中，其他类型的布尔类型的自动转换
                        true：非零的数值，非空字符型，非空对象
                        false：零，空字符串，null，undefined
        
        引用类型
            所有new出来的对象
            用[]声明的数组
            用{}声明的对象
        
        //通过new出来的对象
        var person =new Object();
        person.pid="001";//创建pid属性
        person.pname="吴sb";//创建pname属性
        alert(person.pid+"-"+person.pname);
        */
        
        /*
        //java方法
        // public String hello(String name){
        //     return "hello to" + name;
        // }
        //js方法
            //无访问修饰符
            //无返回值类型
            //参数类型没有
            //参数数量不一定和括号里的一致
        function hello(num1,num2,name){
            //window.arguments可以获得传过来的所有参数
            if(num1>num2){
                return "hello to"+name;//有返回值
            }
            else{
                alert("Hello")//无返回值
            }
        }
        //方法调用
        hello();
        hello(1);
        hello(1,2);
        hello(1,2,"jim");
        //前面几个依次对应传参
        hello(1,2,3,4,5,"hello");
        */
        </script>
 -->    
 </head>
    <body>
        <div id="div1">
            <table id="table1" border="" cellspacing="" cellpadding="">
                <!-- 
                    onmouseover:当鼠标悬浮
                    showBGColor:显示背景颜色的方法
                -->
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td onmouseover="showHand()">1_1</td>
                    <td>1_2</td>
                    <td>1_3</td>
                    <td>1_4</td>
                    <td>1_5</td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td>2_1</td>
                    <td>2_2</td>
                    <td>2_3</td>
                    <td>2_4</td>
                    <td>2_5</td>
                </tr>
                <tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
                    <td>3_1</td>
                    <td>3_2</td>
                    <td>3_3</td>
                    <td>3_4</td>
                    <td>3_5</td>
                </tr>
            </table>
        </div>
        
        
        
        
    </body>
</html>

JavaScript.css

#div1{
    width: 300px;
    height: 300px;
}
#table1{
    width: 100%;
    height: 100%;
}

JavaScript.js

//当鼠标悬浮时，显示背景颜色
function showBGColor(){
    // event:当前发生的事件
    // event.srcElement:事件源
    //alert(event.srcElement);
    //alert(event.srcElement.tagName);-->得到的是TD //tagName:标签名
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var td=event.srcElement;
        //td.parentElement 表示获取td的父元素-->TR
        var tr=td.parentElement;
        //如果想要通过js代码设置某节点的样式，则需要加上 .style
        tr.style.backgroundColor="pink";
        //tr.cells表示获取这个tr中所有的单元格
        var tds=tr.cells;
        for(var i=0;i<tds.length;i++){
            tds[i].style.color="white";
        }
    }
}

//当鼠标离开时，恢复原始样式
function clearBGColor(){
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var td=event.srcElement;
        var tr=td.parentElement;
        tr.style.backgroundColor="transparent";
        var tds=tr.cells;
        for(var i=0;i<tds.length;i++){
            tds[i].style.color="";
        }
    }
}

//当鼠标悬浮在*_1时，显示手势
function showHand(){
    if(event && event.srcElement && event.srcElement.tagName=="TD"){
        var td=event.srcElement;
        //cuesor:光标
        td.style.cursor="hand";
    }
        
}