jQuery的對html元素及css的簡單操作demo

jQuery 語法

jQuery 語法是爲 HTML 元素的選取編制的,可以對元素執行某些操作。

基礎語法是:$(selector).action()

  • 美元符號定義 jQuery
  • 選擇符(selector)“查詢”和“查找” HTML 元素
  • jQuery 的 action() 執行對元素的操作

示例

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏所有段落

$("p.test").hide() - 隱藏所有 class="test" 的段落

$("#test").hide() - 隱藏所有 id="test" 的元素

jQuery 事件

下面是 jQuery 中事件方法的一些例子:

Event 函數 綁定函數至
$(document).ready(function) 將函數綁定到文檔的就緒事件(當文檔完成加載時)
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件


下面是一個簡單的例子

<html>

    <head>    
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //當鼠標停留在此段落時背景顏色將會變化
                $("p").mouseover(function(){
                    $("p").css("background-color","yellow")
                })
                //將此段落的背景顏色設爲紅色
                $("p").css("background-color","red")
                //class爲test的操作
                $("p.test").hide();
                //id爲test的操作
                $("#test").hide();
                $("button").click(function(){
                  $("p").hide();
                })
            })
        </script>    
    </head>    
    <body>
        <h2>你好</h2>
        <p>點擊我會隱藏哦</p>
        <!class為test的將會隱藏 -->
        <p class="test">一開始我就隱藏</p>
            <!id爲test的將會隱藏 -->
        <p id="test">一開始我就隱藏</p>
        <button type="button">
            hello!點擊我!
        </button>
    </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章