JavaScript 之 jquery選擇器
阿新 • • 發佈:2018-09-01
寫法 xxxxx color 存在 一個 ret 語言 itl code
很好理解,我們之前選擇進行DOM選擇時,都用的是,docment.getElementById() , document.getElementsByTagName()
,等。
這樣的代碼,一般情況下可用,但如果存在層級關系,這種情況下我們總是需要遞歸選擇。例如:
如,查找<table class="green">
裏面的所有<tr>
,一層循環實際上是錯的,因為<table>
的標準寫法是:
<table> <tbody> <tr>...</tr> <tr>...</tr> </tbody> </table>
很顯然,我們要進行 for 嵌套,才可以找到所有 tr 標簽。
jquery
jquery對象,是一個標簽組,類似數組。
jquery查找方法:
使用jQuery選擇器分別選出指定元素: 1.僅選擇JavaScript 2.僅選擇Erlang 3.選擇JavaScript和Erlang 4.選擇所有編程語言 5.選擇名字input 6.選擇郵件和名字input <!-- HTML結構 --> <div id="test-jquery"> <p id="para-1" class="color-red">JavaScript</p> <p id="para-2" class="color-green">Haskell</p> <p class="color-red color-green">Erlang</p> <p name="name" class="color-black">Python</p> <form class="test-form" target="_blank" action="#0" onsubmit="return false;"> <legend>註冊新用戶</legend> <fieldset> <p><label>名字: <input name="name"></label></p> <p><label>郵件: <input name="email"></label></p> <p><label>口令: <input name="password" type="password"></label></p> <p><button type="submit">註冊</button></p> </fieldset> </form> </div>
凡是查找,都用 $(‘ xxxxxx ‘ ) ,其中xxxxxx 是具體的篩選方案。 解決方案如下。
var js=$(‘#para-1‘); //通過名字查找 var erl=$(‘.color-red.color-green‘); //通過 class查找,既要滿足 color-red 又要滿足 color-green var jserl=$(‘.color-red‘); //class 查找, 只要含有 color-red 的,都會被查找 var allcpl=$(‘#test-jquery>p‘); // 所有在 名為 ’test-jquery‘ 標簽下的 p標簽 vat nameinput=$(‘input[name=‘name‘]‘); // 首先是個 input,然後 name要滿足 vat nameinput=$(‘input[name="name"],input[name="email"]‘); // 是個input,name是 name 或 email
JavaScript 之 jquery選擇器