jquery總結

RoseMe發表於2019-02-16
jQuery

JQuery是小巧、輕量級的javascript函式庫。本著“寫得少，做的多”的原則來替代javascript原生程式碼，選擇器為其核心內容。
一、引入JQuery：
cdn引入方法，注意：JQuery引入要在JS程式碼上。
<script src=”https://cdn.bootcss.com/jquer…;></script>
二、使用JQuery

// jquery原始書寫
// $(document).ready(function(){

// })
//程式碼簡寫如下兩種方式：
// $().ready(function(){

// })
// $(function(){})

注意： jquery書寫儘量使用原始書寫方法，以提高程式碼讀寫、區分window.onload載入。
三、選擇器：返回值為類似的陣列的值，不會返回null和undefind;其返回值遵循其結構
選擇器是jquery中最重要的部分，具體內容如下：
1、基礎選擇器：

#id：id選擇器，不可重複，執行效率高
element：標籤選擇器
class:類名選擇器
*：萬用字元選擇器
其中element和class選擇器可以多次重複使用，執行效率沒有id選擇器高

2、多項選擇器：將每一個選擇器的元素合併到同一個陣列中返回
3、層級選擇器：

 （`ancestor descendant`）後代選擇器（祖先 後代）
 （`parent>child`）子選擇器 只匹配一層 **執行效率高，使用率高**
 （`prev+next`）next選擇器/下一下選擇器，匹配所有與prev相臨的元素
 （`prev~siblings`）兄弟選擇器，同級關係

4、屬性選擇器

 [attribute] 屬性名選擇器
 [attribute=value]屬性值選擇器
 [attribute！=value]非屬性選擇器
 [attribute^=value]以某個屬性開頭
 [attribute$=value]以某個屬性結尾
 [attribute*=value]包含選擇器
 [selector1][selector2][selectorN]多個屬性選擇器（條件同時滿足）
 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>屬性選擇器</title>
</head>
<body>
   <details class="tool">
       <summary>開發工具</summary>
       <p class="tool_sublime">Sublime</p>
       <p class="tool_westrom">Westrom</p>
       <p class="tool_vs">Visual Studio</p>
       <p class="tool_vscode">Visual Studio Code</p>
   </details>
   <details class="lang">
       <summary>開發語言</summary>
       <p class="lang_html">HTML</p>
       <p class="lang_css">Css</p>
       <p class="lang_js">JavaScript</p>
       <p class="lang_jquery">JQuery</p>
   </details>
   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
   <script>
       $(document).ready(function(){
       //包含選擇器[attribute*=value]
           var setAtt=$(`[class*=_]`);
           console.log( setAtt);

       //以某個結尾的選擇器[attribute^=value]即所有以tool_開頭的類名
           // var lastAtt=$(`[class$=s]`);
           // console.log(lastAtt);

       //以某個屬性開頭的選擇器[attribute^=value]即所有以tool_開頭的類名
           // var tAtt=$(`[class^=tool_]`);
           // console.log(tAtt);

       // 屬性名選擇器
           // var att=$(`[class]`);
           // 輸出結果為所有帶Class類名的標籤
           // console.log(att);
           // 輸出結果為<html lang="en">標籤
           // var enAtt=$(`[lang]`);
           // console.log(enAtt);


       //屬性值選擇器 [attribute=value]
           // 輸出結果為: <p class="tool_sublime">Sublime</p>
           // var valueAtt=$(`[class=tool_sublime]`);
           // console.log(valueAtt);

       //非屬性值選擇器[attribute!=value]
        // 輸出結果為: 類名不等於tool_sublime的元素
           // var notAtt=$(`[class=tool_sublime]`);
           // console.log( notAtt);


       })
   </script>
</body>
</html>

5、過濾選擇器分為child與type兩種型別，其中child側重節點的查詢，而type側重於標籤型別的查詢，詳情見如下程式碼：
child型別：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>過濾選擇器</title>
</head>
<body>
   <details class="tool" open="open">
       <summary>編輯器</summary>
       <p class="tool_sublime">Sumblime</p>
       
   </details>
   <details class="ide" open="open">
       <summary>IDE</summary>
       <p class="tool_webstrom">WebStorm</p>
       <p class="tool_vs">Visual Studio</p>
       <p class="tool_vscode">Visual Studio Code</p>
   </details>
   <details class="lang" open="open">
       <summary>開發語言</summary>
       <p class="lang_html">HTML</p>
       <p class="lang_css">Css</p>
       <p class="lang_js">JavaScript</p>
       <p class="lang_jquery">jQuery</p>
   </details>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
   <script>
       $(document).ready(function(){
        // 倒數第幾個nth-last-child
           var nthL=$(`details> p:nth-last-child(2)`);
           console.log(nthL);       
        // 指定第幾個nth-child
           var nthF=$(`details> p:nth-child(2)`);
           console.log(nthF);
        // 獨生子元素only-child
           var only=$(`details> p:only-child`);
           console.log(only);

        // 查詢最後一個元素last-child
           var last=$(`details> p:last-child`);
           console.log(last);
        //   :first-child查詢第一個元素 
           var first=$(`details> p:first-child`);
           console.log(first);
       })
   </script>
</body>
</html>

type型別：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>過濾選擇器</title>
</head>
<body>
   <details class="tool" open="open">
       <summary>編輯器</summary>
       <p class="tool_sublime">Sumblime</p>
       
   </details>
   <details class="ide" open="open">
       <summary>IDE</summary>
       <p class="tool_webstrom">WebStorm</p>
       <p class="tool_vs">Visual Studio</p>
       <p class="tool_vscode">Visual Studio Code</p>
   </details>
   <details class="lang" open="open">
       <summary>開發語言</summary>
       <p class="lang_html">HTML</p>
       <p class="lang_css">Css</p>
       <p class="lang_js">JavaScript</p>
       <p class="lang_jquery">jQuery</p>
   </details>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
   <script>
       $(document).ready(function(){
        // 倒數第幾個nth-last-of-type
           var nthL=$(`details> p:nth-last-of-type(2)`);
           console.log(nthL);       
        // 指定第幾個nth-of-type
           var nthF=$(`details> p:nth-of-type(2)`);
           console.log(nthF);
        // 獨生子元素only-of-type
           var only=$(`details> p:only-of-type`);
           console.log(only);

        // 查詢最後一個元素last-of-type
           var last=$(`details> p:last-of-type`);
           console.log(last);
        //   :first-of-type查詢第一個元素 
           var first=$(`details> p:first-of-type`);
           console.log(first);
       })
   </script>
</body>
</html>

注：其中過濾選擇器的引數可以為n(子元素序號，從1開始)、even（偶數）、odd（奇數）、formula（特殊公式為an+b,必須為n，不可為其它字母）

——————————待續—————————————–

相關文章