1、jQuery概要

JavaScript的一個庫，只是一個jquery-xxx.js的文件，它可以讓你寫更少的代碼，做更多的事。
$是著名的jQuery符號。實際上，jQuery把所有功能全部封裝在一個全局變量jQuery中，而$也是一個合法的變量名，它是變量jQuery的別名。

jQuery選擇器得到的對象是一個jQuery對象，已經不是普通JS通過方法獲取的HTML對象了，它類似數組，每個元素都是一個引用了DOM節點的對象。jQuery對象和DOM對象可以相互轉換。

2、jQuery的選擇器

按id查找// 查找<div id="abc">: var div = $('#abc');21// 查找<div id="abc">: 2var div = $('#abc');
按tag查找var ps = $('p'); // 返回所有<p>節點 ps.length; // 數一數頁面有多少個<p>節點21var ps = $('p'); // 返回所有<p>節點2ps.length; // 數一數頁面有多少個<p>節點
按class查找var a = $('.red'); // 所有節點包含`class="red"`都將返回 // 例如: // <div class="red">...</div> // <p class="green red">...</p>//查找同時包含red和green的節點 var a = $('.red.green'); // 注意沒有空格！同時查找red和green // 符合條件的節點： // <div class="red green">...</div> // <div class="blue green red">...</div>101var a = $('.red'); // 所有節點包含`class="red"`都將返回2// 例如:3// <div class="red">...</div>4// <p class="green red">...</p>56//查找同時包含red和green的節點7var a = $('.red.green'); // 注意沒有空格！同時查找red和green8// 符合條件的節點：9// <div class="red green">...</div>10// <div class="blue green red">...</div>
按attr查找var email = $('[name=email]'); // 找出<??? name="email"> var passwordInput = $('[type=password]'); // 找出<??? type="password"> var a = $('[items="A B"]'); // 找出<??? items="A B">//按屬性查找還可以使用前綴查找或者后綴查找 var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的DOM // 例如: name="icon-1", name="icon-2" var names = $('[name$=with]'); // 找出所有name屬性值以with結尾的DOM // 例如: name="startswith", name="endswith"//這個方法尤其適合通過class屬性查找，且不受class包含多個名稱的影響 var icons = $('[class^="icon-"]'); // 找出所有class包含至少一個以`icon-`開頭的DOM // 例如: class="icon-clock", class="abc icon-home"x1var email = $('[name=email]'); // 找出<??? name="email">2var passwordInput = $('[type=password]'); // 找出<??? type="password">3var a = $('[items="A B"]'); // 找出<??? items="A B">45//按屬性查找還可以使用前綴查找或者后綴查找6var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的DOM7// 例如: name="icon-1", name="icon-2"8var names = $('[name$=with]'); // 找出所有name屬性值以with結尾的DOM9// 例如: name="startswith", name="endswith"1011//這個方法尤其適合通過class屬性查找，且不受class包含多個名稱的影響12var icons = $('[class^="icon-"]'); // 找出所有class包含至少一個以`icon-`開頭的DOM13// 例如: class="icon-clock", class="abc icon-home"
組合查找組合查找就是把上述簡單選擇器組合起來使用。如果我們查找$('[name=email]')，很可能把表單外的<div name="email">也找出來，但我們只希望查找<input>，就可以這么寫：
var emailInput = $('input[name=email]'); // 不會找出<div name="email">11var emailInput = $('input[name=email]'); // 不會找出<div name="email">
多項選擇器多項選擇器就是把多個選擇器用,組合起來一塊選：
$('p,div'); // 把<p>和<div>都選出來 $('p.red,p.green'); // 把<p class="red">和<p class="green">都選出來1$('p,div'); // 把<p>和<div>都選出來2$('p.red,p.green'); // 把<p class="red">和<p class="green">都選出來

轉載于:https://www.cnblogs.com/deng-cc/p/6681384.html

總結

以上是生活随笔為你收集整理的06jQuery-01-基本选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。