首頁 > web前端 > js教程 > 主體

jQuery怎麼使用? jQuery選擇器有哪些?

青灯夜游
發布: 2018-11-13 10:39:38
轉載
2180 人瀏覽過

本篇文章帶給大家的內容是介紹jQuery怎麼使用? jQuery選擇器有哪些?讓大家了解jQuery檔案庫的使用,基本語法的使用,jQuery選擇器。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

1. 使用方法

jQuery 函式庫位於一個 JavaScript 檔案中,其中包含了所有的 jQuery 函數。

網頁需要使用到 jQuery 時,需要先在網頁中引入 jQuery 的 js檔案。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
</head>
<body>
</body>
</html>
登入後複製

2. jQuery 語法

jQuery 語法是透過選取 HTML 元素,並對選取的元素執行某些動作。 【相關影片教學推薦:jQuery教學

#基礎語法形式:

 $(selector).action()
登入後複製

範例:

$("p").hide()    // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素
登入後複製

寫法:

所有jQuery 函數位於一個document.ready 的函數中。如下圖。

這是為了防止文件在完全載入(就緒)之前執行 jQuery 程式碼,也就是在 DOM 載入完成後才可以對 DOM 進行操作。

如果在文件沒有完全載入之前就執行函數,操作可能會失敗。

    $(document).ready(function(){     
       // 代码部分写在这里     
    });
登入後複製

也可以簡寫成下面這樣:

   $(function(){         
      // 这里写代码         
   });
登入後複製

範例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <div id="myDiv1">Hello</div>
</body>
</html>
登入後複製

  

3.基本選擇器

(1) 元素選擇器: jQuery 元素選擇器是基於元素名稱選取元素。

範例:使用元素選擇器選擇所有

元素,將其隱藏。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>
登入後複製

  

(2) #id ​​選擇器:jQuery #id 選擇器透過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的id 應該是唯一的,所以您要在頁面中選取唯一的元素需要透過#id 選擇器

舉例:使用#id 選擇器選擇id="myDiv1 "的元素,將其隱藏。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>
登入後複製

  

(3) .class 選擇器:jQuery 類別選擇器可以透過指定的 class 來尋找元素。

 舉例:使用類別選擇器選擇Class=「myClass1」的元素,將其隱藏。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>
登入後複製

  

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。

以上是jQuery怎麼使用? jQuery選擇器有哪些?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板