摘要:JavaScript筆記
@ JavaScript 讓網站懂得回應用戶端(不用重新下載網頁就可以回應)
<head>
<script type="text/javascript">
........(content)
</script>
<head>
-----html5的話-------
直接再head加<script></script>就好
@可用外部JS (可引用多個外部檔案)
<script scr="XXX.js"></script>
每加入一個都要有一個<script></script>
@
敘述句 document.write( ' <p> hello! </p>')
" hello, \"Hend\" " 字串內要加" or ' 前面加反斜線
宣告 var
var a= ' 2 ';
var b= 4 ;
------------
var sum = a+b;
結果:sum=24
var sum = +a+b;
or
var sum= Number(a)+b;
結果: sum=6
@prompt
var name = prompt('what's your name?');
會把變數放進name裡面
@宣告陣列
單純字串 var ary=['Mon','Tues','Wed'];
可放入不同屬性 var ary=[ 1, 223, ' www.yahoo.com.tw ' , false]
ary[4]=' good ' ;
or
ary[ary.length]=' good ' ;
or
ary. push(' good '); //在後端加資料
// 再前端加資料 ary.unshift(' good ');
此時 ary=[ 1, 223, ' www.yahoo.com.tw ' , false, 'good ']
push() 和 unshift 會回傳 變數值
var num = ary.push( ' good ' );
此時 num=5
-------------------------------
push() 後加
pop() 後減
unshift() 前加
shift() 前減
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<JQuery>
@JQuery是JavaScript的函式庫
@跟css類似 可以用"外部"連結或"把JS下載到電腦中"
google的CND (外部)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"> </script>
把檔案下載在專案的根目錄
<script src="js/jquery-1.6.3.min.js"> </script>
@ 加上ready() <===網站全部載入完成後才能開始進行
<script>
$(document).ready( function () {
//程式
} ) ; //end ready
</script>
也可以寫成
$(document).ready( function() {}:
$( function () {
//程式
}); //end ready
@注意事項
1.JQuery的檔案連結要放在所有JQuery的程式前面
2.JavaScript程式碼要放在CSS後面
@ JavaScript 和 JQuery
＜JavaScript＞
只要在HTML設好ID 就可利用 getElementByID
EX:
<div id="banner"></div>
document.getElementById('banner')
另外還有getElementByTagName('div')
＜JQuery＞ ==> $('selector')
以上面做範例 JQuery 的語法為
ID : $ ('#banner') . html ( ' <h1>Hello! </h1> ' )
TagName : $( 'div' )
@選取項 <ul id="navbar">
＋子孫選取項 $( '#navbar a' )
＋子選取項 $( ' body > p ')
＋相鄰兄弟選取項 $( ' h2+div ' )
//右邊才是我們真正要選取的文件，這組元件一定要緊跟著左邊的文件後面
＋屬性選取項
$( ' img[alt] ' ) //找出所有有設定alt屬性的<img>
$( ' input [type="text"] ' ) //裡面也可以設定value
$ ( 'a [ herf ^="http:// " ] ' ) //找出<a>有herf屬性 且此屬性value開頭符合 http://
$ ( ' a [ herf $=".pdf " ] ' ) //找出<a>有herf屬性 且此屬性value結尾符合 .pdf
$ ( ' a [ herf *=" www.yahoo.com.tw " ] ' ) //找出<a>有herf屬性 且此屬性value中間符合www.yahoo.com.tw
@ JQuery 篩選器 ==> :
※ :even / :odd (even 0.2.4.6.... / odd 1.3.5.7.....)
$ ( ' tr : even ' ) //找出表格裡的所有偶數項
$ ( '.str tr : even ' ) //找出表格裡class為str的 <tr> 的所有偶數項
※ :first / :last 選取網頁第一或最後一組元件
$ ( ' p : first ' ) //網頁第一組元件
$ ( 'p : last ' ) //網頁最後一組元件
※ :not() 挑出不符合特定條件
$ ( 'a :not(.navButton) ' ) //挑出所有沒有class='navButton'的<a>
$ ( 'a:not( [href ^= " http:// " ] ) ' ) //挑出所有沒有href開頭為'http://' 的<a>
※ :has() 挑出包含某特定選取項的元件
$ ( ' li : has(a)' ) //找出所有包含 <a>的<li> 這裡和子孫選取項不同 只會選取到<li>不會選取到<a>
※ :contains() 能讓你挑出包含特定內容的元件
$ ( ' a: contains (Click Me!) ' ) //找出所有寫著Chick Me的連結
※ :hidden() 找出隱藏文件 - CSS display屬性被設為none (網頁上不會看到他) / JQuery hide() 設定為隱藏 /
高寬都設為0的元件 / 隱藏的表單 。hidden()不適用css visibility="invisible"
$ ( ' div : hidden ' ).show() ; //讓隱藏的div顯示出來
※ :visible() 和hidden相反,讓你找出所有顯示狀態的元件
@ 鍊結函式(chaining) -- 對一個tag做多個設定 , but 妳不能在鍊結中加上自己寫的函式orJavaScripit的函式 只有JQuery函式才能
$( ' #banner ' ).width(300)
.hight(200)
.text('Hello!')
.fadeIn(1000) ;
