【JavaScript】js02
正则对象。
声明：
//var reg = new RegExp('', '');// i,g 修正符。
// i，不区分大小写，g 全局匹配。
//var reg = /\w/i;
方法：
//exec(); 如果匹配到，返回结果，如果匹配不到，返回 null
//test(); 如果匹配到，返回 true，如果匹配不到，返回 false
元字符。
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符。// 字母数字下划线。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字。
\s 查找空白符。
\S 查找非空白符。
量词
+ 至少有一个。
* 0个或者多个。
? 0个或者一个。
{m,} 至少 m 个。
{m,n} m - n个。
{m} m 个。
^ 以什么 开头。
$ 以什么 结尾。
注意： js 对象大致分类。
内置对象。
自定义对象。new Object(); {}
DOM对象。
三，事件。
定义：就是浏览器（文档）里发生一件事。
准备知识。
网页元素的默认行为。
事件的三要素。
事件源，
事件类型，
事件处理程序，
<div id="did" style="width: 200px;height: 200px;background: #f00;"></div>
<script type="text/javascript">
// 1. 获取 did
var did = document.getElementById('did');// did 就是事件源。
// 2. 添加事件。
// onclick 就是事件类型。
did.onclick = function(e)// 事件处理程序。
{
// console.log(e);
var x = e.clientX;
var y = e.clientY;
console.log(x + ':' + y);// 获取鼠标距离窗口的坐标。
var _x = e.pageX;
var _y = e.pageY;
console.log(_x + ':' + _y);// 获取鼠标距离文档的坐标。
did.innerHTML = x + ':' + y + "-----" + _x + ':' + _y;
did.style.textAlign = 'center';
did.style.lineHeight = '200px';
did.style.backgroundColor = 'yellow';
}
</script>
事件对象。
事件对象并不是必须的。根据需求，如果需要，就写上。
事件对象，是系统自动封装好的。不同的事件类型有不同的事件对象。
// 获取鼠标距离窗口的坐标
//e.clientX;
e.clientY;
// 获取鼠标距离文档的坐标。
//e.pageX;
//e.pageY;
绑定事件。
//onclick="alert(111)"; 事件属性绑定。DOM 0 级。
<div id="did" onclick="alert('111');" style="width:200px;background: #f00;height: 200px;"></div>
//did.onclick = function(){}// 匿名函数绑定。重复添加相同事件时，会覆盖。
获取元素。
var did = document.getElementById('did');
// 绑定事件。
did.onclick = function()
{
alert('222');
}
//did.addEventListener// 添加事件监听，可叠加多个相同事件。attachEvent()// 早期IE DOM 2 级。
//addEventListener 添加事件监听。
var did = document.getElementById('did'); did.addEventListener('click', function(){
alert('333');
}); did.addEventListener('click', function(){
alert('333----2');
});
各种事件。
文档事件。
onload，当文档加载完成之后，执行（即事件源可以放在事件处理程序之后）。
<script type="text/javascript">
// window 对象。
window.onload = function()
{
// 1. 获取元素。
var did = document.getElementById('did');
// 2. 绑定事件。
did.onclick = function()
{
did.style.backgroundColor = '#0f0';
}
}
</script>
<div id="did" style="width: 200px;height: 200px;background: #f0f;"></div>
onunload，文档卸载事件。// 兼容性有问题。
onbeforeunload，文档卸载事件。// 兼容性有问题。
鼠标事件。
onclick，单击。
ondblclick，双击
onmouseover，鼠标移入
onmouseout，鼠标移出
onmousemove，鼠标移动
onmousedown，鼠标按下
onmouseup，鼠标抬起
oncontextmenu，右键
例子：鼠标拖动div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 鼠标拖动 div</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
</style>
</head>
<body> <div id="did" style="width: 200px;height: 200px;background: #ccc;position: absolute;"></div> <script type="text/javascript"> // 声明全局变量。
var _x = 0;
var _y = 0; // 控制是否按下。
var isDown = false; // 获取元素。
var did = document.getElementById('did');
// 添加事件。
did.onmousedown = function(e)
{ // 设置 为 true
isDown = true;
this.style.background = "#f00";
this.style.cursor = 'move'; // 获取鼠标的坐标。
var mx = e.pageX;
var my = e.pageY;
// console.log(mx + '----' + my); // 获取 div 的依稀量。
var dx = did.offsetLeft;
var dy = did.offsetTop;
// console.log(dx + '----' + dy); _x = mx - dx;
_y = my - dy;
} window.onmousemove = function(e)
{
if(!isDown)
{
return ;
} // 不停 地获取鼠标的 坐标。
var mmx = e.pageX;
var mmy = e.pageY; // 计算div 新的位置。
var newX = mmx - _x;
var newY = mmy - _y; // 设置 div 的位置。
did.style.left = newX + 'px';
did.style.top = newY + 'px'; } did.onmouseup = function()
{
isDown = false;
this.style.background = '#ccc';
this.style.cursor = 'default'; } </script> </body>
</html>
键盘事件
onkeydown，keyCode ，表示你按下的是哪一个键。
onkeypress
onkeyup
例子：键盘移动div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 键盘 移动</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
} #con
{
width: 500px;
height: 400px;
background: #ccc;
margin: 0 auto;
}
#did
{
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body> <div id="con">
<div id="did"></div>
</div> <script type="text/javascript"> //获取元素。
var did=document.getElementById('did');
var con=document.getElementById('con'); //获取con的left,top
var conLeft=con.offsetLeft;
var conTop=con.offsetTop; //获取con的宽度、高度
var conWidth=con.offsetWidth;
var conHeight=con.offsetHeight; //获取did的宽度、高度
var didWidth=did.offsetWidth;
var didHeight=did.offsetHeight; //步进速度
var step=2; //定义判断是否有计时器存在的变量
var inte=null; //添加事件
window.onkeydown=function(e){ //获取代码。
var keyCode=e.keyCode;
switch(keyCode) {
case 37:
moveLeft();
break;
case 38:
moveUp();
break;
case 39:
moveRight();
break;
case 40:
moveDown();
break;
} } function moveLeft(){ //判断当前是否有定时器存在
if (inte!=null) {
return;
} inte=setInterval(function(){ //获取原来的left
var oldLeft=did.offsetLeft; //计算现在的left
var newLeft=oldLeft-step; var minLeft=conLeft; //判断边界
if (newLeft<minLeft) {
newLeft=minLeft;
} //设置
did.style.left=newLeft+'px'; },1); } function moveRight(){ if (inte!=null) {
return;
} inte=setInterval(function(){ //获取原来的left
var oldLeft=did.offsetLeft; //计算。
var newLeft=oldLeft+step; //最大边界
var maxLeft=conLeft+conWidth-didWidth; //判断
if (newLeft>maxLeft) {
newLeft=maxLeft;
} //设置
did.style.left=newLeft+'px'; },1) } function moveDown(){ if (inte!=null) {
return;
} inte=setInterval(function(){ //获取原来的top
var oldTop=did.offsetTop; //计算。
var newTop=oldTop+step; //最大边界
var maxTop=conTop+conHeight-didHeight; //判断
if (newTop>maxTop) {
newTop=maxTop;
} //设置
did.style.top=newTop+'px'; },1) } function moveUp(){ //判断当前是否有定时器存在
if (inte!=null) {
return;
} inte=setInterval(function(){ //获取原来的top
var oldTop=did.offsetTop; //计算现在的top
var newTop=oldTop-step; var minTop=conTop; //判断边界
if (newTop<minTop) {
newTop=minTop;
} //设置
did.style.top=newTop+'px'; },1); } //键盘抬起事件。
window.onkeyup=function(){ //清除定时器
clearInterval(inte);
inte=null; } </script> </body>
</html>
表单事件。
onfoucs，获取焦点事件。
onblur，失去焦点事件。
例子：移入移出正则验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 表单事件 onfocus onblur</title>
<style type="text/css">
#inp
{
height: 30px;
border:1px solid #ccc;
font-size: 14px;
line-height: 30px;
padding-left:10px;
}
</style>
</head>
<body> <input id="inp" type="text" name="username" value=""> <script type="text/javascript"> //获取元素
var inp=document.getElementById('inp'); //获取焦点。
inp.onfocus=function(){ // alert('111'); this.style.border='1px solid blue'; } inp.onblur=function(){ //获取当前字符串
var value=this.value; //声明正则。
var reg=/^\w{6,18}$/; //验证。
var res=reg.test(value); if (res) {
this.style.border='1px solid green';
}else{
this.style.border='1px solid red';
} } </script> </body>
</html>
onsubmit，表单提交事件。
onreset，表单重置事件。
例子：表单正则验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 表单提交和重置 事件onsubmit onreset</title>
<style type="text/css">
#inp
{
height: 30px;
border:1px solid #ccc;
font-size: 14px;
line-height: 30px;
padding-left:10px;
}
</style>
</head>
<body> <form id="myform" accept="">
<input type="text" name="username" id="inp"><br> <input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</form> <script type="text/javascript"> //获取元素。
var myform=document.getElementById('myform');
var inp=document.getElementById('inp'); //添加提交事件。
myform.onsubmit=function(){ //获取当前字符串
var value=inp.value; //声明正则
var reg=/^\w{6,18}$/; //验证。
var res=reg.test(value); if (res) {
inp.style.border='1px solid green';
}else{
inp.style.border='1px solid red';
return false;
} } //添加重置事件
myform.onreset=function(){ // return false;
//confirm 确认框
var res=confirm('是否要重置？'); if (!res) {
return false;
} } </script> </body>
</html>
onchange，下拉框事件。// 城市联动。
例子：城市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 城市联动</title>
</head>
<body> <select id="p"> </select> <select id="c"> </select> <script type="text/javascript"> // 获取元素。
var p = document.getElementById('p');
var c = document.getElementById('c'); // 创建省市关系。
var pro = ['北京', '河北', '河南', '山东', '山西'];
var city = [];
city[0] = ['昌平', '朝阳', '海淀', '东城'];
city[1] = ['石家庄', '保定', '唐山', '廊坊'];
city[2] = ['郑州', '驻马店', '洛阳', '漯河' ];
city[3] = ['青岛', '烟台', '济南', '德州'];
city[4] = ['太原', '长治', '运城', '吕梁']; // 写业务。
var pstr = '';
for(var i = 0; i < pro.length; i ++)
{
pstr += "<option value="+ i +">"+ pro[i] +"</option>";
} p.innerHTML = pstr; // 添加事件。
p.onchange = function()
{
init();
} init(); // 封装函数。
function init()
{
var cstr = '';
// 获取当前省份的下标。
var value = p.value; for(var j = 0; j < city[value].length; j ++)
{ cstr += "<option value="+ j +">"+ city[value][j] +"</option>";
} c.innerHTML = cstr;
} </script>
</body>
</html>
onselect，文本选中事件。
oninput，正在输入事件。
图片事件。
onerror，图片加载失败事件。
窗口事件。
onresize
滚动事件。
onscroll
获取多个元素。 document.getElementsByTagName();
循环内部，要找到当前对象，使用 this。
事件的冒泡。（如两个div相套时，点击上方的小div时会先触发小div的事件再触发大div的事件）
// 阻止事件冒泡。
e.stopPropagation();
例子：阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 冒泡。</title>
<style type="text/css"> #d1
{
width: 300px;
height: 300px;
background: #f00;
position: relative;
} #d2
{
position: absolute;
left:100px;
top:100px;
width: 100px;
height: 100px;
background: yellow;
} </style>
</head>
<body> <div id="d1">
<div id="d2"></div>
</div> <script type="text/javascript"> // 获取元素。
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2'); d1.onclick = function(e)
{
alert('d1');
} d2.onclick = function(e)
{
// 阻止事件冒泡。
e.stopPropagation();
alert('d2');
} </script>
</body>
</html>
获取计算后的样式。
var style = getComputedStyle(对象);
style.width;
style.background;
全选，反选，全不选。
三，DOM，文档对象模型。document Object Model。
在学习 HTML 的阶段，我们认为 html 中的所有内容都叫元素。
在学习 js 阶段，我们把html 中的所有内容都叫 节点。
节点类型。
元素节点
属性节点
文本节点
注释节点
文档节点
节点关系。
childNodes
children
firstChild
firstElementChild
lastChild
lastElementChild
previousSibling
previousElementSibling
nextSibling
nextElementSibling
parentNode
parentElement
通用方法。
document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName
节点操作。
document.createElement('img');
did.appendChild(img);
did.insertBefore(img, childNode);
did.setAttribute('src', './images/1.jpg');
did.getAttribute('src');
did.replaceChild()
did.removeChild()
document.createAttribute();
document.createTextNode();
img.clone();
img.clone(true);
【JavaScript】js02的更多相关文章
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload
有时候.在JavaScript中.即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就開始想document是否写错之类的.事实上根本就不是你的代码的大 ...
- 【JavaScript】我的JavaScript技术总结第一篇——编程细节
遍历数组 for (var i=0, l=arr.length; i<l; i++) 这样写的一个好处就是让每次循环少一步获取数组对象长度的操作,数组长度越长,价值越明显. 判断变量的真假 if ...
- 【JavaScript】下大雪
引用[JavaScript]满天星的代码,稍作修改的结果: function drawStars() { for (i = 1; i < 100; ++i) { ctx.fillText(&qu ...
- 【JavaScript】JavaScript中的replaceAll
JavaScript中是没有replaceAll的.仅仅有replace,replace仅仅能替换字符中的第一个字符.并且这个replace里面不支持正則表達式,以达到replaceAll的目的. 只 ...
- 【JavaScript】Leetcode每日一题-在D天内送包裹的能力
[JavaScript]Leetcode每日一题-在D天内送包裹的能力 [题目描述] 传送带上的包裹必须在 D 天内从一个港口运送到另一个港口. 传送带上的第 i 个包裹的重量为 weights[i] ...
- 【JavaScript】Leetcode每日一题-青蛙过河
[JavaScript]Leetcode每日一题-青蛙过河 [题目描述] 一只青蛙想要过河. 假定河流被等分为若干个单元格,并且在每一个单元格内都有可能放有一块石子(也有可能没有). 青蛙可以跳上石子 ...
- 【JavaScript】Leetcode每日一题-平方数之和
[JavaScript]Leetcode每日一题-平方数之和 [题目描述] 给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a2 + b2 = c . 示例1: 输入:c = 5 ...
- 【JavaScript】Leetcode每日一题-二叉搜索树的范围和
[JavaScript]Leetcode每日一题-二叉搜索树的范围和 [题目描述] 给定二叉搜索树的根结点 root,返回值位于范围 [low, high] 之间的所有结点的值的和. 示例1: 输入: ...
随机推荐
- Learn Regex The Easy Way
GitHub上的正则表达式在线学习Learn Regex The Easy Way,可以帮助初学者快速入门 该项目已汉化,可在线练习 地址:https://github.com/ziishaned/l ...
- spring boot 学习笔记（一）
学习链接:http://www.cnblogs.com/ityouknow/category/914493.html 定义 spring boot 是由pivotal 团队提供的权限框架,设计目的是用 ...
- Head First设计模式——中介者模式和备忘录模式
中介者 中介者模式:使用中介者来集中相关对象之间复杂的沟通方式和控制方式. Bob有一个自动屋,当他的闹钟响了只有,闹钟会告诉咖啡壶开始煮咖啡.后来客户不断的提出许多新需求:周末不要提供咖啡.下班后需 ...
- Vue 学习记录（一）
Vue 研究了一段时间,要学的东西挺多的. 一.基本指令 1.v-text:2.v-html:3.v-pre;4.v-cloak:5.v-once:6.v-if:7.v-else:8.v-else-i ...
- 使用Servlet和JSp在浏览器上实现对数据库表的增删改查（新手）
第一步:用户输入网址进入一个登陆界面. 里面要有账号密码输入. 登陆界面链接到登陆的Servlet类中. Servlet类 --> 1.接收参数(账户密码) 2.调用DAO层的 SQL语句 验 ...
- Fiddler2 下断点修改HTTP报文
一 Fiddler中设置断点修改HTTP请求 方法1:全局断点.Rules-->Automatic BreakPoint-->Before Requests(或快捷键F11),这种方法会拦 ...
- 「建议心心」要就来15道多线程面试题一次爽到底(1.1w字用心整理)
. 本文是给**「建议收藏」200MB大厂面试文档,整理总结2020年最强面试题库「CoreJava篇」**写的答案,所有相关文章已经收录在码云仓库:https://gitee.com/bingqil ...
- python-pathlib
2019-12-12 04:27:17 我们知道在不同的操作系统中文件路径的组成方式是不同的,因此在python中关于路径的问题以往我们通常采用os.path.join来进行路径的字符串级别的串联,通 ...
- 从源码和doc揭秘——Java中的Char究竟几个字节，Java与Unicode的关系
#编码与字符编码 (懂编码的建议直接跳过) 在计算机世界中,任何事物都是用二进制图片数字表示的,图片可以编码为JPG,PNG格式的字节流,音频,视频有MP3,MP4格式的字节流.这些JPG,MP3等都 ...
- eNSP之VLAN设计实验
0.实验目的 1.掌握基于IP地址的VLAN划分: 2.掌握基于交换机端口VLAN划分: 3.通过网关实现不同VLAN间的通讯; 1.实验环境 环境:eNSP模拟器 版本信息:1.3.00.100 V ...