1、ajaxjavascript
AJAX的概念就是頁面互動無刷新的效果。
例如:你作一個註冊頁面,由於用戶通常都是惟一的,這個時候你就能夠選擇一個比較人性化的作法,就是使用AJAX技術,當填完信息鼠標移開txtUserName這個文本框的時候 觸發一個事件,而後這個事件調用一個JS方法。JS方法裏面使用xmlHttpRequest這個對象。就能夠異步的調用後來 來完成一個 查詢而且判斷的過程。 最後返回一個結果 在前面來判斷輸入的 「用戶名是否在!」。css
2、表單驗證html
表單驗證是javascript中的高級選項之一。JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。java
被 JavaScript 驗證的這些典型的表單數據有:jquery
用戶是否已填寫表單中的必填項目?程序員
用戶輸入的郵件地址是否合法?web
用戶是否已輸入合法的日期?ajax
用戶是否在數據域(numeric field) 中輸入了文本?shell
下面的函數用來檢查用戶是否已填寫表單中的必填(或必選)項目。假如必填或必選項爲空,那麼警告框會彈出,而且函數的返回值爲 false,不然函數的返回值則爲 true(意味着數據沒有問題):編程
function validate_required(field, alerttxt)
{ with(field)
{ if (value == null || value == "")
{ alertalerttxt); return false; }
else { return true; } } }
function validate_required(field, alerttxt)
{ with(field)
{ if (value == null || value == "")
{ alertalerttxt); return false; }
else { return true; } } }
下面是連同 HTML 表單的代碼:
Email:
下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。
意思就是說,輸入的數據必須包含 @ 符號和點號(.)。同時,@ 不能夠是郵件地址的首字符,而且 @ 以後需有至少一個點號:
function validate_email(field, alerttxt) { with(field) { apos = value.indexOf("@") dotpos = value.lastIndexOf(".") if (apos < 1 || dotpos - apos < 2) { alertalerttxt); return false; } else { return true; } } }
function validate_email(field, alerttxt) { with(field) { apos = value.indexOf("@") dotpos = value.lastIndexOf(".") if (apos < 1 || dotpos - apos < 2) { alertalerttxt); return false; } else { return true; } } }
下面是連同 HTML 表單的完整代碼:
function validate_email(field, alerttxt)
{
with(field) { apos = value.indexOf("@"); dotpos = value.lastIndexOf(".");
if (apos < 1 || dotpos - apos < 2)
{
alertalerttxt);
return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with(thisform)
{
if (validate_email(email, "Not a valid e-mail address!") == false)
{
email.focus();
return false
}
}
}
Email:
發送數據
3、彈出框大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Alert Dialogs</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="This is a demonstration page." />
<meta name="keywords" content="alert, confirm, prompt, demo" />
<style type="text/css">
BODY,
HTML {
padding: 0px;
margin: 0px;
}
BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #FFF;
padding: 15px;
}
H1 {
font-size: 20px;
font-weight: normal;
}
H2 {
font-size: 16px;
font-weight: normal;
}
FIELDSET {
border: solid 1px #CCC;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
padding: 1em 2em;
margin: 1em 0em;
}
LEGEND {
color: #666;
font-size: 16px;
padding: 0em .5em;
}
PRE {
font-family: "Courier New", monospace;
font-size: 11px;
color: #666;
background: #F8F8F8;
padding: 1em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
/* Custom dialog styles */
#popup_container.style_1 {
font-family: Georgia, serif;
color: #A4C6E2;
background: #005294;
border-color: #113F66;
}
#popup_container.style_1 #popup_title {
color: #FFF;
font-weight: normal;
text-align: left;
background: #76A5CC;
border: solid 1px #005294;
padding-left: 1em;
}
#popup_container.style_1 #popup_content {
background: none;
}
#popup_container.style_1 #popup_message {
padding-left: 0em;
}
#popup_container.style_1 INPUT[type='button'] {
border: outset 2px #76A5CC;
color: #A4C6E2;
background: #3778AE;
}
</style>
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#alert_button").click( function() {
jAlert('This is a custom alert box', 'Alert Dialog');
});
$("#confirm_button").click( function() {
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results');
});
});
$("#prompt_button").click( function() {
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
if( r ) alert('You entered ' + r);
});
});
$("#alert_button_with_html").click( function() {
jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
});
$(".alert_style_example").click( function() {
$.alerts.dialogClass = $(this).attr('id'); // set custom style class
jAlert('This is the custom class called “style_1”', 'Custom Styles', function() {
$.alerts.dialogClass = null; // reset to default
});
});
});
</script>
</head>
<body>
<h1><a href="http://abeautifulsite.net/2008/12/jquery-alert-dialogs/">« jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)</a></h1>
<h2>Basic Examples</h2>
<fieldset>
<legend>Alert</legend>
<pre>
jAlert('This is a custom alert box', 'Alert Dialog');
</pre>
<p>
<input id="alert_button" type="button" value="Show Alert" />
</p>
</fieldset>
<fieldset>
<legend>Confirm</legend>
<pre>
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results');
});
</pre>
<p>
<input id="confirm_button" type="button" value="Show Confirm" />
</p>
</fieldset>
<fieldset>
<legend>Prompt</legend>
<pre>
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
if( r ) alert('You entered ' + r);
});
</pre>
<p>
<input id="prompt_button" type="button" value="Show Prompt" />
</p>
</fieldset>
<h2>Additional Examples</h2>
<fieldset>
<legend>With HTML</legend>
<pre>
jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
</pre>
<p>
<input id="alert_button_with_html" type="button" value="Show Alert" />
</p>
</fieldset>
<fieldset>
<legend>Alternate Styles</legend>
<p>
By changing the value of the <samp>$.alerts.dialogClass</samp> property (and creating
your own CSS class), you can changes the style of your dialogs:
</p>
<p>
<input id="style_1" class="alert_style_example" type="button" value="Style 1" />
</p>
<p>
View the plugin source for additional properties that can be modifed at runtime.
</p>
</fieldset>
<p>
<a href="http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/">Back to the project page</a>
</p>
</body>
</html>
記得導入3個js 和 1個css,能夠經過css改變樣式
4、開發人員控制面板
Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面獲得反饋。
Console:記錄開發者開發過程當中的日誌信息,且能夠做爲與JS進行交互的命令行Shell。
Sources:斷點調試JS。
Network:從發起網頁頁面請求Request後分析HTTP請求後獲得的各個請求資源信息(包括狀態、資源類型、大小、所用時間等),能夠根據這個進行網絡性能優化。
Timeline:記錄並分析在網站的生命週期內所發生的各種事件,以此能夠提升網頁的運行時間的性能。
Profiles:若是你須要Timeline所能提供的更多信息時,能夠嘗試一下Profiles,好比記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
Application:記錄網站加載的全部資源信息,包括存儲數據(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、緩存數據、字體、圖片、腳本、樣式表等。
Security:判斷當前網頁是否安全。
Audits:對當前網頁進行網絡利用狀況、網頁性能方面的診斷,並給出一些優化建議。好比列出全部沒有用到的CSS文件等。注: 這一篇主要講解前三個面板Elements、Console、Sources。
5、onclick用法
window.location.replace(「url」):將地址替換成新url,該方法經過指定URL替換當前緩存在歷史裏(客戶端)的項目,所以當使用replace方法以後,你不能經過「前進」和「後 退」來訪問已經被替換的URL,這個特色對於作一些過渡頁面很是有用!
window.location.reload():強制刷新頁面,從服務器從新請求!
window.location.href和window.location.replace的區別:
假設有3個jsp頁面(1.jsp, 2.jsp, 3.jsp),進系統默認的是1.jsp ,當我進入2.jsp的時候, 2.jsp裏面用window.location.replace(「3.jsp」);與用window.location.href(「3.jsp」);從用戶界面來看是沒有什麼區別的,可是當3.jsp頁面有一個「返回」按鈕,調用window.history.go(-1);wondow.history.back();方法的時候,一點這個返回按鈕就要返回2.jsp頁面的話,區別就出來了,當用window.location.replace(「3.jsp」);連到3.jsp頁面的話,3.jsp頁面中的調用window.history.go(-1);wondow.history.back();方法是很差用的,會返回到1.jsp 。當用window.location.href(「3.jsp」);連到3.jsp頁面的話,3.jsp頁面中的調用window.history.go(-1);wondow.history.back();方法是好用的,會返回2.jsp。由於window.location.replace(「3.jsp」);是不向服務器發送請求的跳轉,而window.history.go(-1);wondow.history.back();方法是根據服務器記錄的請求決定該跳到哪一個頁面的,因此會跳到系統默認頁面1.jsp 。window.location.href(「3.jsp」);是向服務器發送請求的跳轉,window.history.go(-1);wondow.history.back();方法是根據服務器記錄的請求決定該跳到哪一個頁面的,因此就能夠返回到2.jsp。
window.location和window.open區別:
在給按鈕、表格、單元格、下拉列表和DIV等作連接時通常都要用Javascript來完成,和作普通連接同樣,可能須要讓連接頁面在當前窗口打開,也可能須要在新窗口打開,這時就可使用下面兩項之一來完成:
window.open 用來打開新窗口
window.location 用來替換當前頁,也就是從新定位當前頁
能夠用如下來個實例來測試一下。
<input type=」button」 value=」新窗口打開」 onclick=」window.open(‘http://www.zhousl.com/’)」>
<input type=」button」 value=」當前頁打開」 onclick=」window.location=’http://www.zhousl.com/’」>
window.location.Reload()和window.location.href=window.location.href;都是刷新當前頁面。
6、分支循環
一、當有多個條件是用 elif 這樣就不用那麼多縮進
score = int(input('輸入一個分數'))
if 100 >= score >= 85:
print('A')
elif 85 > score >= 60:
print('B')
elif 60 > score >= 0:
print('C')
else:
print('輸入錯誤! ')
二、三元操做符 語法 x if 條件 else y
small = x if x < y else y #當if後面的條件爲真的時候把x的值賦給small;當條件爲假的時候把y的值賦給small
三、斷言 assert #當這個關鍵字後面的條件爲假的時候程序自動崩潰,並拋出AssertError。當須要程序中的某個條件必定爲真時才能讓程序正常運行,assert就很是有用。
>>> assert 3 < 4
>>> assert 3 > 5
Traceback (most recent call last):
File "<pyshell#70>", line 1, in <module>
assert 3 > 5
AssertionError
四、while循環 #在條件爲真的時候執行某一段制定的代碼,只要條件爲真,while循環就會一直去重複執行那一段代碼。這段代碼就是一個循環體。
五、for循環
①>>> favourite = 'welcom' ②>>>member = ['QQ', 'QW', 'QR']
>>> for i in favourite: >>>for each in member:
print(i, end='8') print(eacd, len(each)) #打印each的長度 即QQ有兩個字符就打印2
w8e8l8c8o8m8 QQ 2
QW 2
QR 2
六、range語法:range(start, stop, step) 默認step=1
① >>> range(0,5)
>>> list(range(5))
[0, 1, 2, 3, 4]
② >>> for i in range(2, 7): #7是不包含的
print(i)
2
3
4
5
6
③>>> for i in range(1, 10, 4): #4表明每次步進4,從1開始打印出1-10從1開始每次步進4的數
print(i)
1
5
9
七、break 終止當前循環並跳出這個循環體
bingo = '猜答案'
print('輸入一句話')
answer = raw_input()
#print bingo
#print answer
while True:
if answer == bingo:
break
print('抱歉輸錯了,請從新輸入才能退出')
answer = raw_input()
print('很好額')
print('答對了')
八、continue 當循環條件爲True的時候終止本輪循環並開始下一輪循環 ,若是不退的話會跳出循環
for i in range(10):
if i%2 != 0:
print(i)
continue
i += 2
print(i)
顯示結果是:
2
1
4
3
6
5
8
7
10
9
window.location.Reload()若是有數據提交的話,會提示是否提交的(是和否選項)
window.location.href=window.location.href是定向url提交數據
最好不要用location.re
load(),而用location=location比較好,還有在模式窗口(showModalDialog和showModelessDialog)前者不能用。
reload() 方法用於從新加載當前文檔。
語法
location.reload(force)說明
若是該方法沒有規定參數,或者參數是 false,它就會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變。若是文檔已改變,reload() 會再次下載該文檔。若是文檔未改變,則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是徹底同樣的。
若是把該方法的參數設置爲 true,那麼不管文檔的最後修改日期是什麼,它都會繞過緩存,從服務器上從新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是徹底同樣。
好象是說:
若是window.loacation.reload(true)==window.location.href=」xxx.xx」;
This entry was posted in js and tagged JQ函數, Js函數. Bookmark the permalink
7、強數據類型
強類型定義語言
一種老是強制類型定義的語言。Java和Python是強制類型定義的。若是你有一個整數,若是不顯示地進行轉換,你不能將其視爲一個字符串來用
弱類型定義語言
一種類型能夠被忽略的語言,與強類型定義相反。VBScript是弱類型定義的。在VBScript中,能夠將字符串 '12' 和整數 3 進行鏈接獲得字符串 '123',而後能夠把它當作整數 123,而不須要顯示轉換 。
8、垃圾回收機制
要理解什麼是垃圾回收機制,首先要對內存管理概念有一個基本的認識。內存管理是指操做系統如何進行內存的分配和回收的機制。早期的計算機語言,好比C, 它經過malloc, free函數來向操做系統請求
內存和釋放內存。 這種機制的優勢是內存分配和釋放的效率很高。可是它也有着它的缺點,主要表如今對於複雜的系統,存在着大量的內存分配和釋放操做。程序員很容易不當心忘記釋放內存,從而形成內
存的泄露,對於長期運行的軟件來說,這將是一個致命的威脅,由於系統的內存會逐漸被吃光。 所以,更新的編程語言,好比JAVA, C#, 都提供了所謂「垃圾回收的機制」,運行時自身會運行相應的垃圾
回收機制。程序員只須要申請內存,而不須要關注內存的釋放。垃圾回收器(GC)會在適當的時候將已經終止生命週期的變量的內存給釋放掉。
GC的優勢就在於它大大簡化了應用層開發的複雜度,下降了內存泄露的風險
9、閉包
閉包是指能夠包含自由(未綁定到特定對象)變量的代碼塊;這些變量不是在這個代碼塊內或者任何全局上下文中定義的,而是在定義代碼塊的環境中定義(局部變量)。「閉包」 一詞來源於如下二者的
結合:要執行的代碼塊(因爲自由變量被包含在代碼塊中,這些自由變量以及它們引用的對象沒有被釋放)和爲自由變量提供綁定的計算環境(做用域)。在PHP、Scala、Scheme、Common Lisp、
Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java(Java8及以上)等語言中都能找到對閉包不一樣程度的支持。
1
2
3
4
5
6
7
8
9
|
function
a(){
var
i=0;
function
b(){
alert(++i);
}
return
b;
}
var
c=a();
c();
|