Html之JavaScript学习笔记02

关注

原创最新推荐文章于 2026-04-10 10:55:57 发布 409 阅读 AI 写同款· GEO 优化 ›

02HTML、CSS、JavaScript基础摘要：本文系统介绍了HTML、CSS和JavaScript的基础知识。HTML部分讲解了文档结构、元素标签和属性；CSS部分涵盖样式规则、选择器、盒模型和布局；JavaScript部分包括变量声明、条件语句、函数和事件处理。通过具体代码示例，展示了如何创建网页结构、添加样式效果以及实现交互功能，如图片切换和个性化欢迎信息。全文提供了从基础语法到实际应用的完整知识框架，适合初学者快速掌握网页开发的核心技术。阅读详情

1.js的常用事件（一定知道）

onfocus(获得焦点事件)
onblur（失去焦点的事件）

<body>
    用户名:<input id="name" type="text" name="name" /><span id="spanname"></span>
</body>
<script type="text/javascript">
    var txt=document.getElementById("name");
    var spantxt=document.getElementById("spanname");
    //获得焦点
    txt.onfocus=function(){
        document.getElementById("spanname").innerHTML="用户名至少6位";
    }
    //失去焦点
    txt.onblur=function(){
        var s=txt.value;
        if(s.length<6){
            spantxt.innerHTML="错误,用户名至少6位";
        }else{
            spantxt.innerHTML="";
        }
    }
</script>

结果演示

onchange事件(select控件选中值发生改变)

<body>
    <select id="province">
        <option value="js">江苏</option>
        <option value="sh">上海</option>
    </select>
    <select id="city">
        <option>南京</option>
        <option>苏州</option>
        <option>无锡</option>
    </select>
</body>
<script type="text/javascript">
    var p=document.getElementById("province");
    var c=document.getElementById("city");
    p.onchange=function(){
        var selectP=p.value;
        if(selectP=="js"){
            c.innerHTML="<option>南京</option><option>苏州</option><option>无锡</option>";
        }else if(selectP=="sh"){
            c.innerHTML="<option>浦东</option><option>浦西</option><option>徐汇</option>";
        }
    }
</script>

结果演示

鼠标事件

onmouseover（鼠标移动到指定元素上方）
onmouseout(鼠标移出指定元素)
onmousedown(鼠标按下)
onmouseup(鼠标弹起)
onload 事件

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    var b=document.getElementById("box");
    //鼠标移动到指定元素上
    b.onmouseover=function(){
        b.style.background="orangered";
        b.innerHTML="鼠标移动到与元素上onmousedown";
    }
    //鼠标被按下
    b.onmousedown=function(){
        b.style.background="greenyellow";
        b.innerHTML="鼠标被按下onmousedown";
    }
    //鼠标从指定元素移出
    b.onmouseout=function(){
        b.style.background="pink";
        b.innerHTML="鼠标从指定元素移出onmouseout";
    }
//  b.onmousemove=function(){
//      b.style.background="palevioletred";
//  }
    //鼠标弹起
    b.onmouseup=function(){
        b.style.background="#A9BBE7";
        b.innerHTML="鼠标弹起onmouseup";
    }
</script>

结果演示

阻止默认行为：(了解)

<a href="#" onclick="clickA(event)">点我</a>
<script type="text/javascript">
   function clickA(e) {
    //查看e是否存在preventDefault方法
    //火狐浏览器(w3c标准)
    if(e && e.preventDefault) {
     //组织默认行为
     e.preventDefault();
    }
    //ie浏览器(后期版本的ie也遵从了w3c规范)
    else {
     window.event.returnValue = true;
    }
   }
  </script>

阻止事件传递：（了解）

<div id="box" onclick="boxclicked(event)">
   <div id="inner" onclick="innerclicked(event)"></div>
</div>
<script>
   function boxclicked(e) {
    alert("box");
    //该浏览器是否遵循w3c规范
    if(e && e.stopPropagation) {
     e.stopPropagation();
    }
    //ie
    else {
     window.event.cancelBubble = true;
    }
   }
   function innerclicked(e) {
    alert("inner");
    //该浏览器是否遵循w3c规范
    if(e && e.stopPropagation) {
     e.stopPropagation();
    }
    //ie
    else {
     window.event.cancelBubble = true;
    }
   }
  </script>

