JavaScript简介1.JavaScript简介
2.JavaScript如何调用
<script>
alert(5);
</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代码规范
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");
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!