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");
};
作者：lianjiaokeji 发表于2017/11/16 15:46:32 原文链接
阅读：0 评论：0 查看评论
