SQuery V0.3

A small "JQuery" immitation

by Lars Holm Jensen

HTML

<script src="https://dl.dropboxusercontent.com/u/4472595/SQueryV0.3.debug.js"></script>
<div class="testClass">Lorem ipsum</div>
<p>Some untouched text</p>
<div class="testClass hideme">dolor sit amet</div>
<div id="showme" style="display:none;">I was hidden!!</div>
<p class="deleteme">This should not be shown</p>
<p id="deleteme">Some undeleted text</p>
<p class="deleteme">This should not be shown</p>
<div id="container"></div>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<div id="container2">Lorem ipsum</div>

CSS

/*

Supported:
html, each, click, change, show, hide, remove, append
css, attr (get/set/remove)
ajax
html creation: S("<div><span>test</span></div>) -> elements

Maybe future:

val, tooltip
context: S(".myclass", container) -> select only inside container
taking js obects as parameters: S(window)
taking object literals as parameters in css, attr: S("div").css({color:'red','font-style':'italic'})

*/

JavaScript

//SQuery V0.3 : A small "JQuery" immitation
var S = createSQuery();

S('.testClass')
	.attr('lang', 'en')
		 ('title', 'Click me!!')
	.css('background-color', 'black')
		('color', 'white')
		('font-style','italic')
		('width', '100px')
		('height', '60px')
		('padding', '6px')
	.html("Inserted Text<br/>")
	.each(function (el) {
		var span = document.createElement("span");
		span.innerHTML = "<br/>Click Me!";
		el.appendChild(span);
	})
	.click(function (evt) {
		alert(this.className);
	});

S(".hideme").hide();

S("#showme").css("color", "red").show();

S('.testClass').css('font-style',undefined); //Removes font-style

if (S("#showme").css("color") == "red")
	S(".deleteme").remove();

S("#container").append(S(".testClass").nodes[0].cloneNode(true)).attr("id", "newtest");

var mydata = JSON.stringify({
	title : 'foo',
	body : 'bar',
	userId : 1
});

S("#newtest").click(function () {
	S.ajax("post", "http://jsonplaceholder.typicode.com/posts", mydata, function (data) {
		alert(JSON.stringify(data));
	}, function (data) {
		alert("Error: " + data);
	});
});

S("select").css("margin", "10px").change(function (e) {
	alert(e.srcElement.value)
});

S("#container2").append(S("<span style='color:blue;'>Created content</span>"));


//https://dl.dropboxusercontent.com/u/4472595/SQueryV0.3.min.js : ~2KB
//https://dl.dropboxusercontent.com/u/4472595/SQueryV0.3.debug.js
//************** SQuery source code start ****************

function createSQuery() {
	var EP = Element.prototype,
	CP = CSSStyleDeclaration.prototype;
	var aDOMFunc = [EP.removeAttribute, EP.setAttribute, CP.removeProperty, CP.setProperty];

	function set(bStyle, sProp, sVal) {
		var bSet = Boolean(sVal),
		fAction = aDOMFunc[bSet | bStyle << 1],
		aArgs = [].slice.call(arguments, 1, bSet ? 3 : 2),
		aNodeList = bStyle ? this.cssNodes : this.nodes;

		if (bSet && bStyle) {
			aArgs.push('');
		}
		for (
			var nItem = 0, nLen = this.nodes.length;
			nItem < nLen;
			fAction.apply(aNodeList[nItem++],...