JS基础知识

一、网页结构分层：

结构层：HTML 骨头

修饰层：CSS 皮囊

逻辑层：JS 灵魂

二、JS的简单认识：

1、什么是JS：

        1）具备面向对象能力的解释型脚本语言，运行在浏览器里面，在浏览器里面有js的解释器。

        2）提升用户体验。

        4）弱类型语言，在声明变量的时候不用声明变量类型。

2、JS分成三部分：

        1）ES：语法 （核心）

        2）DOM：DocumentObjectModel 文档对象模型，实现页面特效

        3）BOM：BrowserObjectModel 浏览器对象模型

JS还可以写服务器：Node.js 、Egg

3、JS引入方式：

        1）写在行内中

<button type="button" onclick="javascript: alert(111)">点我试试button>

        2）直接在HTML的script标签里面写js代码。

<script>

// JS代码

</script>

        3）外联引入，使用script标签的src属性指定js文件来引入。

<script src="地址" type="text/javascript" charset="utf-8"></script>

4、输出信息的方式

输出信息到控制台：

console.log("1,2,3,' 你想要输出的信息" ');

console.error("打印错误信息");

console.warn("打印警告信息");

console.table({对象});

输出数据到页面之上：

window.alert('弹窗弹出显示信息');

document.write('你想要显示的消息');//直接写入页面之中

innerHTML document.getElementById("demo").innerHTML = "段落已修改。";

document.getElementById('box1').innerText="通过innerHTML加在div1的内容";

document.getElementById('box2').innerHTML="div2的按钮";

confirm('你是否确定该操作？'); //弹出一个确定取消的选择框,选择之后会返回blooean值

prompt('请输入你的姓名');//弹出一个可以输入数据的编辑框

三、对JS事件的简单认识：

1、事件三要素：

        1）事件源：操作的对象//页面中的元素

        2）事件：动作

        3）事件处理函数：使用代码实现效果的过程

/*事件源.事件=function(){

用代码实现你想要的效果；

}*/

// 事件源：document.querySelector("button")

//事件：onclick

//处理函数：function change() {

// console.log("你好")

// }

document.querySelector("button").onclick = function change() {

console.log("你好")

}

2、如何获取事件源

获取元素作为事件源或修改对象：

1）document.querySelector('CSS选择器')：获取选择器匹配到的第一个元素

2）document.querySelectorALL('CSS选择器')：获取选择器能匹配的所有元素

3）document.getElementById('ID名'):获取对应ID的元素

<div id="box1">我是div1</div>
<ul class="ul-box">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul >

<script type="text/javascript">

// 根据ID来获取事件源

var div=document.getElementById('box1');

console.log(div.innerHTML); //我是div1

// 根据选择器查询

var ul=document.querySelector(".ul-box");

console.log(ul);

//根据选择器查询li时，只返回第一个li

var li=document.querySelector("li");

console.log(li);//列表1
//querySelectorAll则可以查询到所有的


var liAll=document.querySelectorAll("li");

console.log(liAll);//NodeList(5) [li, li, li, li, li]

</script>

3、如何修改元素的样式

事件源.style.属性=' 新的属性值'； （如果属性有连接符的，连接符后面第一个字母大写）

修改背景颜色为黄色为例

<div id="box1">我是div1</div>

<script type="text/javascript">

// 根据ID来获取事件源

var div=document.getElementById('box1');

// 修改样式

div.style.width="200px";

div.style.height="200px";

//属性有连接符，变成驼峰命名法

div.style.backgroundColor="#00B4FF";

div.innerHTML="新的内容";

</script>

4、获取页面内容

事件源（元素）.innerHTML

事件源（元素）.innerText

5、如何修改内容

事件源（元素）.innerHTML='新的内容'；