HTML5-网页控制

智慧的头上不长毛

于 2024-07-04 21:06:06 发布

阅读量973

点赞数 26

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/zj2826201064/article/details/140160342

版权

JavaScript 是一种动态类型，弱类型，基于原型的直译式脚本编程语言，它内置支持类型，它的解释器是浏览器的一部分（JavaScript引擎）。它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。特点：弱语言，区分大小写，面向对象，跨平台。

（强弱语言解释：强类型语言是一种强制类型定义的语言，即一旦某一个变量被定义类型，如果不经强制转换，那么它永远就是该数据类型。弱类型语言是一种弱类型定义的语言，某一个变量被定义类型，该变量可以根据环境变化自动进行转换，不需要经过现行强制转换。

）

一、鼠标控制事件

1、<script>标签使用

语法：<script type="text/javascript"> javascript相关代码; </script>

2、鼠标事件

鼠标常用事件：

onclick	鼠标单击
ondblclick	鼠标双击
onmousedown	按下鼠标按键
onmouseup	松开鼠标按键
onmouseover	鼠标指针移动到标签上
onmouseout	鼠标从标签上移开
onmousemove	鼠标被移动
onkeydown	按下键盘按键
onkeyup	松开键盘按键
onkeypress	敲击键盘按键
onchange	用户改变域的内容
onfocus	标签获得焦点
onblur	标签失去焦点
onsubmit	提交按扭被点击
onreset	重置按扭被点击
onresize	窗口尺寸被调整
onload	页面加载完成
onunload	用户退出页面

eg： <input type="button" value="按钮" style="width:100%;height:50px" onmouseout ="hello()"/>

onmouseout ="hello()" 鼠标在按钮上方移出后执行hello函数

3、JavaScript选择器

JavaScript两大对象：1\文档对象（document）2\窗口对象（window）

（1）id选择器

功能：通过 id 找到 HTML 元素。

语法： document.getElementById("id名称");

（2）class选择器

功能：通过类名找到 HTML 元素。

语法： document.getElementsByClassName("class名称");

（3）name选择器

功能：通过查询元素的 name 属性，获取页面元素。

语法：document.getElementsByName("class名称");

（4）标签选择器

功能：通过标签名查找 HTML 元素。

语法： document.getElementsByTagName("标签");

二、操纵标签属性

1、标签属性介绍

功能：用于标签的特定显示效果。！标签属性不能混用

语法： <font 属性名="值" 属性名="值" ……></font>

2、操纵标签属性

属性名必须使用小驼峰命名规则

（1）获取标签属性值 /

功能：用于获取标签的某个属性的值。

语法： var变量 = 标签对象.属性名;

（2）设置标签属性值

功能：用于设置标签的某个属性值。

语法： 标签对象.属性名 = 值;

3、标签offset属性

offset是只读属性

功能：offsetWidth 获取标签对象的宽

offsetHeight获取标签对象的高

offsetLeft获取标签对象的宽左边距

offsetTop获取标签对象的上边距

语法：var 变量 = 标签对象.offsetWidth;

var 变量 = 标签对象.offsetHeight;

var 变量 = 标签对象.offsetLeft;

var 变量 = 标签对象.offsetTop;

4、标签内容属性

只有双标签才有具体属性

功能：innerHTML设置或获得标签内部html内容

innerText设置或获得标签内容text内容

语法：标签对象.innerHTML

标签对象.innerText

三、操纵标签样式

1、操纵标签样式

功能：用于设置标签的某个样式。

语法：标签对像.style.样式名 = 值;

2、操纵标签class属性

功能：用于设置标签的样式名。

语法：标签对像.className = 类名;

3、this关键字

功能：this 表示当前对象的一个引用。

语法：this.className = 类名;

this.style.样式名 = 值;

4、事件冒泡

功能：阻止事件冒泡。

语法：标签对象.事件名 = function(e){

e.stopPropagation();

}

四、添加、删除标签

1、创建标签

功能：创建一个标签。而通过 createElenemt()方法可以创建<a>、<img />、<p>等标签。

语法：var 变量名 = document.createElement(“标签”);

2、添加标签

功能：向父元素对象添加最后一个子元素。

语法：var 变量名 = document.createElement(“标签”);

父级元素.appendChild(变量名);

eg:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>添加、删除标签</title>

	<script type="text/javascript">
		var index = 0;
		function addElement(){
            index++;
			var obj = document.getElementById("div1");
			var descDiv = document.createElement('p');
		    obj.appendChild(descDiv);
		  
		    //p标签样式
		    var cssStr = "width:400px;height:30px;margin-bottom:10px;background-color:#FFFF99;border:1px solid black;line-height:30px;";
		    descDiv.style = cssStr;
		    descDiv.onclick = function(){
		        dell(descDiv);
	        };
		    //p标签文本
		    descDiv.innerHTML = index+' 点击删除此 p标签';
		} 
		
		function dell(p){
		    var obj = document.getElementById("div1");
		    obj.removeChild(p);
		}

