HTML5CSS网页设计2023.3.15学习内容

最新推荐文章于 2024-08-16 20:24:29 发布

森森爱学习

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量79

点赞数

分类专栏：前端网页设计技术文章标签： css html5 学习 javascript

本文链接：https://blog.csdn.net/weixin_53214204/article/details/129602695

版权

前端网页设计技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>