JavaScript学习（基础知识）

最新推荐文章于 2024-10-02 05:39:15 发布

惊涛骇浪、

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量115

点赞数

文章标签： javascript js html css

本文链接：https://blog.csdn.net/weixin_44588243/article/details/105697183

版权

一、javaScript也能异常处理

<script>
        function demo(){
            try {
                alert(str);
            } catch (exce) {
                alert(exce)
            }
        }
        demo();
    </script>

二、javaScript的事件

1、onClick 点击事件
2、onMouseOver 鼠标经过
3、onMouseOut 鼠标移出
4、onChange 文本框内容改变事件
5、onSelect 文本框内容选中事件
6、onFocus 光标聚集事件
7、onBlur 移开光标事件
8、onLoad 初始化加载事件
8、onUnload 关闭网页事件

三、DOM对象的学习

1、是document object model 的简写
2、document.write()改变HEML的输出流。
3、document.getElementById(“pid”).innerHTML=“World”;
4、document.getElementsByTagName(“p”) //相同元素的第一个
5、 document.getElementById(“pid”).addEventListener(“click”,demo()) 可以添加多个事件

四、DOM对象操作CSS样式

1、document.getElementById(“pid”).style.background=“blue”;
2、常用的对象创建方法：
function person(name,age){
this.name=name;
this.age=age;
}
var son = new person(“Jack”,22);

还可以用以下方法：
var peron = new Object();
person.name="Jack";
person.age=22;
或者：
var person = {name:"Jack",age:30};

3、字符串对象的使用：
3.1 str.length //字符串长度
3.2 str.indexOf(“xxx”) //某字符所在的位置,不存在返回-1
3.3 var array = str.split(","); //切割字符串并用数组接收
4、日期对象
4.1自定义设置时间

<script>
    var mydate = new Date();
    mydate.setFullYear(2020,4,25);
    document.write(mydate);             //Mon May 25 2020 01:47:26 GMT+0800 (中国标准时间)
</script>

4.2 时钟练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟的练习</title>
</head>
<script>
    var mydate = new Date();
    mydate.setFullYear(2020,4,25);
    document.write(mydate);             //Mon May 25 2020 01:47:26 GMT+0800 (中国标准时间)
</script>

<script>
    function getCurrentTime(){
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        var month = currentTime.getMonth()+1;
        var date = currentTime.getDate();
        var hour = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var time = year+"-"+addZero(month)+"-"+addZero(date)+" "+addZero(hour)+":"+addZero(minutes)+":"+addZero(seconds);
        document.getElementById("time").value = time;
    }
    function doClock() {
        window.setInterval(function () { getCurrentTime() },1000);
    }

    function addZero(num){
        if (num < 10) {
            num = "0"+num;
        }
        return num;
    }
</script>
<body onload="doClock();">
    <h3>当前时间：</h3>
    <input id="time" type="text" />

    </div>
</body>
</html>

5、数组Array

function demo() {
        var array = new Array();
        array.push("s");
        for (var i=1;i<6;i++) {
            array.push(i);        //push从末尾追加
        }
        alert(array)
        array.sort();        //排序
        alert(array);
        array.reverse();   //翻转
        alert(array);
    }

6.练习，修改当前的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js修改对象属性</title>
</head>
<style>
    *{
        margin: 0px auto;
    }
    div{
        width: 100px;
        height: 100px;
        border: 1px solid rebeccapurple;
    }
</style>
<script>
    window.onload=function () {
        var obj01 = document.getElementsByTagName("div")[0];
        var obj02 = document.getElementsByClassName("div01")[0];
        var obj03 = document.getElementById("div02");
        console.log(obj01);
        console.log(obj02);
        console.log(obj03);
        obj01.style.backgroundColor="red";
        obj02.style.backgroundColor="green";
        obj03.style.backgroundColor="blue";
    }
</script>
<body>
    <div></div>
    <div class="div01"></div>
    <div id="div02"></div>
</body>
</html>