前端基础-05-JavaScript简介

柔情只为你懂 2022-06-05 03:41 199阅读 0赞

# JavaScript简介 #

### 1.JavaScript简介 ###

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

### 2.JavaScript如何调用 ###

*  **JS标签里面**

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

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

*  **写在标签里面**

**注意**：*在引入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");