{"id":1714,"date":"2013-01-02T19:44:19","date_gmt":"2013-01-03T00:44:19","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=1714"},"modified":"2013-01-03T16:51:10","modified_gmt":"2013-01-03T21:51:10","slug":"how-jquery-css-selector-works","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2013\/01\/how-jquery-css-selector-works\/","title":{"rendered":"How jQuery CSS selector works"},"content":{"rendered":"<p>Diving into <a href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.js\">jQuery source code<\/a>, you&#8217;ll find attribution for [cci]Sizzle.js[\/cci] near the top. What is Sizzle? <a href=\"http:\/\/sizzlejs.com\/\">Sizzle<\/a> is jQuery&#8217;s <a href=\"http:\/\/blog.jquery.com\/2009\/01\/14\/jquery-13-and-the-jquery-foundation\/\">spinoff CSS selector engine<\/a>.<\/p>\n<p>jQuery is <a href=\"http:\/\/www.keyframesandcode.com\/resources\/javascript\/deconstructed\/\">optimized for easy DOM manipulation<\/a> and allows <a href=\"http:\/\/www.jquery-tutorial.net\/introduction\/method-chaining\/\">method chaining by returning the jQuery object<\/a>. This means that the [cci]jQuery[\/cci] (or [cci]$[\/cci] shorthand syntax) allows you to target DOM elements with CSS syntax.<\/p>\n<p>You can select a paragraph with the id &#8220;dino&#8221; in jQuery:<\/p>\n<p>[cc]$(&#8216;p#dino&#8217;)[\/cc]<\/p>\n<p>Pretty easy, right? How does jQuery do this?<\/p>\n<p><a href=\"http:\/\/blog.bigbinary.com\/2010\/02\/15\/how-jquery-selects-elements-using-sizzle.html\">BigBinary has a great article<\/a> walking through the process:<\/p>\n<ul>\n<li>If querySelectorAll works, use querySelectorAll. <\/li>\n<li>Else, use Sizzle.<\/li>\n<\/ul>\n<p>To use [cci]querySelectorAll[\/cci] instead of jQuery, you could use:<\/p>\n<p>[cc]document.querySelectorAll(&#8216;p#dino&#8217;)[\/cc]<\/p>\n<p>This goes to show that anything jQuery can do, core JavaScript can do (since jQuery is JavaScript). With that said, I would recommend jQuery over writing your own JavaScript from scratch as jQuery is highly tested for edge cases and offers amazing cross browser support.<\/p>\n<p><em><a href=\"http:\/\/www.rexfeng.com\/blog\/tag\/jquerywithoutjquery\/\">jQuery without jQuery<\/a> is a series that aims to open up the <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> black box. jQuery is just JavaScript, so you should feel comfortable  working at lower levels of abstraction and looking at the <a href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.js\">jQuery source code<\/a> written in JavaScript.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diving into jQuery source code, you&#8217;ll find attribution for [cci]Sizzle.js[\/cci] near the top. What is Sizzle? Sizzle is jQuery&#8217;s spinoff CSS selector engine. jQuery is optimized for easy DOM manipulation and allows method chaining by returning the jQuery object. This means that the [cci]jQuery[\/cci] (or [cci]$[\/cci] shorthand syntax) allows you to target DOM elements with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1029],"tags":[1018,1046,1052,1054,1055,1053],"class_list":["post-1714","post","type-post","status-publish","format-standard","hentry","category-programming","tag-css","tag-javascript","tag-jquerywithoutjquery","tag-js","tag-selector","tag-sizzle"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=1714"}],"version-history":[{"count":14,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1714\/revisions"}],"predecessor-version":[{"id":1728,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1714\/revisions\/1728"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=1714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=1714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=1714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}