开发者社区> 执久呀> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Baffle.js – 用于实现文本模糊效果的 JavaScript 库
  Baffle.js 是一个 JavaScript 库,设计用来模糊和揭开DOM元素的文本。 这些元素可以是一个 CSS 选择器的形式、一个节点列表或者一个单节点。 你也可以传递一个选择对象给插件。       在线演示      立即下载   您可能感兴趣的相关文章 网站...
1245 0
JavaScript正则表达式快速判断技巧
原文:JavaScript正则表达式快速判断技巧   这里是JS的正则的一点心得,并不是最完整的规则汇总,更侧重实际运用中的快速判断,初学者接触正则之后往往会被一堆星号括号给弄晕,有了一些速判技巧就能从整体上把握从而不慌乱。
778 0
收藏的一些javascript片段
原文:收藏的一些javascript片段 学习js也很有一段时间,收集了一些js的片段。特地整理排版了一下,以一个js初学者的视界来分析注释了这些代码段,暂且不去讨论它的性能和优化问题,相信会对一些初学者有用。
950 0
Keypress – 超强大!捕获键盘输入的 JavaScript 库
  Keypress 是一个强大的 JavaScript 库,用于捕获键盘输入。这是一个有非常特殊的功能的输入捕获库,它是很容易掌握和使用,并且不依赖第三方库。在网站开发中,经常会碰到需要处理键盘输入的场景,处理起来繁琐。
914 0
JavaScript正则表达式的零宽断言
有类似如下的应用场景,一个全为数字的字符串,现在要将它每三位使用“,”进行分隔。例如:1099795448 –> 1,099,795,448。这里就可以使用正则的零宽断言(点击查看详情>>) 使用RegexBuddy可以跟踪正则的匹配过程:   第一次,1开始从左向右进行匹配判断,当匹配到...
657 0
+关注
执久呀
CSDN新星博主执久呀
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript 语言在引擎级别的执行过程
立即下载
Javascript中的函数
立即下载
Javascript中的对象
立即下载