/*
    1、给p标签添加点击事件

           descDiv.onclick = function()  给p标签添加点击事件

            dell(descDiv);  执行删除函数


    2、设置删除函数

        var obj = document.getElementById("div1");  获得id为div1的元素

        obj.removeChild(p);  删除指定的p标签

*/

	</script>
</head>
<body>
	<input type="button" value="添加" onclick="addElement()" />
	<div class="main" id="div1"></div>
</body>
</html>

结果：添加后

删除后

3、删除标签

功能：删除指定元素中的指定的子元素。

语法：父级元素.removeChild(子元素);

五、操纵视频

功能：视频标签对像.play() 开始播放视频。

视频标签对像.pause() 暂停当前播放的视频。

视频标签对像.currentTime 设置或返回视频中的当前播放位置（以秒计）。

视频标签对像.muted 设置或返回是否关闭声音。

语法：视频标签对像.属性名 = 值;

视频标签对像.方法名();

六、表单验证

1、获得表单

功能：document.getElementsByName("表单name"); 通过表单名称获得表单

document.getElementById("表单id"); 通过表单id获得表单

语法：var 变量名 = document.getElementsByName("表单name");

var 变量名 = document.getElementById("表单id");

2、操纵表单元素

功能：通过表单名表单元素名设置表单元素的属性

通过表单名表单元素名设置表单元素的样式

通过表单元素的Id设置表单元素的属性

通过表单元素的Id设置表单元素的样式

语法：document.表单名.表单元素名.属性名="值";

document.表单名.表单元素名.style.样式名="值";

document.getElementById("id").属性名="值";

document.getElementById("id").style.样式名="值";

3、焦点事件

功能：οnfοcus="函数名()" 当表单元素获得焦点后执行函数

οnblur="函数名()" 当表单元素失去焦点后执行函数

语法： <input type="text" id="userName" value="输入姓名" οnfοcus="函数名()" οnblur="函数名()" />

4、表单验证

eg：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
      body{
        padding:0;
        margin:0px;
        background: #198ede;
      } 
      .main{
        width:600px;
        height:600px;
        background-size:100% 100%;
      }
      #login_main{
        width: 500px;
        height: 280px;
        background: #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
        margin: 30px auto 0;
      }
      .login_main_l{
        width: 460px;
        margin: 0 auto;
      }

      .login_main_l h4 {
        color: #43465a;
        font-size: 25px;
        line-height: 25px;
        padding: 20px 0 0px 0;
      }
      .login_main_l .li_o {
        line-height: 26px;
        border-bottom: 1px solid #d9dade;
        width: 100%;
        margin-bottom: 20px;
        overflow:hidden;
      }
      .login_main_l .msg {
        float: left;
        margin-left: 10px;
        color: #f14700;
        font-size: 12px;
        width: 220px;
        overflow: hidden;
      }

      input {
        border: 0;
        display: inline-block;
        outline: none;
      }
      .clear {
        clear: both;
        line-height: 0px;
        overflow: hidden;
        zoom: 1;
        font-size: 0px;
        content: '.';
      }
      .fr {
        background:rgba(51,159,242);
        text-align:center;
        width:60px;
        height:30px;
        line-height:30px;
        color:#fff;
        border-radius:5px;
        font-size:14px;
        margin:0 auto;
        cursor:pointer;
      }
      .inp{ 
        float:left; 
        height:26px; 
        line-height:26px; 
        color:#43465a; 
        font-size:14px;
        width:220px;
      }

    </style>
    <script type="text/javascript">
      // 登录
      function login(){
        // 获取用户名
        var username = document.getElementById("user_name").value;

        // 获取密码
        var password = document.getElementById("pass_word").value;
        
        // 验证用户名
        if (username !== "admin") {
          document.getElementById("user_name_err").textContent = "用户名错误";
        } else {
          document.getElementById("user_name_err").textContent = "";
        }
        
        // 验证密码
        if (password !== "123456") {
          document.getElementById("pass_word_err").textContent = "密码错误";
        } else {
          document.getElementById("pass_word_err").textContent = "";
        }
        
        // 验证正确 -- 登录成功
        if (username === "admin" && password === "123456") {
          document.getElementById("login_main").textContent = "登录成功";
        }
      }
    </script>
  </head>
  <body>
    <div class="main">
      <div id="login_main">
        <div class="login_main_l">
          <h4>用户登录</h4>
          <div class="li_o">
            <input id="user_name" value="" type="text" class="inp" placeholder="请输入您的用户名">
            <div id="user_name_err" class="msg"></div>
          </div>
          <div class="li_o">
            <input id="pass_word" value="" type="password" class="inp" placeholder="请输入您的密码">
            <div id="pass_word_err" class="msg"></div>
          </div>
        </div>
        <div class="fr" onclick="login()">登　录</div>
      </div>
    </div>
  </body>
</html>

结果：