2012年10月31日 星期三

HTML與JQuery處理Event事件的注意事項(二)

延續上一篇,我們來看一下解法,很簡單,只要把註冊函式的內容用$(document).ready(function()包起來就好了,請看下面程式碼的修改,你會發現,現在不論用Script 前區段Script 後區段都正常了。這是因為$(document).ready(function()是告訴瀏覽器,當整份文件讀取好了之後,才來執行我的Ready()函式,這樣就不會有JQuery想取用,但是該ID物件尚未產生的情形。所以放哪裡都無所謂了。可以自己把<script>放到後段去試看看。

有個觀念要弄清楚,<script>原本的用意,是在HTML需要程式動態產生內容地方,用來做出動態內容,或特殊效果,但是發展至今,JQuery是讓你方便透過ID或CLASS來取用HTML的元件(把一切都物件化了),然而衍生出了「取用的ID的物件尚未產生」的問題,也用了Ready()函式來解決,但是記得,這樣會讓HTML載入之後,就立刻執行Ready()的內容,所以這裡多半用來註冊函式與事件,或宣告函式,而不是直接去操作物件做什麼事情,除非你真的有這種需求,要在HTML載入之後,操作什麼物件。



<!doctype html> 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery (document).ready 教學</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    
    <!-- Script 前區段 -->
    <script>

        $(document).ready(function() 

        {
           var divClickCount = 0;

            $(".btnCount").click(function(e)
            {
               $(".OutDiv").text( "Count = " + divClickCount );
               divClickCount++;
           });    
        });   
    </script>
    
    <!-- CSS 區段 -->    
    <style type="text/css">
        .OutDiv
        {
            width:600px;
            height:400px;
            border:solid;
            cursor:n-resize; 
        }​
    </style>

</head>

    <!-- Body 區段 -->
<body>
    <div class = "OutDiv"></div>​    
    <button class = "btnCount" >Counter</button>
</body>
</html>

HTML與JQuery處理Event事件的注意事項(一)


首先,我們先看一段用HTML處理Event的程式碼,將以下的程式碼貼到Dreamware或是文字編輯軟體,然後執行此HTML檔,在瀏覽器觀看其結果。然後把Script 前區段遮掉,改把Script 後區段打開,然後執行此HTML檔,在瀏覽器觀看其結果。會發現結果是一樣的,沒有任何差別,就是在按鈕Click之後,在DIV裡面顯示被按了幾下。


<!doctype html> 

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery (document).ready 教學</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    
    <!-- Script 前區段 -->
    <script>
var divClickCount = 0;
function BtnClick()
{
    $(".OutDiv").text( "Count = " + divClickCount );
    divClickCount++;
}   
    </script>
    
    <!-- CSS 區段 -->    
    <style type="text/css">
        .OutDiv
        {
            width:600px;
            height:400px;
            border:solid;
            cursor:n-resize; 
        }​
    </style>

</head>



    <!-- Body 區段 -->

<body>
    <div class = "OutDiv"></div>​    
    <button class = "btnCount" onClick="BtnClick()" >Counter</button>
</body>
</html>

    <!-- Script 區段 -->

    <!--
<script>
var divClickCount = 0;
function BtnClick()
{
$(".OutDiv").text( "Count = " + divClickCount );
divClickCount++;
}   
    </script> -->


---------------------------------------------------------------------------------------------------------------




再來,我們改用JQuery來處理事件,改成在Script區段註冊Event函式,並完成函式內容。如以下程式碼,你會發現,這次執行之後,點按鈕不會在DIV顯示訊息了。如果把前區段遮掉,改把後區段打開,發現,就正常了。




<!doctype html> 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery (document).ready 教學</title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    
    <!-- Script 前區段 -->
    <script>
var divClickCount = 0;

$(".btnCount").click(function(e)
{
    $(".OutDiv").text( "Count = " + divClickCount );
    divClickCount++;
});     
    </script>
    
    <!-- CSS 區段 -->    
    <style type="text/css">
        .OutDiv
        {
            width:600px;
            height:400px;
            border:solid;
            cursor:n-resize; 
        }​
    </style>

</head>

    <!-- Body 區段 -->
<body>
    <div class = "OutDiv"></div>​    
    <button class = "btnCount" onClick="BtnClick()">Counter</button>
</body>
</html>

    <!-- Script 後區段 -->
    <!-- 
    <script>

var divClickCount = 0;


        $(".btnCount").click(function(e)
        {
            $(".OutDiv").text( "Count = " + divClickCount );
            divClickCount++;
        });     

    </script>

    -->

為什麼會這樣?這是因為,如果把Script寫在前面,則網頁載入時,會先載入Script這塊,但此時JQuery所要的ID元件根本就還沒產生,因為還沒執行到Body,所以才會異常。能有什麼解決的方式嗎?有,請看 HTML與JQuery處理Event事件的注意事項(二)

2012年10月16日 星期二

圓角與各家瀏覽器之間的注意事項



  • 基本圓角語法:

         border-radius
最早,在W3C的CSS3草案當中就已經定義了這個圓角元素。以 Presto 為引擎的瀏覽器(Opera 與 IE )支援這個屬性,但IE9.0之後才實作進去。




  • 衍生的語法:

        -webkit-border-radius:5px;
-moz-border-radius: 5px;

在全面支援正規的 border-radius 之前,以 webkit 為引擎的瀏覽器(Safari, Chrome)則支援 -webkit-border-radius 的圓角,而 Mozilla 引擎的瀏覽器(Firefox)則支援 -moz-border-radius 的屬性,如果瀏覽器版本夠新,只要寫基本圓角語法 border-radius 就可以了不用針對各特殊瀏覽器來寫特別屬性。




  • 不論正規或是衍生的語法都有子屬性,可針對左上角、左下角、右上角、右下角來作設定,比方:-moz-border-bottom-right-radius: 5px; 就是針對右下角設定圓角,給的數字越大,圓角越大、越圓。

  • 圓角的屬性,在 body 跟 html 這兩個 TAG 有作用的,可是,只有在非IE或IE9.0以上的瀏覽器才有。