【JavaScript】页面捕捉和正则表示

简介: ​目录捕捉键盘回车事件 void运算符控制语句js中创建数组 DOM编程获取value

js中的innerHTML和innerText属性

正则表达式

捕捉键盘回车事件

//②界面捕捉id为username的元素中发生键盘敲下事件是调用这个函数
 document.getElementById("username").onkeydown=function(event){
   //③当键盘敲下事件的keyCode为13时执行
    if(event.keyCode==13){
     alert("正在验证登录...");
   }
 }

}


当敲下回车键可以弹出:

 void运算符

//void(0)括号中的数字任意,不能不写数字
保留</ a>

点击文字显示的弹窗效果: 

控制语句
1、if

2、while

3、switch

4、do...while...

5、for

6、break

7、continue

8、for  in(了解)

9、with(了解)

1-7和java类似,就不多赘述了。

js中创建数组
var 数组名=[数据....]
var arr=[1,2,true,"abc","3.14" ];//什么类型都可以接受
遍历数组

for(var i=0;i<arr.length;i++){
alert(arr[i]);//i表示的是下标
}
for  in 遍历

for(var i in arr){
alert(arr[i]);
}
//for..in语句可以遍历对象的属性
User =function(username,password){
this.username =username; this.password =password;}
var u=new User("张三","444");
alert(u.username +""+u.password);
alert(u["username"]+","+u["password"]);
for(var SXM in u){
//alert(SXM)
//alert(typeof shuXingMing)
//SXM是一个字符串
alert(u[shuXingMing]);}
with的用法:

在访问类的对象时:

alert(u.username);
alert(u.password);
 用with

with(u){
alert(username+password);
}
 DOM编程获取value
JavaScript包括三大块:
           ECMAScript:JS的核心语法(ES规范/ECMA-262标准)
           DOM:document Object Model(文档对象模型:对网页当中的节点进行增删改的过                                       程。)HTML文档被当做一棵DOM树来看待       

    DOM编程的代表: var domObj=document.getElementById("id");

BOM:Browser Object Model(测览器对象模型)
关闭浏览器窗口、打开一个新的浏览器窗口、后退。前进、浏览器地址栏上的地址等,都是BOM编程。

BOM和DOM的区别和联系?
DOM的顶级对象是document

BOM的顶级对象是window

BOM包含DOM

在document之前有window省略了

点击按钮得到文本框中的值

//点击按钮得到文本框中的值

 var useValue =document.getElementById("user1").value;
alert(useValue);

}
}



 拿到value的值。

按回车把文本框1内容复制到文本框2

<script type="text/javascript">
  window.onload=function(){
  document.getElementById("user1").onkeydown=function(event){
    if(event.keyCode==13){//回车事件
   
   document.getElementById("user2").value=document.getElementById("user1").value;
  }}
}
</script>  
<input type="txt" id="user1"/ >
<input type="txt" id="user2"/>

 失去焦点后执行这段
//this代表的是当前文本框对象

js中的innerHTML和innerText属性

 

在head中:

<!DOCTYPE html>

   <title>javascript测试</title>

 #div1{
    background-color: aquamarine; 
    width:300px; 
    height:300px;
    border: 1px black solid;  //边框为黑色实线
    position: absolute;   //绝对定位
    top:100px; //距离顶部
    left:100px;
 }
    </style>
      
  </head>
  <body>
 

<div id="div1"></div>

在body中:

    <script type="text/javascript">
        window.onload =function(){
        var btn =document.getElementById("btn");
         btn.onclick=function(){
           //设置div的内容
            //第一步:获取div对象
        var divElt =document.getElementById("div1");
        //第二步:使用innerHTML属性来设置元素内部的内容
          divElt.innerHTML ="<font color='red'>用户名不能为空!</font>"; 
         // divElt.innerText="<font color='red'>用户名不能为空!</font>";
          }
       }
        </script>

<div id="div1"></div>

运行结果:

 innerText和innerHTML属性有什么区别?
 
相同点:都是设置元素内部的内容。

不同点:
innerHTML:会把后面的“字符串”当做一段HTML代码解释并执行。
innerText:即使后面是一段HTML代码,也只是将其当做普通的字符串来看待。

正则表达式
1、什么是正则表达式,有什么用?

 常见的的正则表达式符号
①:

②: 

③: 

正则表达式当中的小括号()优先级较高。

「1-9]表示1到9的任意1个数字(次数是1次)

[A-Za-z0-9]表示A-Za-z0-9中的任意1个字符

[A-Za-z0-9-]表示A-Z、a-z、0-9、-,以上所有字符中的任意1个字符。 

一些正则表达式:

QQ号的正则:^[1-9] [0-9] { 4,}$

邮箱的正则:

^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
 7、怎么创建正则表达式对象,怎么调用正则表达式对象的方法?

正则表达式的test()方法?

true:字符串格式匹配成功
false:字符串格式匹配失败

  window.onload = function(){
 //给按钮绑定click
  document.getElementById("btn").onclick =function(){
  var email =document.getElementById("email").value;
  var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
   var ok = emailRegExp.test(email);
   if(ok){
    //合法
    document.getElementById("emailError").innerText="邮箱地址合法"
   }
   else{
    // 不合法
     document.getElementById("emailError").innerText="邮箱地址不合法"
    }
  }
   //给文本框绑定focus,当再次点击时后取消提示
  document.getElementById("email").onfocus=function(){
    document.getElementById("emailError").innerText="";
  }
  
}
  </script>
  <input type="text" id="email" />
  <span id="emailError" style="color: red; font-size:12px;"></span><br>
  <input type="button" value="验证邮箱"id="btn"/>




目录
相关文章
|
3天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
21 0
|
3天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
16 0
springboot从控制器请求至页面时js失效的解决方法
|
3天前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
3天前
|
JavaScript
如何使用JS控制指定页面大小开启全屏和退出全屏
如何使用JS控制指定页面大小开启全屏和退出全屏
27 0
|
3天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
17 0
|
3天前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
35 0
|
1天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
1天前
|
JavaScript 前端开发
JS中正则方法的使用 - 蓝易云
以上就是JavaScript中正则方法的基本使用。这些方法可以用于执行复杂的字符串处理和验证任务。
13 1
|
3天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
10 1
|
3天前
|
JavaScript UED
js得禁止页面滚动
js得禁止页面滚动
13 1