├── .gitignore
├── bower.json
├── test
├── html
│ └── main.html
└── main.js
├── package.json
├── src
└── 2bux.js
├── LICENSE
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "2bux",
3 | "version": "0.2.0",
4 | "homepage": "https://github.com/incompl/2bux",
5 | "description": "because less is more",
6 | "main": "src/2bux.js",
7 | "moduleType": [
8 | "amd",
9 | "globals"
10 | ],
11 | "authors": [
12 | "Greg Smith"
13 | ],
14 | "license": "MIT",
15 | "ignore": [
16 | "**/*",
17 | "!LICENSE",
18 | "!/src/2bux.js"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/test/html/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Web-Site
5 |
6 |
7 |
8 | Hello!
9 | Things:
10 |
11 | - Thing 1
12 | - Thing 2
13 | - Thing 3
14 |
15 | Stuff:
16 |
17 | - Stuff 1
18 | - Stuff 2
19 | - Stuff 3
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "2bux",
3 | "version": "0.2.0",
4 | "description": "because less is more",
5 | "main": "src/gagaquery.js",
6 | "directories": {
7 | "test": "test"
8 | },
9 | "scripts": {
10 | "test": "nodeunit test"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/incompl/2bux.git"
15 | },
16 | "author": "Greg Smith",
17 | "license": "MIT",
18 | "bugs": {
19 | "url": "https://github.com/incompl/2bux/issues"
20 | },
21 | "devDependencies": {
22 | "phantom": "~0.6.3",
23 | "connect": "~2.19.6"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/2bux.js:
--------------------------------------------------------------------------------
1 | /* global define,document */
2 |
3 | (function (root, factory) {
4 | if (typeof define === 'function' && define.amd) {
5 | // AMD. Register as an anonymous module.
6 | define([], factory);
7 | }
8 | else {
9 | // Browser globals
10 | root.$ = factory();
11 | root.$$ = root.$.$$;
12 | }
13 | }(this, function () {
14 |
15 | var $ = function(selector, context) {
16 | return (context || document).querySelector(selector);
17 | };
18 |
19 | var $$ = function(selector, context) {
20 | var nl = (context || document).querySelectorAll(selector);
21 | return Array.prototype.slice.call(nl);
22 | };
23 |
24 | $.$ = $;
25 | $.$$ = $$;
26 |
27 | return $;
28 |
29 | }));
30 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Greg
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/test/main.js:
--------------------------------------------------------------------------------
1 | /* jshint node:true */
2 | /* global $,$$ */
3 |
4 | var phantom = require('phantom');
5 | var connect = require('connect');
6 | var http = require('http');
7 |
8 | var server;
9 |
10 | exports.setUp = function(callback) {
11 | var app = connect().use(connect.static('.'));
12 | server = http.createServer(app).listen(3000);
13 | callback();
14 | };
15 |
16 | exports.tearDown = function(callback) {
17 | server.close();
18 | callback();
19 | };
20 |
21 | function phantomTest(test, expected, evaluate) {
22 | phantom.create(function(ph) {
23 | ph.createPage(function(page) {
24 | page.open('http://localhost:3000/test/html/main.html', function(result) {
25 | page.evaluate(evaluate, function(result) {
26 | test.equal(result, expected);
27 | ph.exit();
28 | test.done();
29 | });
30 | });
31 | });
32 | });
33 | }
34 |
35 | exports.$ = function(test) {
36 | phantomTest(test, 'Hello!', function() {
37 | return $('h1').innerText;
38 | });
39 | };
40 |
41 | exports.$$ = function(test) {
42 | phantomTest(test, 6, function() {
43 | return $$('li').length;
44 | });
45 | };
46 |
47 | exports.$withContext = function(test) {
48 | phantomTest(test, 'Stuff 1', function() {
49 | var stuffContainer = $('#stuff');
50 | var stuffUnit = $('li', stuffContainer);
51 | return stuffUnit.innerText;
52 | });
53 | };
54 |
55 | exports.$$withContext = function(test) {
56 | phantomTest(test, 3, function() {
57 | var stuffContainer = $('#stuff');
58 | var stuff = $$('li', stuffContainer);
59 | return stuff.length;
60 | });
61 | };
62 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 2bux
2 |
3 | a terse dom selection api
4 |
5 | ## What is it
6 |
7 | It's a tiny little napkinfull of code that lets you omit jQuery without going insane. It's literally just [document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector) / [document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll) but the latter returns an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) instead of a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) and both have an extra optional `context` argument.
8 |
9 | ## Why
10 |
11 | * Becuase `document.querySelectorAll` is too long to type
12 | * Because `NodeList` doesn't have [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
13 | * Because I have become accustomed to terse code
14 |
15 | Would you rather write this:
16 |
17 | ```javascript
18 | var divsNodeList = document.querySelectorAll('div');
19 | var divsArray = Array.prototype.slice.call(divsNodeList);
20 | divsArray.forEach(function(div) {
21 | console.log(div.innerText);
22 | });
23 | ```
24 |
25 | or this?
26 |
27 | ```javascript
28 | $$('div').forEach(function(div) {
29 | console.log(div.innerText);
30 | });
31 | ```
32 |
33 | ## Can't I just use jQuery?
34 |
35 | Yes! In fact, you definitely want to use jQuery if you want compatibility with older browsers and/or all the million other cool things that jQuery provides. If all you want is to query the DOM and you're only needing browsers that support it natively, you shouldn't have to use jQuery just to get a humane API. That's where 2bux comes in.
36 |
37 | ## How big is it?
38 |
39 | <1 kb unminified
40 |
41 | ## Installation
42 |
43 | Using [Bower](http://bower.io/):
44 |
45 | ```
46 | bower install 2bux
47 | ```
48 |
49 | (you can also just grab the code [here](https://github.com/incompl/2bux/tree/master/src))
50 |
51 | Supports both [AMD](http://requirejs.org/docs/whyamd.html) and browser globals using [UMD](https://github.com/umdjs/umd/blob/master/amdWeb.js).
52 |
53 | The `$` and `$$` variables are placed in your global scope unless you are using AMD.
54 |
55 | With AMD, to get both `$` and `$$`, you should do this:
56 |
57 | ```javascript
58 | var $ = require("2bux"), $$ = $.$$;
59 | ```
60 |
61 | ## API
62 |
63 | ```javascript
64 | $(selector, context); // returns a single element
65 | ```
66 |
67 | ```javascript
68 | $$(selector, context); // returns an array of elements
69 | ```
70 |
71 | * `selector` is a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
72 | * `context` is an optional DOM element (default `document`). Only children of `context` are queried. It's as if you had called `querySelector` or `querySelectorAll` on that DOM element rather than on the `document` object.
73 |
74 | ## Examples
75 |
76 | ```javascript
77 | // get an element
78 | var element = $('#special');
79 | console.log(element.innerText);
80 |
81 | // get an array of elements
82 | var divs = $$('div');
83 | console.log(divs.length);
84 |
85 | // iterate over an array
86 | $$('div').forEach(function(div) {
87 | console.log(div.innerText);
88 | });
89 |
90 | // get children of an element
91 | var parent = $('#foo');
92 | var children = $$('.bar', parent);
93 | ```
94 |
95 | ## Testing
96 |
97 | * `npm install`
98 | * `sudo npm install nodeunit -g`
99 | * `nodeunit test`
100 |
--------------------------------------------------------------------------------