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>
以上内容希望能对大家有用。