目錄
捕捉鍵盤回車事件
void運算子
控制陳述句
js中創建陣列
DOM編程獲取value
BOM和DOM的區別和聯系？
BOM包含DOM
點擊按鈕得到文本框中的值
按回車把文本框1內容復制到文本框2
失去焦點后執行這段
js中的innerHTML和innerText屬性
innerText和innerHTML屬性有什么區別?
正則運算式
1、什么是正則運算式，有什么用?
常見的的正則運算式符號
7、怎么創建正則運算式物件，怎么呼叫正則運算式物件的方法?
正則運算式的test()方法？
捕捉鍵盤回車事件
對于keydown事件來說，都有keyCode屬性來獲取鍵值（即鍵盤上的每個鍵都有對應的一個值）回車鍵為13，Esc鍵為27
<script type="text/javascript">
//①當頁面加載完成，呼叫這個函式
window.onload=function(){
//②界面捕捉id為username的元素中發生鍵盤敲下事件是呼叫這個函式
document.getElementById("username").onkeydown=function(event){
//③當鍵盤敲下事件的keyCode為13時執行
if(event.keyCode==13){
alert("正在驗證登錄...");
}
}
}
</script>
<input type="text" id="username">當敲下回車鍵可以彈出：
void運算子
void運算子的語法:void(運算式)
運算原理:執行運算式，但不回傳任何結果，
javascript:void(0)
其中javascript:作用是告訴瀏覽器后面是一段js代碼，以下程式的javascript:是不能省略的，
//void(0)括號中的數字任意，不能不寫數字
<a href="javascript:void(0)" onclick="window.alert('test code")"> 保留</ a>既保留住超鏈接的樣式，同時用戶點擊該超鏈接的時候執行一段JS代碼，但頁面還不能跳轉
點擊文字顯示的彈窗效果：
控制陳述句
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省略了
點擊按鈕得到文本框中的值
//點擊按鈕得到文本框中的值
<script type="text/javascript">
window.onload=function(){
var name1=document.getElementById("btn1").onclick=function(){
var useValue =document.getElementById("user1").value;
alert(useValue);
}
}
</script>
<input type="button" id="btn1" value="按鈕">
<input type="text" id="user1">拿到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代表的是當前文本框物件
<input type="text" onblur="alert(this.value)" />js中的innerHTML和innerText屬性
在head中：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>javascript測驗</title>
<style type="text/css">
#div1{
background-color: aquamarine;
width:300px;
height:300px;
border: 1px black solid; //邊框為黑色實線
position: absolute; //絕對定位
top:100px; //距離頂部
left:100px;
}
</style>
</head>
<body>
<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>
<input type="button" id="btn" value="完了">
<div id="div1"></div>運行結果：
innerText和innerHTML屬性有什么區別?
相同點:都是設定元素內部的內容，
不同點:
innerHTML:會把后面的“字串”當做一段HTML代碼解釋并執行，
innerText:即使后面是一段HTML代碼，也只是將其當做普通的字串來看待，
正則運算式
1、什么是正則運算式，有什么用?
正則運算式:Regular Expression
正則運算式主要用在字串格式匹配方面
2、正則運算式實際上是一門獨立的學科工在Java語言中支持，c語言中也支持，javascript中也支持，大部分編程語言都支持正則運算式，正則運算式最初使用在醫學方面，用來表示神經符號等，目前使用最多的是計算機編程領域，用作字串格式匹配，包括搜索方面等，
正則運算式，對于我們javascript編程來說，掌握哪些內容呢?
第一:常見的正則運算式符號要認識，第二:簡單的正則運算式要會寫，
第三:他人撰寫的正則運算式要能看懂，
第四:在javascript當中，怎么創建正則運算式物件!(new物件)
第五:在javascript當中，正則運算式物件有哪些方法!(調方法)
第六:要能夠快速的從網路上找到自己需要的正則運算式，并且測驗其有效性，
常見的的正則運算式符號
①：
. 匹配除換行符以外的任意字符
\w 匹配字母或數字或下劃線或漢字
\s 匹配任意的空白符
\d 匹配數字
\b 匹配單詞的開始或結束
^ 匹配字串的開始
$ 匹配字串的結束
②：
* 重復零次或更多次
+ 重復一次或更多次
? 重復零次或一次
{n} 重復n次
{n,} 重復n次或更多次
{n,m} 重復n到m次
③：
\W 匹配任意不是字母，數字，下劃線，漢字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非數字的字符
\B 匹配不是單詞開頭或結束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou這幾個字母以外的任意字符
正則運算式當中的小括號()優先級較高，
「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、怎么創建正則運算式物件，怎么呼叫正則運算式物件的方法?
第一種創建方式:
var regExp=/正則運算式/flags;
第二種創建方式:使用內置支持類RegExp
var regExp =new RegExp("正則運算式","flags");
關于flags:
g:全域四配
i:忽略大小寫
m:多行搜索(ES規范制定之后才支持m，)當前面是正則運算式的時候，m不能用，只有前面是普通字串的時候,m 才可以使用，
正則運算式的test()方法？
true/false=正則運算式物件.test(用戶填寫的字串)
- true:字串格式匹配成功
- false:字串格式匹配失敗
<script type="text/javascript">
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"/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413478.html
標籤：其他