JavaScript
前言
提示:这里可以添加本文要记录的大概内容:
一、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>