JAVA萌新学习day26 JavaScript
一.概念及用法
Js中的事件
-
onclick 单击时触发的事件
-
ondblclick 双击时触发的事件
-
onload 页面加载完成之后执行
<Script>
window.onload=function(){
}
</script>
-------------------------------------
<body onload="showp()">
- onselect
<input onselect="alert('别放手')" /><!-- 选中的时候触发的方法 -->
- onsubmit
表单提交的时候触发
更多的用于验证表单数据合法性 当οnsubmit="return false"的时候 表单不会被提交 return true的时候才会提交;
<form action="#" method="post" onsubmit="return checkUsername()">
用户名:<input name="username" id="uid"/><br/>
密码: <input name="password" /><br/>
<input type="submit" value="提交">
</form>
-
onfocus
获得焦点时触发的方法
-
onblur
失去焦点时触发的方法
<input onfocus="alert('客官来了')" onblur="alert('官人别走')" />
-
onchange
当下拉框的值改变的时候
选择你的心动女士:
<select onchange="alert('感谢您的选择')">
<option>凤姐</option>
<option>石榴姐</option>
<option>乔碧萝</option>
<option>杨幂</option>
</select>
-
onmousemove
鼠标移入时触发的事件
-
onmouseout
鼠标移出时触发的事件
<div onmousemove="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='skyblue'"></div>
JavaScript RegExp 对象
RegExp 对象
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。
语法
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
- pattern(模式) 描述了表达式的模式
- modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
**注意:**当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。比如,以下是等价的:
var re = new RegExp("\\w+"); var re = /\w+/;
修饰符
修饰符用于执行区分大小写和全局匹配:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
方括号
方括号用于查找某个范围内的字符:
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[^abc] | 查找任何不在方括号之间的字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
[a-z] | 查找任何从小写 a 到小写 z 的字符。 |
[A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
[A-z] | 查找任何从大写 A 到小写 z 的字符。 |
[adgk] | 查找给定集合内的任何字符。 |
[^adgk] | 查找给定集合外的任何字符。 |
(red|blue|green) | 查找任何指定的选项。 |
元字符
元字符(Metacharacter)是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
. | 查找单个字符,除了换行和行结束符。 |
\w | 匹配字母或数字或下划线 等价于 [A-Za-z0-9_] |
\W | 查找非单词字符。 |
\d | 查找数字。 |
\D | 查找非数字字符。 |
\s | 查找空白字符。 |
\S | 查找非空白字符。 |
\b | 匹配单词边界。 |
\B | 匹配非单词边界。 |
\0 | 查找 NULL 字符。 |
\n | 查找换行符。 |
\f | 查找换页符。 |
\r | 查找回车符。 |
\t | 查找制表符。 |
\v | 查找垂直制表符。 |
\xxx | 查找以八进制数 xxx 规定的字符。 |
\xdd | 查找以十六进制数 dd 规定的字符。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
n{X} | 匹配包含 X 个 n 的序列的字符串。 |
n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
n$ | 匹配任何结尾为 n 的字符串。 |
^n | 匹配任何开头为 n 的字符串。 |
?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
RegExp 对象方法
方法 | 描述 | FF | IE |
---|---|---|---|
compile | 编译正则表达式。 | 1 | 4 |
exec | 检索字符串中指定的值。返回找到的值 | 1 | 4 |
test | 检索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
支持正则表达式的 String 对象的方法
方法 | 描述 | FF | IE |
---|---|---|---|
search | 检索与正则表达式相匹配的值。 | 1 | 4 |
match | 找到一个或多个正则表达式的匹配。 | 1 | 4 |
replace | 替换与正则表达式匹配的子串。 | 1 | 4 |
split | 把字符串分割为字符串数组。 | 1 | 4 |
var reg=/^[A-Za-z_$]\w{7,15}$/; //8-15密码 不以数字开头
常用正则表达式
Email地址:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
18位身份证号:^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$
帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
Dom
全称:document object model 文档对象模型
概念:HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
获取元素的四个方法
- 根据元素id获取元素
var p=document.getElementById("pid");//跟据元素id获取元素
var str=p.innerHTML;//innertHTML 获取元素内容 包含html元素与文本
var str1=p.innerText;//获取元素内容 但是不包括Html元素 只包含文本信息
alert(str1);
-
根据类名获取元素集合
var divs=document.getElementsByClassName("dclass");//通过类名获取元素集合 for(var i=0;i<divs.length;i++){ var divContent=divs[i].innerHTML; alert(divContent); divs[i].innerHTML='a'; }
-
根据name属性获得元素集合
var inps=document.getElementsByName("sex");//通过name属性获得元素集合
for(var i=0;i<inps.length;i++){
alert(inps[i].value);
}
-
跟据标签名获得元素集合
var divs=document.getElementsByTagName("div");//通过标签名获取元素集合 for(var i=0;i<divs.length;i++){ var text=divs[i].innerText; alert(text); }
改变元素内容
var p=document.getElementById("pid");//跟据元素id获取元素
var str=p.innerHTML;//innertHTML 获取元素内容 包含html元素与文本
var str1=p.innerText;//获取元素内容 但是不包括Html元素 只包含文本信息
js操作属性
var div=document.getElementById("did");
div.setAttribute("name","dname");//设置属性
var value=div.getAttribute("name");//获取属性值
js给元素添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
document.getElementsByTagName("button")[0].onclick=function(){
alert(1);
}
}
</script>
</head>
<body>
<button >弹一下</button>
</body>
</html>
js操作属性切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeImg(){
var img=document.getElementById("imgid");
img.src="img/133.jpg";
}
</script>
</head>
<body>
<img id="imgid" src="img/122.jpg" />
<button onclick="changeImg()">出去,换一位</button>
</body>
</html>
js添加元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addEle(){//在body中添加一个元素
var div=document.createElement("div");
var body=document.getElementsByTagName("body")[0];
body.appendChild(div);
var p=document.createElement("p");
body.appendChild(p);
}
function addRow(){
var table=document.getElementById("tb");
var tr=document.createElement("tr");
var td1= document.createElement("td");
var td2= document.createElement("td");
var td3= document.createElement("td");
var td4= document.createElement("td");
td1.innerText="1002";
td2.innerText="小芳";
td3.innerHTML="17";
td4.innerHTML="女";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
}
function del(){
document.getElementsByTagName("tr")[1].remove();
}
</script>
</head>
<body>
<table border="1px" cellspacing="0" id="tb">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>1001</td>
<td>小红</td>
<td>16</td>
<td>女</td>
</tr>
</table>
<button onclick="addRow()">添加一行</button>
<button onclick="del()">删除一行</button>
<!-- <button οnclick="addEle()">添加一个div</button> -->
</body>
</html>
SetInterval() 和SetTimeout()
SetInterval(function,毫秒值)
作用:间隔 毫秒值 执行 function 循环执行
SetTimeout(function,毫秒值)
作用: 延迟毫秒值 执行方法 只执行一次
js向页面输出内容
会覆盖页面本身html元素
window.onload=function(){
document.write("<h1>我是一个H标签</h1>")
}
二.代码部分
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var str=prompt("今天早上您吃了什么?");//带有输入框的弹窗 我们可以声明变量去接受用户输入的值
alert("今天我吃了"+str);//弹窗函数
var isCold=confirm("今天冷吗?");//带有确认和取消的弹窗 用户点击确定的时候 会返回true 点取消返回false值
console.log("我是一行日志信息");//控制台打印信息
alert(isCold);
document.write("<h1 style='color: red;'>我是一个h1</h1>");//直接向页面中写入元素 注意 可能会覆盖页面本身的元素
</script>
</head>
<body>
</body>
</html>
json.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var teacher={id:1,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
var t1={id:1,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
var t2={id:2,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
var t3={id:3,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
var id=teacher.id;
var city=teacher.add.city;
var hobby=teacher.hobby[0];
var ts=[t1,t2,t3];
var ts1=[
{id:1,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]},
{id:2,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
{id:3,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
];
alert(ts[2].id);
</script>
</head>
<body>
</body>
</html>
js数据类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var i=10;
var j=10.1;
var k=true;
var s="Hello";
var teacher={id:1,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
var arr=new Array(3);//长度可变 会随着元素的添加长度变长
alert(arr.length);
arr[0]=1;
arr[1]=2;
arr[2]=3;
arr[3]=4;
var arr1=["a","b",1];
alert(arr[3]);
alert(arr.length);
</script>
</head>
<body>
</body>
</html>
js增强for循环.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var i=10;
var j=10.1;
var k=true;
var s="Hello";
var teacher={id:1,name:"田晋宇",age:18,add:{province:"山西",city:"太原"},hobby:["打游戏","读书","睡觉"]};
var arr=new Array(3);//长度可变 会随着元素的添加长度变长
alert(arr.length);
arr[0]=1;
arr[1]=2;
arr[2]=3;
arr[3]=4;
var arr1=["a","b",1];
alert(arr[3]);
alert(arr.length);
</script>
</head>
<body>
</body>
</html>
String.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var s1=new String("hello");
var s2=new String("hello");
var s3="hello";
var s4="hello";
alert(s3 instanceof String);
</script>
</head>
<body>
</body>
</html>
闭包.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function b() {
var num = 10; //没有释放 /*函数包含函数*/
function c() {
num++;
document.write(num);
document.write("<br />")
}
return c;
}
var f = b(); //f是一个函数:闭包
f();
f();
f();
</script>
</head>
<body>
</body>
</html>
函数.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* function add(i,j){
return i+j;
}
var i=add(3,4);
alert(i); */
/*匿名函数(自执行匿名函数)*/
/* (function(s){
document.write("这是一个自执行匿名函数"+s);
})("hahaha"); */
</script>
</head>
<body>
</body>
</html>
简单函数.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//alert(isNaN(b));//不是数字就是true 不看类型看值
//string 转 number
var s="10";
alert(typeof s);//string
var i=parseInt(s);
alert(i);
alert(typeof i);//number
/* typeof 的使用
var i=10;
var s="1";
var b="b";
var n=null;
var arr=[1,2,3];
var arr1=new Array(3); */
/* alert(typeof i)
alert(typeof s)
alert(typeof n);//object
alert(typeof arr);//object
alert(typeof arr1)//object */
</script>
</head>
<body>
</body>
</html>
事件.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 100px;
width: 100px;
background-color: red;
border: black solid 1px;
}
</style>
<script>
/* window.οnlοad=function(){//页面加载完执行
var str=document.getElementById("pid").innerText;
alert(str);
} */
function show(){
alert("show 了");
}
function ff1(){
console.log("log 了");
}
function lost(){
alert("你终于失去了我")
}
function indiv(e){
e.style.backgroundColor="green";
}
function outdiv(e){
e.style.backgroundColor="red";
}
function key(e){
var keynum;
if(window.event){ // IE chrome
alert("ie");
keynum = e.keyCode;
}else if(e.which){// Netscape/Firefox/Opera
alert("not ie");
keynum = e.which;
}
alert(keynum);
}
function shiftLogin(e){//keychar = String.fromCharCode(keynum) 将 按键值 转为按键字符
var keynum;
if(window.event){ // IE chrome
keynum = e.keyCode;
}else if(e.which){// Netscape/Firefox/Opera
keynum = e.which;
}
if(keynum==16){
alert("你按了shift");
document.getElementById("inp").click();
}
}
</script>
</head>
<body>
<button onclick="show()">点我</button><br/>
<select onchange="show()">
<option>橘子</option>
<option>香蕉</option>
<option>苹果</option>
<option>猕猴桃</option>
</select>
<div onmouseover="indiv(this)" onmouseout="outdiv(this)"></div>
<input onkeydown="key(event)" />
<hr/>
<fieldset style="width: 200px;">
<form action="#" method="post">
<label>账号:<input name="" /></label><Br/>
<label>密码:<input name="" onkeydown="shiftLogin(event)" /></label><Br/>
<input type="submit" value="登陆" id="inp" />
</form>
</fieldset>
<hr/>
<p id="pid">我是p标签</p>
<hr/>
<input onfocus="ff1()" onblur="lost()"/>
</body>
</html>
外部引入.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/my.js"></script>
<script>
/* i:for (int i=0;i<100;i++) {
for (int i=0;i<100;i++) {
break i;
}
} */
</script>
</head>
<body>
<button onclick="alert('我是一个元素内部的js')">点我</button>
</body>
</html>
正则表达式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function checkUser(){
var user=document.getElementById("user").value;//用户输入的值
var reg=new RegExp("^[A-Z]\\w{7,14}$");//创建一个正则表达式对象 必须是大写字母开头 8,15 \w 表示数字字母下划线
var isOk=reg.test(user);
if(isOk){
alert("对")
}else{
}
}
</script>
</head>
<body>
<fieldset style="width: 200px;">
<form action="#" method="get">
账号:<input id="user" onblur="checkUser()" /><br/>
密码:<input id="pwd" /><br/>
Email:<input id="email" /><br/>
电话:<input id="tel" /><br/>
<input type="submit" value="提交" />
</form>
</fieldset>
</body>
</html>
正则表达式入门.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* var reg=new RegExp("[123abc]","i") 忽略大小写匹配*/
//var reg=new RegExp("[^123abc]") 除了123abc的字符
/* var reg=new RegExp("[0-9]") 数字
var isOk=reg.test("0.1") */
/* var reg=new RegExp("(abc|aaa|bbb)") 从小括号中选一个整体 或的关系 匹配字符只要有部分满足即可*/
/* var reg=new RegExp("天.门") */
/* var reg=/ob/;
var isOk=reg.test("A gobat grunted");
alert(isOk); */
// var isOk=reg.test("天门");
// alert(isOk);
/* var reg=/e+le?/;
var isOk=reg.test("le");
alert(isOk); */
/* var reg=/[0-9]{5,8}/;
var isOk=reg.exec("123456123123123");
alert(isOk); */
/* ......................String对正则表达式的支持 */
/* var str="http://localhost:8080/UserSys/select?id=1";
var id=str.split("=")[1];
alert(id) */
/* var str="www1baidu1co111111m";
var arr=str.split(/[0-9]/)
alert(arr); */
var str="www.baidu.com";
var s=str.replace("w","a")
alert(s);
</script>
</head>
<body>
</body>
</html>