javaWeb-JavaScript

维他柠檬茶阿i

已于 2022-02-13 01:44:33 修改

阅读量380

点赞数

分类专栏： JavaWeb 文章标签： javascript 前端开发语言

于 2022-02-13 01:41:57 首次发布

本文链接：https://blog.csdn.net/weixin_42431775/article/details/122901617

版权

JavaWeb 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

前言

提示：这里可以添加本文要记录的大概内容：

一、JavaScript的引用

1.在head标签内在线编写

<script type="text/javascript">
	...
</script>

2.在head标签内外部引入

<script type="text/javascript" src="xxx.js"></script>

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、JavaScript的变量

1.变量类型

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

2.JavaScript的特殊值

undefined：未定义，是js变量未初始化的默认值
null：空值
NAN：表示非数字

3.js定义变量

var variableName;
var variableName = value;

三、JavaScript的数组

1.定义

var arrayName = [];
var arrayName = [1, 'a', "abc", true];

<!--自动扩容-->
arrayName[0] = 12;
arrayName[2] = "abc";

alter(arrayName);

2.特殊点

数组内可多种类型，可以定义空数组再通过索引下标进行自动扩容

四、函数

JavaScript的函数不允许重载，一旦重名则按照html访问代码的先后顺序覆盖

<!--形式一-->
function functionName(a, b){
	return c;	//a、b为形参不需要指定类型，c为一个具体的变量类型
}
<!--形式二-->
var functionName = function(a, b){
	...
}

五、JavaScript的自定义对象

1.Object形式的自定义对象

特点：可以直接调用Object类型的属性和方法

var obj = new Object();
obj.name = "lemon";
obj.age = 18;
obj.fun = function(){
    alert(this.name + "：" + this.age)
}
obj.fun()

2.{}形式

var obj = {
	name : "lemon";
	age : 18;
	fun : function(){
		alert(this.name + "：" + this.age)
	}
}
obj.fun()

六、JavaScript的事件

1.常用事件

加载完成事件onload
在页面加载完成之后执行，常用于页面js初始化

<body onload="onloadFun();">
	...
</body>
<script type="text/html">
	//静态写法
	function onloadFun(){
		alert('静态注册onload事件，所有代码');
	}

	//动态写法
	window.onload = function () {
		alert('动态注册onload事件，所有代码');
	}
</script>

单击事件onclick
常用于按钮响应的操作

<body>
	<button onclick="onclickFun();">按钮1</button>
	<button id="btn2">按钮2</button>
</body>
<script type="text/html">
	//静态写法
	function onclickFun(){
		alert('静态注册onclick事件，所有代码');
	}

	//动态写法
	window.onload = function () {
		var btn2Obj = document.getElementById("bt2");
		btn2Obj.onclick = function(){
		    alert("动态注册onclick事件，所有代码");
		}
	}
</script>

失去焦点事件onblur
常用于输入框失去焦点的操作、鼠标悬停后移动的操作

<body>
	<form>
        <label>用户名：</label>
        <input type="text" id="username" onblur="onblurFun()">
        <br/>

        <label>邮箱：</label>
        <input type="email" id="mail">
        <br/>
    </form>
</body>
<script type="text/html">
	//静态写法
	function onblurFun(){
        alert('静态注册onblur事件，所有代码');
    }

	//动态写法
	window.onload = function () {
		var mailObj = document.getElementById("mail");
        mailObj.onblur = function () {
            alert('动态注册onblur事件，所有代码');
        }
	}
</script>

内容发生改变事件onchange
常用于下拉列表和输入框内容变化后的操作

<body>
	<select id="select-01" onchange="onchangeFun()">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
	</select>
</body>
<script type="text/html">
	//静态写法
	function onchangeFun(){
         alert('静态注册onchange事件，所有代码');
     }

	//动态写法
	window.onload = function () {
        var selectObj = document.getElementById("select-01");
        selectObj.onchange = function () {
            alert('动态注册onchange事件，所有代码');
        }
    }
</script>

表单提交事件onsubmit
常用于表单提交前，验证表单项内容是否合法

<body>
	<form action="http://localhost:8080" method="post" onsubmit="return onsubmitFun()" id="form-01">
        <label>用户名：</label>
        <input type="text" id="username">
        <br/>

        <label>密码：</label>
        <input type="password" id="password">
        <br/>

        <input type="submit" value="提交">
    </form>
</body>
<script type="text/html">
	//静态写法
	function onsubmitFun(){
         alert('静态注册onsubmit事件，所有代码');

         //如果发现表单内容不合法，则需要阻止表单提交(return false即可)
         return false;
     }

	//动态写法
	window.onload = function () {
        var formObj = document.getElementById("form-01");
        formObj.onsubmit = function () {
            alert('动态注册onsubmit事件，所有代码');

            //如果发现表单内容不合法，则需要阻止表单提交(return false即可)
            return false;
        }
    }
</script>

