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（）；

第二部分：实例详解

通过按钮的点击事件设置一个div的显示和隐藏
思路如下：首先通过按钮id获取按钮元素，编写其点击事件。通过改变按钮的value值来判断div当前状态，从而设置其显示或隐藏。
关键代码如下图：
my$()方法如下：
function my$(id){ return document.getElementById(id); };
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>

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

Javascript语法基础之按钮点击事件相关推荐

JavaScript的按钮点击事件绑定
JavaScript的按钮点击事件绑定: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
【javaScript】探讨监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题
1.问题描述在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发,这明显不是我们想要的,我们来看看怎么解决 2 ...
javascript 按钮点击事件
这个部分主要来讲解一下按钮点击事件的集中js的实现方式: 方法一: [html] view plaincopy <!DOCTYPE html> <html> <head ...
jquery+javascript触发a标签的点击事件
今天项目经理跟我说window.open()在一些浏览器上会被拦截,当时的解决方案是:用a标签的target="_blank"属性也可以打开窗体页面于是解决了A问题出现了B问题: ...
【Android 插件化】Hook 插件化框架 ( Hook 实现思路 | Hook 按钮点击事件 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
java添加按钮点击事件_如何为odoo 10中的按钮点击事件添加一个java脚本处理程序？...
我想使用java脚本为header中的按钮创建一个处理程序.下面我视图模型给出:如何为odoo 10中的按钮点击事件添加一个java脚本处理程序? inherit_id="web.asset ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
Android之按钮点击事件——显示图片隐藏图片
哈喽!时隔两个月,我又和大家见面啦! 今天,我要分享的内容一如既往的很基础,即关于Android的按钮点击事件--显示图片&&隐藏图片,它的执行过程比较简单,所以这里我就不放什么图片或 ...
设置html按钮点击事件失效
想要按钮不能点击可以通过设置按钮点击事件失效来实现:而在CSS中,可以使用pointer-events属性来实现点击事件失效. pointer-events属性除了指示该元素不是鼠标事件的目标之外,值 ...