Javascript语法基础之按钮点击事件

Hello everyone,This is Kaylee.

这是一篇简单的JS语法基础内容，是在我学习过程中，比较难以记忆的知识点，我将搭配案例详解展示给大家，通过这种方式可以加深记忆，方便应用。

第一部分：JS基础语法：

1.标签，可放在代码任意位置；
2.JS输出方式由以下几种 ：
window.alert（）弹出警告框
document.write（）写到HTML文档里
innerHTML写入到HTML元素
console.log（） 写入到控制台
3. 利用元素id获取HTML元素
利用document.getElementById（）方法获取元素的id值来标识元素，并用innerHTML来获取或者插入元素内容；
4. js对象：
var person={ firstname：“john”，age：“13”}；
寻址两种方法：
name=person.lastname;
name=［“lastname”］；
5.js数组的定义：var cars=new Array（）；

第二部分：实例详解

1. 通过按钮的点击事件设置一个div的显示和隐藏
   思路如下：首先通过按钮id获取按钮元素，编写其点击事件。通过改变按钮的value值来判断div当前状态，从而设置其显示或隐藏。
   关键代码如下图：
   my$()方法如下：
function my$(id){ return document.getElementById(id); };
2. Tab切换案例
   思路如下：首先需要自定义一个属性作为索引 需要在点击之前获取所有索引。实现上Tab和下内容的排他功能。
   具体代码如下：
   

第三部分：总结。

通过以上两个小案例我总结了六种获取元素的方法。

<script>
    获取元素的方法总结
    //1.根据元素的id值获取元素，返回的是一个元素对象
    document.getElementById("id名");
    //2.根据标签名获取元素，返回为一个伪数组，里面保存多个DOM对象
    document.getElementsByTagName("标签名");
    //3.根据name属性值获取元素，返回为一个伪数组，里面保存了多个DOM对象
    document.getElementsByName("name属性的值");
    //4.根据类样式名获取元素，返回为一个伪数组，里面保存了多个DOM对象
    document.getElementsByClassName("类名");

    //5.6有的浏览器不支持 属于h5
    //5.根据选择器获取元素，返回的是一个元素对象
    document.querySelector("选择器名#或者.需要有");
    //6.根据选择器获取元素，返回来的是一个伪数组，里面保存了多了DOM对象
    document.querySelectorAll("选择器名");
</script>

以上内容希望能对大家有用。