JS学习

Bertha 。 2022-05-21 00:50 121阅读 0赞

> JS的作用

1，修改HTML页面的内容  
2，修改HTML页面的样式

> JS的组成部分

1，ECMAScript：js的基础语法（规定、关键字、运算符、语句、函数等等）  
2，BOM：浏览器对象模型  
3，DOM：文档对象模型

> JS的引入方式

①内联方式：

在页面中写：
    <script> JS代码； </script>

②引入外部.js文件

> JS的触发事件(什么时候才会触发JS)

常见JS事件：

onclick:点击
    onsubmit：onSubmit="return 函数名()"，该函数返回boolean类型的值，true则可提交，false提交失败
    onload:页面或者图片加载完成
    onchange:用户输入改变字段内容
    
    onfocus:输入框获取焦点
    onblur:输入框失去焦点

> JS函数的编写（触发函数之后如何执行）

格式1：
    function 函数名(参数){ 
        函数体；
    }
    
    格式2：
    var f1 = function(){ 
        函数体；
    }
    //接着给元素派发事件
    document.getElementById("btn").click=f1;

函数体中的操作：
    1，根据元素的id获取元素(单个元素)：var obj = document.getElementById("id名");
    
    1.2，根据标签名获取一类元素(数组)：var array=document.getElementsByTagName("标签名");
    
    1.4，根据Class名称获取一类元素(数组)：var array=document.getElementsByClassName("Class名称");
    
    1.6，根据name名称获取一类元素(数组)：var array=document.getElementsByName("name名称");
    
    2，根据元素获取元素的值：var objValue = obj.value;
    
    3，往元素里面插入内容：obj.innerHTML="插入的内容";
    
    4，修改元素的某个属性值：obj.属性名="修改的内容"; 
    如<img id="imgId" src="/pic/999.jpg"/>
    修改其src路径的方式为：
    var obj = document.getElementById("imgId");
    obj.src="新的图片路径";
    
    5，修改元素的样式：
    obj.style.backgroundColor="#2196F3";
    obj.style.width="200px";
    obj.style.height="300px";

> 浏览器对象模型BOM

①window对象：

常用方法：
    1，消息框：
    alert("警告信息")；警告框
    confirm("你确定要删除？")；确认框，返回boolean
    prompt("请输入你的姓名?")；输入框，返回输入值
    
    2，定时器：
    var id=setInterval(method，time);每个time毫秒，就会执行一次method方法
    var id=setTimeout(method,time);经过time毫秒后，仅会执行一次method方法
    clearInterval(id);清除该id的定时器；
    clearTimeout(id);清除该id的定时器；
    
    3，打开和关闭
    open(url);打开
    close()；关闭

②location对象：

常用属性：href
    获取当前地址：location.href;
    设置当前地址：location.href="新地址";

③history对象：

常用方法：go(int num)；
    前进：go（1）；
    后退：go（-1）；

> 文档对象模型

刚才上面获取到的元素，即为DOM对象