HTML5网页设计-day03
每日一句:别小看任何人,越不起眼的人。往会做些让人想不到的事。
学习内容:什么是Javascript、js的使用、js函数使用
-
什么是Javascript
- 简称为js,是web页面上的脚本语言,给前端页面制作动态效果(点击事件等)
- js标签:script标签
-
js的使用
- 通常定义方法(function关键字)
- 给指定的标签添加事件(对应script标签中定义的方法)
- 点击事件
- 鼠标移入移出事件
- 失去焦点事件
- 获取焦点事件
- 下拉选项框改变事件
- 多选单选被选中事件
- bom对象:浏览器对象(window)
- dom对象:节点对象(html页面中的标签 document文档)
-
js函数使用
-
onclick() 鼠标点击事件
-
<input type="button" onclick="dj()"> <script> function dj(){ } </script>
-
-
alert():浏览器自带的弹出框->通常用来做前端的提示打印(打桩) 功能相当于Java中的System.out.println();
-
confirm():确认弹出框,会弹出一个boolean类型的返回值,如果是true
则是确定,false则想反
-
prompt():弹出输入框,在弹出框中会出现要求用户填写内容,返回值就是所填内容
-
-
js中如何找到指定标签
-
<!-- 只能找到单个属性标签,如果出现多个标签的id相同的,找到的话会报错 --> document.getElementById("id名"): <!-- 通过name属性值获取标签(获取到的一定是一个数组) --> document.getElementsByName("name属性名") <!-- 通过标签名获取标签(一个数组) --> document.getElementsByTagName("标签名") <!-- 通过class属性值获取标签(一个数组) --> document.getElementsByClassName("class属性值") # bom对象:浏览器对象(window) window.locatin:浏览器页面跳转 window.history:浏览器访问历史 window.close:浏览器关闭 页面加载时间:当浏览器中的内容全部加载完毕之后,会自动触发 window.onload = function(){} # dom对象:节点对象(document)
-
实际使用
-
<script> function dj(){ // var div1=document.getElementById("d1"); // var div1 = document.getElementsByClassName("d2"); // 根据标签名找到 // var div1 = document.getElementsByTagName("div"); // var div1 = document.getElementsByName("d2"); for(var i = 0;i<div1.length;i++){ div1[i].style.width="60px"; div1[i].style.height="60px"; div1[i].style.border="1px solid green"; } } </script> </head> <body> <div id="d1" class="d1">第一个div</div> <div id="d2" class="d2">第二个div</div> <div name="d2" class="d2">第三个div</div> <div name="d2" class="d2">第四个div</div> <input type="button" value="点击" onclick="dj()"> </body>
-
-
-
新手上路,以上内容仅供参考,如有不对的地方,望指出!