【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 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
49 5
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
86 2
前端JS读取文件内容并展示到页面上
|
1月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
|
1月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
|
2月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
31 1
|
1月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
60 0
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
1月前
|
存储 JSON JavaScript
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
|
2月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
2月前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中