关于隐藏和显示
设置Style.display=”none” 隐藏之后不会占位置
设置Style.visibility=”hidden”隐藏之后位置仍然存在

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件练习</title>
    </head>
    <body>
        <img id="pic" src="../2.17Pro/bookcover/fish.jpg" />
        <span id="show">显示</span>
        <span id="hidden">隐藏</span>
    </body>
    <script type="text/javascript">
        document.getElementById("show").onclick=function(){
            document.getElementById("pic").style.visibility="visible";
        }
        document.getElementById("hidden").onclick=function(){
            document.getElementById("pic").style.visibility="hidden";
        }
    </script>
</html>

visibility结果演示
display结果演示
- js的自定义对象(面试非常喜欢问掌握):
自定义对象的方式：在javascript中，所有的对象都是通过函数来创建
- 1.直接通过无参的方法来创建,这种情况下，name的信息专属于p，如果再new一个新的p，无法共享name

function Person(){}//函数
var p=new Person();//对象
p.name="小明";

2.通过构造方法来创建,这种情况下，name和age是属于所有对象共有的信息

function Person2(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
    alert(this.name);
    }
}
var p2=new Person2("小红","12");
p2.say();

3.通过Object来创建

 var p4=new Object();
p4.name="小黄";

4.通过字面量方式来创建

var p5={
    name:"小孩",
    age:"12",
    say:function(){
        alert(this.name);
    }
}
p5.say();

js的”继承”（了解）

js中所有的对象都是从Object过来的
js中对象的分类：普通对象和函数对象

函数：拥有prototype属性

prototype：显示原型，记录着所有实例公用的属性和方法，主要是用来继承用的(被子类用的)

对象：拥有__proto__

__proto__：隐式原型，对于普通对象而言，这个记录这父类的prototype

函数对象：同时拥有prototype，__proto__两个属性

ECMAScript6开始:js就开始支持class
关于给一个函数添加方法一定要会:(掌握)
String.prototype.reverse=function(){
}
3.javascript组成

1.ECMAScript

2.BOM

3.DOM

BOM : 浏览器对象模型（了解）

alert(“提示信息”);
confirm(“确认信息”); //该方法有返回值,点击确认按钮返回值是true，取消按钮返回值false
prompt(“请输入提示信息”); //该方法有返回值，点击确认返回输入的文本，点击取消返回null
open(“网址”) //打开指定网页

定时器：（了解）

var timer = null;
document.getElementById("start").onclick = function(){
  timer =  setInterval(function(){
   alert("xxx");
  },3000);
 }

document.getElementById("close").onclick = function(){
  clearInterval(timer);
}

location对象：

location.href = “指定网址”；让当前页面跳转指定url（掌握）

DOM（掌握）

DOM：文档对象模型

<html>
  <head></head>
  <body>
    <div id="aa"></div>
    <div></div>
  </body>
</html>
document.getElementById("aa")

当我们写了一个html文本信息后，会自动将这个html文本转化为对象模型（DOM树）
在DOM树种，每一个交叉的地方都叫节点(Node)

Node节点的分类：（掌握）

文档节点：document
元素节点：标签
属性节点：标签的属性值
文本节点：标签的文本内容

常用方法：

getElementById(“”)；根据id找到符合条件的标签

getElementByName(“”); 根据标签的name找到所有符合条件的标签

getElementByTagName(“”); 根据指定的标签名找到所有符合条件的标签

hasChildNodes() 查看一个节点是否拥有子节点

childNodes 获取一个节点的子节点

nodeName查看节点名称

nodeType 查看节点类型（1表示元素节点，2表示属性节点，3表示文本节点）

nodeValue 查看节点值

firstChild 获取某个节点下的第一个节点

getAttributeNode 获取某个节点下的属性节点

getAttribute 获取某个节点下的属性节点的值

setAttribute 设置某个节点下的属性节点