Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 155 lines (117 sloc) 4.113 kb
ed95cb8 Dustin Diaz - additional CSS3 queries!
ded authored
1 Qwery - The Tiny Selector Engine
eeda159 Dustin Diaz rename again
ded authored
2 -----
ed95cb8 Dustin Diaz - additional CSS3 queries!
ded authored
3 Qwery is a small *blazing fast* query selector engine allowing you to select elements with CSS1|2|3 queries
e504f76 Dustin Diaz contexts can also be queries. more docs in readme
ded authored
4
5f3c6f5 Dustin Diaz - add `require` support
ded authored
5 ##Acceptable selectors
e504f76 Dustin Diaz contexts can also be queries. more docs in readme
ded authored
6
b01ce2e Dustin Diaz update readme text
ded authored
7 ``` css
8 basic
9 #foo {} id
10 .bar {} class
ed95cb8 Dustin Diaz - additional CSS3 queries!
ded authored
11 a#foo.bar {} element attribute combinations
b01ce2e Dustin Diaz update readme text
ded authored
12
13 attributes
14 #foo a[href] {} simple
15 #foo a[href=bar] {} attribute values
ed95cb8 Dustin Diaz - additional CSS3 queries!
ded authored
16 #foo a[lang|=en] {} subcodes
17 #foo a[title~=hello] {} attribute contains
b01ce2e Dustin Diaz update readme text
ded authored
18 #foo a[href^="http://"] {} attribute starts with
19 #foo a[href$=com] {} attribute ends with
20 #foo a[href*=twitter] {} attribute wildcards
ed95cb8 Dustin Diaz - additional CSS3 queries!
ded authored
21
22 descendants
23 #foo a {} all descendants
24 ul#list > li {} direct children
25
26 siblings
27 span ~ strong {} all adjacent
28 p + p {} immediate adjacent
b01ce2e Dustin Diaz update readme text
ded authored
29
30 combos
31 div,p {}
32
33 variations
34 #foo.bar.baz {}
ed95cb8 Dustin Diaz - additional CSS3 queries!
ded authored
35 div#baz.thunk a[-data-info*="hello world"] span + strong {}
b01ce2e Dustin Diaz update readme text
ded authored
36 #thunk[title$='huzza'] {}
d432fae Dustin Diaz - merge smallchanges
ded authored
37 ```
5b97557 Dustin Diaz update readme with more variations
ded authored
38
e504f76 Dustin Diaz contexts can also be queries. more docs in readme
ded authored
39 Contexts
40 -------
41 Each query can optionally pass in a context
42
d432fae Dustin Diaz - merge smallchanges
ded authored
43 ``` js
44 qwery('div', node); // existing DOM node or...
45 qwery('div', '#foo'); // another query
46 ```
e504f76 Dustin Diaz contexts can also be queries. more docs in readme
ded authored
47
1b493be Dustin Diaz document pseudo selectors in readme
ded authored
48 pseudo selector API
49 -------------------
50
51 Optionally, Qwery provides a [pseudo selector interface](https://github.com/ded/qwery/blob/master/src/pseudos.js) allowing you to extend into advanced CSS3 matchers. It looks like this:
52
53 ``` js
54 qwery.pseudos['first-child'] = function (el, val) {
55 var p;
56 return el.parentNode && (p = el.parentNode) && (childs = p.getElementsByTagName('*')) && childs[0] == el;
57 };
58 ```
59
60 To create a new pseudo matcher you must set a property on `qwery.psuedos` with a boolean method that is passed back a candidate element, and a value (if any). For example:
61
62 ``` js
63 qwery('#content p.surprise:foo(bar)')
64
65 qwery.pseudos.foo = function (el, val) {
66 // val == 'bar'
67 return el.getAttribute(val)
68 }
69 ```
70
2a21525 Dustin Diaz notes on browser support
ded authored
71 Browser Support
72 ---------------
b01ce2e Dustin Diaz update readme text
ded authored
73 Qwery attempts to stay up to date with Yahoo's [Grade A Browser Support](http://developer.yahoo.com/yui/articles/gbs) in addition to future browser candidates.
74
2a21525 Dustin Diaz notes on browser support
ded authored
75 - IE6, IE7, IE8, IE9
ed95cb8 Dustin Diaz - additional CSS3 queries!
ded authored
76 - Chrome 1 - 12
2a21525 Dustin Diaz notes on browser support
ded authored
77 - Safari 3, 4, 5
b01ce2e Dustin Diaz update readme text
ded authored
78 - Firefox 2, 3, 4, 5, Aurora
79 - Opera
eeda159 Dustin Diaz rename again
ded authored
80
510999f Dustin Diaz - dev environment cleanup
ded authored
81 Dev Env & Testing
e66c492 Dustin Diaz note on tests
ded authored
82 -----
c8b7382 Dustin Diaz update readme with Ender support
ded authored
83
510999f Dustin Diaz - dev environment cleanup
ded authored
84 $ npm install --dev
85 $ make
c8b7382 Dustin Diaz update readme with Ender support
ded authored
86 $ open tests/index.html
e66c492 Dustin Diaz note on tests
ded authored
87
43c22d0 F A T add querySelectorAll note
fat authored
88 Note
89 ----
b01ce2e Dustin Diaz update readme text
ded authored
90 Qwery uses <code>querySelectorAll</code> when available. All <code>querySelectorAll</code> default behavior then applies.
43c22d0 F A T add querySelectorAll note
fat authored
91
c8b7382 Dustin Diaz update readme with Ender support
ded authored
92 Ender support
93 -------------
9c686fd Dustin Diaz add readme notes on bean and bonzo
ded authored
94 Qwery is the recommended selector engine for [Ender](http://ender.no.de). If you don't have Ender, install it, and don't ever look back.
c8b7382 Dustin Diaz update readme with Ender support
ded authored
95
9c686fd Dustin Diaz add readme notes on bean and bonzo
ded authored
96 $ npm install ender -g
97
98 To include Query in a custom build of Ender you can include it as such:
99
5f3c6f5 Dustin Diaz - add `require` support
ded authored
100 $ ender build qwery[,mod2,mod3,...]
9c686fd Dustin Diaz add readme notes on bean and bonzo
ded authored
101
102 Or add it to an existing Ender installation
103
104 $ ender add qwery
105
d432fae Dustin Diaz - merge smallchanges
ded authored
106 Ender bridge additions
107 ---------
108 Assuming you already know the happs on Ender -- Qwery provides some additional niceties when included with Ender:
109
110 ``` js
59008c9 Dustin Diaz - add and() method to ender bridge
ded authored
111 // the context finder - find all p elements descended from a div element
d432fae Dustin Diaz - merge smallchanges
ded authored
112 $('div').find('p')
113
59008c9 Dustin Diaz - add and() method to ender bridge
ded authored
114 // join one set with another
115 $('div').and('p')
116
b4a2c9a Ray Waldin added context tests and example to readme
rwaldin authored
117 // test nodes against selectors
118 $('#foo').is('div.bar'); // => true if any nodes match
119
d432fae Dustin Diaz - merge smallchanges
ded authored
120 // element creation
121 $('<p>hello world</p>'); // => [HTMLParagraphElement "hello world"]
122 ```
9c686fd Dustin Diaz add readme notes on bean and bonzo
ded authored
123 Recommended sibling modules
124 ----------
d432fae Dustin Diaz - merge smallchanges
ded authored
125 In most cases, if you're hunting for a selector engine, you probably want to pair Qwery with a DOM module. In that case qwery pairs quite nicely with [Bonzo](https://github.com/ded/bonzo) (a DOM util) and [Bean](https://github.com/fat/bean) (an event util). Add them to your Ender installation as such:
9c686fd Dustin Diaz add readme notes on bean and bonzo
ded authored
126
127 $ ender -b qwery bonzo bean
128
129 Then write code like a boss:
130
d432fae Dustin Diaz - merge smallchanges
ded authored
131 ``` js
132 $('a.boosh')
133 .css({
134 color: 'red',
135 background: 'white'
136 })
137 .after('')
138 .bind({
139 'click.button': function () {
5f3c6f5 Dustin Diaz - add `require` support
ded authored
140 $(this).hide().unbind('click.button')
d432fae Dustin Diaz - merge smallchanges
ded authored
141 }
5f3c6f5 Dustin Diaz - add `require` support
ded authored
142 })
d432fae Dustin Diaz - merge smallchanges
ded authored
143 ```
c8b7382 Dustin Diaz update readme with Ender support
ded authored
144
bdc8944 Dustin Diaz update readme with qwery-mobile usage
ded authored
145 Qwery Mobile!
146 ------------
147 If you're building a Webkit (iPhone / Android / Chrome OS) application, you may be interested in qwery-mobile! Include this (instead of qwery) in your Ender build and get a full qwery interface for just 600 bytes :)
148
149 $ ender add qwery-mobile
150
1e49547 Dustin Diaz update readme
ded authored
151 Contributors
eeda159 Dustin Diaz rename again
ded authored
152 -------
8424bb3 Dustin Diaz update readme with proper links to contributors
ded authored
153 * [Dustin Diaz](https://github.com/ded/qwery/commits/master?author=ded)
154 * [Jacob Thornton](https://github.com/ded/qwery/commits/master?author=fat)
Something went wrong with that request. Please try again.