【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"/>




目录
相关文章
|
30天前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
2月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
90 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
70 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
83 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
174 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
106 1
|
6月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
99 0
|
6月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
237 4
|
6月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
217 2
|
6月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
78 0