'+doc.title+'
'+doc.body+'
20 |
21 | Install
22 | -------
23 |
24 | $ npm install nodeQuery
25 |
26 | Usage
27 | -----
28 | Create a file to serve up jquery and nquery and put it in /public
29 |
30 | ```html
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | ````
39 |
40 | Create an app.js file
41 |
42 | ```javascript
43 |
44 | var Express = require('express')
45 | , dnode = require('dnode')()
46 | , nQuery = require('../')
47 | , express = Express.createServer()
48 |
49 | var app = function ($) {
50 | $.on('ready', function () {
51 | $('body').append('Hello World')
52 | })
53 | }
54 |
55 | nQuery
56 | .use(app)
57 |
58 | express
59 | .use(nQuery.middleware)
60 | .use(Express.static(__dirname + '/public'))
61 | .listen(3000)
62 |
63 | dnode
64 | .use(nQuery.middleware)
65 | .listen(express)
66 |
67 |
68 | ````
69 |
70 | Visit the html file you created to see "Hello World"
71 |
72 |
73 | Methods
74 | -------
75 |
76 | Sample usage of methods on the server:
77 |
78 | ```javascript
79 |
80 | nQuery
81 | .use(function ($) {
82 |
83 | // similar to $(document).ready, this function
84 | // is called after the client DOM is ready, a callback is passed
85 | // aswell, which calls nQuery.ready on the browser
86 | $.on('ready', function (callback) {
87 |
88 | $('body').append('Click me, Im a binding.')
89 |
90 | $('a.link').live('click', function () {
91 | $('a.link').html('You clicked it!')
92 | });
93 |
94 | $('body').append('Hover me.')
95 |
96 | $('.hover').live('mouseover', function () {
97 | $('.hover').html('hover event')
98 | });
99 |
100 | // bind an event to an element which already exists in the dom
101 | $('.hover').bind('mouseout', function () {
102 | $('.hover').html('Im back again!')
103 | });
104 |
105 | // bind an event to an element and any future elements that match the selector
106 | $('div').live('swipe', function () {
107 | $('div').html('swipe event')
108 | });
109 |
110 | // unbind an event
111 | $('.hoverable').unbind('mouseout', function () {
112 | $('.hoverable').html('Im back again!')
113 | });
114 |
115 | // get the name of the selector (useful to determine if html element exists)
116 | $('body').get(console.log)
117 |
118 | // get some other information about an element
119 | $('body').size(console.log)
120 | $('body').index(console.log)
121 | $('body').height(console.log)
122 | $('body').width(console.log)
123 |
124 | // set the html contents of the element(s)
125 | $('body').html('')
126 |
127 | // set the text contents of the element(s)
128 | $('div').text('Hello World')
129 |
130 | // add html (or a DOM Element) after the element
131 | $('div').after('->>')
132 |
133 | // add html (or a DOM Element) before the element
134 | $('div').before('<<-')
135 |
136 | // add html (or a DOM Element) at the beginning of the element contents
137 | $('div').prepend('Clock:')
138 |
139 | // add html (or a DOM Element) at the end of the element contents
140 | $('div').append('is the current time')
141 |
142 | // reverse of append
143 | $('div').appendTo('.app')
144 |
145 | // reverse prepend
146 | $('div').prependTo('.app')
147 |
148 | // replace element with html
149 | $('div').replaceWith('')
150 |
151 | // forces elements to be hidden
152 | $('div').hide()
153 |
154 | // forces elements to be displayed
155 | $('div').show()
156 |
157 | // set a CSS property
158 | $('div').css('background-color', '#eee')
159 |
160 | // set an attribute
161 | $('div').attr('background-color', '#eee')
162 |
163 | // get an attribute
164 | $('a').attr(console.log)
165 |
166 | // serialize a form or list of elements
167 | $('form').serialize(console.log)
168 |
169 | // call "nQuery.ready()" on the browser
170 | callback()
171 | })
172 | })
173 |
174 |
175 | ````
176 |
177 | Events
178 | -------
179 |
180 | swipe swipeLeft swipeRight swipeUp swipeDown doubleTap tap longTap focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout change select keydown keypress keyup error
181 |
182 |
183 | Notes
184 | -----
185 | Remember that just because you can update your DOM from the server doesnt mean
186 | you will always want to. A click or swipe event being bound to the server
187 | can be amazingly responsive, but if the event only changes the display of your
188 | app (i.e. color, size) then it most likely still belongs on the client to
189 | reduce the server load. There is a ready function in nQuery similar to
190 | $(document).ready() for the client as well as the server.
191 |
192 | ```html
193 |
194 |
195 | '+doc.body+'
| t |
@{{from_user}}: {{text}}