2.事件的注册(绑定)

事件要想有响应，必须要先注册事件(如上例)

静态注册事件
通过html标签的事件直接赋予事件的响应代码

动态注册事件
通过js代码得到标签的dom对象，再通过dom对象.事件=function(){…}的形式

七、DOM模型

全称：文档对象模型(document object model)
即把html页面中的标签、属性、文本转化为对象来管理
在这里插入图片描述

1.获取标签id

document.getElementById，因为id属性唯一，所以仅返回一个元素。例子：验证用户名是否合法

常用正则表达式
Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL：[a-zA-z]+://[^\s] 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$
手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
身份证号(15位、18位数字)：^\d{15}|\d{18}$
短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
帐号是否合法(字母开头，允许5-16个字符，允许字母数字下划线)：^ [a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^ [a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$

<body>
    <form action="http://localhost:8080" method="post" id="form-01">
        <label>用户名：</label>
        <input type="text" id="username" placeholder="请输入长度为3-12的用户名">
        <span id="username-span"></span>
        <br/>
        
        <button id="btn-check" onclick="onclickFun()">验证</button>
        <input type="submit" value="提交">
    </form>
</body>
<script>
	function onclickFun() {
		//获得标签元素
		var usernameObj = document.getElementById("username");
		var usernameSpanObj = document.getElementById("username-span");
		//获得标签元素内容
		var userText = usernameObj.value;
		//进行标签元素内容的合法性验证(正则表达式)
		var pattern = /^\w{3,12}$/;
		if (pattern.test(userText)){
		    alert("用户名合法");
		    //innerHTML表示：获取userText的内容，并插入该dom标签对象中
		    usernameSpanObj.innerHTML = userText;
		}
		else
		    alert("用户名不合法，请重新输入")

}
 </script>

2.获取指定名称名

document.getElementByName，根据name属性来查，返回一个集合

<body>
	兴趣爱好:
	<input type="checkbox" name="hobby" value="cpp">C++
	<input type="checkbox" name="hobby" value="java">Java
	<input type="checkbox" name="hobby" value= "js" >JavaScript
	<br/>
	<button onclick="checkAll()">全选</button>
	<button onclick="checkNo()">全不选 </button>
	<button onclick="checkReverse()">反选</button>
</body>
<script type="text/ javascript">
    //全选
    function checkAll() {
        var hobbyAll = document.getElementsByName("hobby");
        for (var i = 0; i < hobbyAll.length; i++)
            hobbyAll[i].checked = true;
    }
    //全不选
    function checkNo() {
        var hobbyNo = document.getElementsByName("hobby");
        for (var i = 0; i < hobbyNo.length; i++)
            hobbyNo[i].checked = false;
    }
    //反选
    function checkReverse() {
        var hobbyReverse = document.getElementsByName("hobby");
        for (var i = 0; i < hobbyReverse.length; i++){
            if (hobbyReverse[i].checked)
                hobbyReverse[i].checked = false;
            else
                hobbyReverse[i].checked = true;
        }
    }
</script>

3.获取标签名

document.getElementByTagName，根据标签名来查，返回一个集合

<body>
	兴趣爱好:
	<input type="checkbox" name="hobby" value="cpp">C++
	<input type="checkbox" name="hobby" value="java">Java
	<input type="checkbox" name="hobby" value= "js" >JavaScript
	<br/>
	<button onclick="checkAll()">全选</button>
</body>
<script type="text/ javascript">
    function checkAll() {
        var hobbyAll = document.getElementsByTagName("input");
        for (var i = 0; i < hobbyAll.length; i++)
            hobbyAll[i].checked = true;
    }
</script>

八、节点

即标签对象

1.常用属性

用对象名+.来调用属性，如：
alter(document.getElementById(“mail”).innerHTML);

当前节点的所有子节点：childNodes
当前节点的第一个子节点：firstChild
当前节点的最后一个子节点：lastChild
当前节点的父节点：parentNode
当前节点的下一个节点：nextSibling
class属性值：className
innerHTML：获取/设置标签中的内容
innerText：获取/设置标签中的文本

2.常用方法

获取当前指定标签名的孩子节点：getElementsByTagName()
添加一个孩子节：appendChild()

<body>

</body>
<script type="text/ javascript">
    window.onload = function(){
		var divObj = document.createElemt("div");
		divObj.innerHTML = "hello world";
		document.body.appendChild(divObj);
	}
</script>

维他柠檬茶阿i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb-JavaScript

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档JavaScript前言一、JavaScript的引用1.在head标签内在线编写2.在head标签内外部引入二、JavaScript的变量1.变量类型2.JavaScript的特殊值3.js定义变量三、JavaScript的数组1.定义2.特殊点四、函数五、JavaScript的自定义对象1.Object形式的自定义对象2.{}形式六、JavaScript的事件1.常用事件2.事件的注册(绑定)七、DOM模型1.获取标签id2.获取指定名
复制链接

扫一扫