脚本宝典收集整理的这篇文章主要介绍了js實例教程-js的查找和過濾方法教程,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。
通常情況下選擇器可以直接定位到我們想要的元素,但是,當我們拿到一個jQuery對象后,還可以以這個對象為基準,進行查找和過濾。
最常見的查找是在某個節點的所有子節點中查找,使用
find()
方法,它本身又接收一個任意的選擇器。例如如下的HTML結構:
<!-- HTML結構 -->
<ul class="lang">
<li class="js dy">JavaScript</li>
<li class="dy">Python</li>
<li id="swift">Swift</li>
<li class="dy">Scheme</li>
<li name="haskell">Haskell</li>
</ul>
用
find()
查找:
var ul = $('ul.lang'); // 獲得<ul>
var dy = ul.find('.dy'); // 獲得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 獲得Swift
var hsk = ul.find('[name=haskell]'); // 獲得Haskell
如果要從當前節點開始向上查找,使用 parent() 方法:
1 var swf = $('#swift'); // 獲得Swift
2 var parent = swf.parent(); // 獲得Swift的上層節點<ul>
3 var a = swf.parent('p.red'); // 從Swift的父節點開始向上查找,直到找到某個符合條件的節點並返回
對於位於同一層級的節點,可以通過
next()
和
prev()
方法,例如:
當我們已經拿到
Swift
節點后:
1 var swift = $('#swift');
2 swift.next(); // Scheme
3 swift.next('[name=haskell]'); // Haskell,因為Haskell是後續第一個符合選擇器條件的節點
4 swift.prev(); // Python
5 swift.prev('.js'); // JavaScript,因為JavaScript是往前第一個符合選擇器條件的節點
過濾
和函數式編程的map、filter類似,jQuery對象也有類似的方法。
filter()
方法可以過濾掉不符合選擇器條件的節點:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
或者傳入一個函數,要特別注意函數內部的
被綁定為DOM對象,不是jQuery對象:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var arr = langs.map(function () {
3 return this.innerHTML;
4 }).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
map()
方法把一個jQuery對象包含的若干DOM節點轉化為其他對象:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var arr = langs.map(function () {
3 return this.innerHTML;
4 }).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
此外,一個jQuery對象如果包含了不止一個DOM節點,
first()
、
last()
和
slice()
方法可以返回一個新的jQuery對象,把不需要的DOM節點去掉:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var js = langs.first(); // JavaScript,相當於$('ul.lang li:first-child')
3 var haskell = langs.last(); // Haskell, 相當於$('ul.lang li:last-child')
4 var sub = langs.slice(2, 4); // Swift, Scheme, 參數和數組的slice()方法一致
練習
對於下面的表單:
1 <form id="test-form" action="#0" onsubmit="return false;">
2 <p><label>Name: <input name="name"></label></p>
3 <p><label>Email: <input name="email"></label></p>
4 <p><label>Password: <input name="password" type="password"></label></p>
5 <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
6 <p><label>City: <select name="city">
7 <option value="BJ" selected>Beijing</option>
8 <option value="SH">Shanghai</option>
9 <option value="CD">Chengdu</option>
10 <option value="XM">Xiamen</option>
11 </select></label></p>
12 <p><button type="submit">Submit</button></p>
13 </form>
輸入值后,用jQuery獲取表單的JSON字符串,key和value分別對應每個輸入的name和相應的value,例如:
{"name":"Michael","email":...}
1 'use strict';
2 var json = null;
3 ----
4 json = ???;
5 ----
6 // 顯示結果:
7 if (typeof(json) === 'string') {
8 alert(json);
9 }
10 else {
11 alert('json變量不是string!');
12 }
通常情況下選擇器可以直接定位到我們想要的元素,但是,當我們拿到一個jQuery對象后,還可以以這個對象為基準,進行查找和過濾。
最常見的查找是在某個節點的所有子節點中查找,使用
find()
方法,它本身又接收一個任意的選擇器。例如如下的HTML結構:
<!-- HTML結構 -->
<ul class="lang">
<li class="js dy">JavaScript</li>
<li class="dy">Python</li>
<li id="swift">Swift</li>
<li class="dy">Scheme</li>
<li name="haskell">Haskell</li>
</ul>
用
find()
查找:
var ul = $('ul.lang'); // 獲得<ul>
var dy = ul.find('.dy'); // 獲得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 獲得Swift
var hsk = ul.find('[name=haskell]'); // 獲得Haskell
如果要從當前節點開始向上查找,使用 parent() 方法:
1 var swf = $('#swift'); // 獲得Swift
2 var parent = swf.parent(); // 獲得Swift的上層節點<ul>
3 var a = swf.parent('p.red'); // 從Swift的父節點開始向上查找,直到找到某個符合條件的節點並返回
對於位於同一層級的節點,可以通過
next()
和
prev()
方法,例如:
當我們已經拿到
Swift
節點后:
1 var swift = $('#swift');
2 swift.next(); // Scheme
3 swift.next('[name=haskell]'); // Haskell,因為Haskell是後續第一個符合選擇器條件的節點
4 swift.prev(); // Python
5 swift.prev('.js'); // JavaScript,因為JavaScript是往前第一個符合選擇器條件的節點
過濾
和函數式編程的map、filter類似,jQuery對象也有類似的方法。
filter()
方法可以過濾掉不符合選擇器條件的節點:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
或者傳入一個函數,要特別注意函數內部的
this
被綁定為DOM對象,不是jQuery對象:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var arr = langs.map(function () {
3 return this.innerHTML;
4 }).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
map()
方法把一個jQuery對象包含的若干DOM節點轉化為其他對象:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var arr = langs.map(function () {
3 return this.innerHTML;
4 }).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
此外,一個jQuery對象如果包含了不止一個DOM節點,
first()
、
last()
和
slice()
方法可以返回一個新的jQuery對象,把不需要的DOM節點去掉:
1 var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2 var js = langs.first(); // JavaScript,相當於$('ul.lang li:first-child')
3 var haskell = langs.last(); // Haskell, 相當於$('ul.lang li:last-child')
4 var sub = langs.slice(2, 4); // Swift, Scheme, 參數和數組的slice()方法一致
練習
對於下面的表單:
1 <form id="test-form" action="#0" onsubmit="return false;">
2 <p><label>Name: <input name="name"></label></p>
3 <p><label>Email: <input name="email"></label></p>
4 <p><label>Password: <input name="password" type="password"></label></p>
5 <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
6 <p><label>City: <select name="city">
7 <option value="BJ" selected>Beijing</option>
8 <option value="SH">Shanghai</option>
9 <option value="CD">Chengdu</option>
10 <option value="XM">Xiamen</option>
11 </select></label></p>
12 <p><button type="submit">Submit</button></p>
13 </form>
輸入值后,用jQuery獲取表單的JSON字符串,key和value分別對應每個輸入的name和相應的value,例如:
{"name":"Michael","email":...}
1 'use strict';
2 var json = null;
3 ----
4 json = ???;
5 ----
6 // 顯示結果:
7 if (typeof(json) === 'string') {
8 alert(json);
9 }
10 else {
11 alert('json變量不是string!');
12 }
覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!
以上是脚本宝典为你收集整理的js實例教程-js的查找和過濾方法教程全部内容,希望文章能够帮你解决js實例教程-js的查找和過濾方法教程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。