Slide 1

Slide 1 text

jQuery Javascript CSS selector 2017/06/01 LT

Slide 2

Slide 2 text

5

Slide 3

Slide 3 text

Test Result Average ?? A 87% B 78% Z 81% Test Result Average ?? A 87% B 78% ... ... Z 81%

Slide 4

Slide 4 text

Test Result Average ?? A 87% B 78% Z 81% Test Result Average ?? A 87% B 78% ... ... Z 81% chrome console ↑

Slide 5

Slide 5 text

Test Result Average ?? A 87% B 78% C 81% 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

Slide 6

Slide 6 text

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);

Slide 7

Slide 7 text

jQuery

Slide 8

Slide 8 text

XPath !!!

Slide 9

Slide 9 text

XML Path Language (XPath) => https://www.w3.org/TR/xpath/

Slide 10

Slide 10 text

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 >> 87% >>

Slide 11

Slide 11 text

CSS selector ... jQue..

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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); };

Slide 14

Slide 14 text

Selectors API Element.querySelectorAll(DOMString selectors); ↑ CSS selectors https://www.w3.org/TR/css3‑selectors/

Slide 15

Slide 15 text

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)' >> 87% >>

Slide 16

Slide 16 text

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]

Slide 17

Slide 17 text

document.querySelectorAll('table, input:checked')

Slide 18

Slide 18 text

jQuery 1. getElementById() 2. querySelectorAll() 3. sizzle jQuery

Slide 19

Slide 19 text

No content