前端基础-05-JavaScript简介

JavaScript简介

1.JavaScript简介

• JavaScript 是一种脚本语言，是一种动态类型、弱类型
• JavaScript通常用来操作HTML页面的
• html骨架，css是样式，js是行为

2.JavaScript如何调用

• JS标签里面

<script>
     alert(5);
</script>

• 写在外部.js后缀文件里面，通过script标签引入

#引用方法：
<script src="testJs.js"></script>

• 写在标签里面

<div class="box1" onclick="alert(1)">
</div>

注意：在引入js文件的script里面，一定不能再写js代码

标签里面写js代码一般情况下不推荐

script标签的位置：

head或者body里面,建议写在body里面
要注意是否需要加上window.onload

window.onload = function () {
//这里再写代码（意识是：当整个页面加载完成之后，再执行这里的代码）
//一个页面中只能出现一次window.onload
alert(5);
}

如果说没有什么特别的要求，一般script标签放在body结束之前

3.JavaScript注释

• 单行注释

/*
多行注释
*/

• 多行注释

//  单行注释

4.JavaScript代码规范

• 严格区分大小写 alert才是js本身自带的，Alert不是自带的
• 语句字符必须是半角符号
• 某些完整的语句后面需要分号
• 引号里面代表字符串，字符串是没有代码功能的，所以不需要满足上面的条件

5.常用的获取页面元素

那么JS如何操作页面：
要操作页面，就是操作标签，JS要操作标签，就要先获取标签

#JS如何获取独有标签
#document.title
document.title = "我要把标题改成666";

#document.head

#document.body
//修改别的标签的内容，得用innerHTML(会解析标签)，innerText（不会解析标签）
document.body.innerHTML = "<em>我想给页面加点东西</em>";
document.body.innerText = "<em>我想给页面加点东西</em>";

#其他标签的获取，id前面必须是document,其他的前面可以是某个元素，但不能是集合
#通过id获取元素
document.getElementById()
//获取的是确切的某个元素，可以直接操作这个元素
document.getElementById("box").innerHTML += "吃惊";


#通过className获取元素(不支持IE8及以下)
.getElementsByClassName()
//获取的是一堆元素的集合，设置操作的时候要通过下标（索引、序号）拿到对应的某一个
document.getElementsByClassName("wrap")[0].innerHTML = "害怕";
document.getElementsByClassName("wrap")[1].innerHTML = "害怕+1";

#通过标签名获取元素
.getElementsByTagName()
document.getElementsByTagName("p")[0].innerHTML = "同学们好";
alert(document.getElementsByTagName("p").length);

#通过选择器的写法获取元素（不兼容IE7及以下）
.querySelector()
.querySelectorAll()
//获取第一个对应的元素
document.querySelector("#box1 .fly").innerHTML = "box1 kk fly";
//获取所有对应的元素
document.querySelectorAll("#box1 .fly")[1].innerHTML = "box1 fly";

#通过name值获取
document.getElementsByName（）

#写入内容
#在页面加载完之前，给body部分新增内容
document.write()
document.write("我是新增的内容！");
#在文档流关闭之后，修改整个html的内容
window.onload = function () {
    document.write("我是新增的内容！");
};

6.JS常用的几个事件

#事件：用户的操作
    元素.事件 = 函数；
    鼠标事件：
        左键单击 oncclick
        左键双击 ondblclick
        鼠标移入 onmouseover/onmouseenter
        鼠标移出 onmouseout/onmouseleave
document.getElementById("box").onclick = function () {
            alert("hello world");
           document.getElementById("box").innerHTML = "哈哈";
            this.innerHTML = "哈哈";
};
document.getElementById("box").onmouseenter= function () {
            alert("hello world");
};
document.getElementById("box").onmouseleave= function () {
            alert("hello world");
};

7.自定义标签属性

# js操作元素的标签属性：
规范的标签属性：
. 符号直接操作（可读可写）
不规范（自定义）的标签属性：
获取：.getAttribute
设置：.setAttribute
移除：.removeAttribute
var box = document.getElementById("box")
box.setAttribute("python" , "hello");
box.getAttribute("python")
box.removeAttribute("python");