Query selecterの話

https://www.slideshare.net/ckazu/query-selecter

Transcript

1. jQuery Javascript CSS selector 2017/06/01 LT
3. <table id="score"> <thead> <tr> <th>Test <th>Result <tfoot> <tr> <th>Average <td>?? <tbody> <tr> <td>A <td>87% <tr> <td>B <td>78% <tr> <td>Z <td>81% </table> Test Result Average ?? A 87% B 78% ... ... Z 81%
4. <table id="score"> <thead> <tr> <th>Test <th>Result <tfoot> <tr> <th>Average <td>?? <tbody> <tr> <td>A <td>87% <tr> <td>B <td>78% <tr> <td>Z <td>81% </table> Test Result Average ?? A 87% B 78% ... ... Z 81% chrome console ↑
5. <table id="score"> <thead> <tr> <th>Test <th>Result <tfoot> <tr> <th>Average <td>?? <tbody> <tr> <td>A <td>87% <tr> <td>B <td>78% <tr> <td>C <td>81% </table> var table = document.getElementById("score"); var groups = table.tBodies; var rows = null; var cells = []; for (var i = 0; i < groups.length; i++) { rows = groups[i].rows; for (var j = 0; j < rows.length; j++) { cells.push(rows[j].cells[1]); } } console.log(cells); > (3) [td, td, td] Pure Javascript
6. jQuery > jQuery("#score > tbody > tr td:nth‐of‐type(2)") >> (3) [td, td, td, prevObject: r.fn.init(1)] > jQuery("#score > tbody > tr td:nth‐of‐type(2)").text() >> "87% >> 78% >> 81% >> " ※ #score > tbody > tr td + td OK var _j = document.createElement('script'); _j.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery. document.body.appendChild(_j);
7. jQuery
8. XPath !!!
9. XML Path Language (XPath) => https://www.w3.org/TR/xpath/
10. XPath > $x('//table/tbody/tr/td[count(preceding‐sibling::td) = 1]') >> (3) [td, td, td] > $x('//table/tbody/tr/td[count(preceding‐sibling::td) = 1]')[0 >> <td> 87% >> </td>
11. CSS selector ... jQue..
12. Selectors API by W3C http://www.w3.org/TR/2013/REC‑selectors‑api‑20130221/ Previous Versions: http://www.w3.org/TR/2012/PR‑selectors‑api‑20121213/ http://www.w3.org/TR/2012/WD‑selectors‑api‑20120628/ http://www.w3.org/TR/2009/CR‑selectors‑api‑20091222/ http://www.w3.org/TR/2008/WD‑selectors‑api‑20081114/ http://www.w3.org/TR/2007/WD‑selectors‑api‑20071221/ http://www.w3.org/TR/2007/WD‑selectors‑api‑20071019/ http://www.w3.org/TR/2006/WD‑selectors‑api‑20060926/ http://www.w3.org/TR/2006/WD‑selectors‑api‑20060525/
13. Selectors API partial interface Document { Element? querySelector(DOMString selectors); NodeList querySelectorAll(DOMString selectors); }; partial interface DocumentFragment { Element? querySelector(DOMString selectors); NodeList querySelectorAll(DOMString selectors); }; partial interface Element { Element? querySelector(DOMString selectors); NodeList querySelectorAll(DOMString selectors); };
14. Selectors API Element.querySelectorAll(DOMString selectors); ↑ CSS selectors https://www.w3.org/TR/css3‑selectors/
15. querySelectorAll() > document.querySelectorAll('#score > tbody > tr td:nth‐of‐type(2)' >> (3) [td, td, td] > document.querySelectorAll('#score > tbody > tr td:nth‐of‐type(2)' >> <td> 87% >> </td>
16. querySelectorAll() jQuery > jQuery("#score > tbody > tr td:nth‐of‐type(2)") >> (3) [td, td, td, prevObject: r.fn.init(1)] > document .querySelectorAll('#score > tbody > tr td:nth‐of‐type(2)') >> (3) [td, td, td]
17. document.querySelectorAll('table, input:checked')
18. jQuery 1. getElementById() 2. querySelectorAll() 3. sizzle jQuery