Last night I jumped out the bed with a blurry idea of what an implementation of a SQL-like query would look like.
I booted my computer and had a look at jQuery's code to see how it was actually querying the DOM.

For those who don't already know about it, SQL stands for Structured Query Language and is designed to abstract operations required to retrieve data stored into databases.

It has 3 main operations you can use to run queries : FROM, SELECT and WHERE, that are used in this way : "FROM some_table SELECT some_column WHERE another_column=some_value".

some_table could be a table where you store, for instance, information about users of you website, lets call it users_table. It will be holding data like user's email, login, password, username, ... for example.

Then, when you later need to pull a set of information or all the data related to a given user (assuming you know his email, let's say foo@bar.com ), you will query you database using SQL like this : "FROM users_table SELECT login, password WHERE email='foo@bar.com'".
This will retrieve the login and password from the list of entries in users_table for the specific user whose email is 'foo@bar.com'.

This is a rough presentation of what SQL is about, you may make a search on Google to find more information.

Coming back to jQuery, I was wondering if this approach of manipulating data could be applied to DOM elements (in a HTML webpage) in some way like this :

var myQuery = $.select("a").from("body").where("href^='http://'")

.. and have it pull all links descending from the body element and which href attribute starts whith "htt://".
myQuery would then be jQuery object you can then be manipulated in the usual way. Adding a CSS class to all of them would be done this way :

myQuery.addClass('selected');

For this job to be possible, I extended jQuery, adding from, select and where methods.
I also added a get method by which you tell "I am done specifying my query, now you can run it !", which is equivalent to hitting return key in a command line SQL program or calling mysql_query in PHP.

The select method takes a css selector string as unique argument, and should be called first. It stores the selector for subsequent use by get.

Same as select, the from method also stores the given selector.

This implementation of JQL expects one selector for select and from, and as much calls to where as you want, enabling you to filter content through different attributes like width, height, ...

jQuery.extend({

  select : function(selector){
     this.jql_select = selector || "*";
     this.jsql_from = "body";
     this.jsql_where = "";

     return this;
  },

  from : function(selector){
     this.jsql_from  = selector || "body";

     return this;
  },

  where : function(condition){
     switch (typeof condition)
     {
     case 'string':
        this.jsql_where  = (this.jsql_where||"")+"[" + condition + "]";
     break;

     case 'object':
        var str_filter = "";

        jQuery.each(condition, function(key, value){
           if(jQuery.inArray(value[0], ["=", "!=", "^=", "$=", "*="]) == -1)
           {
              alert("unknown where compare operator : "+value[0]);
           }
           else if(jQuery.inArray(key, ["width", "height"]) == -1)
           {
              alert("unknown where attribute : "+value[1]);
           }else{
              str_filter += key.toString()+value[0]+value[1];
           }
        });

        this.jsql_where  = (this.jsql_where||"")+"[" + str_filter + "]";
     break;
     }

     return this;
  },

  get : function(){
     return jQuery(this.jql_select, this.jsql_from).filter(this.jsql_where);
  }
})

Here is an example of how you can call these functions :

var elements =

jQuery.select("*")
.from("body")
.where("width=200") // equivalent to .where({width : ["=", 200]})
.get();

console.log(elements.length+" elements where returned");
console.log(elements.attr("id"));

Of course, you can imagine (and do !) extending with conditions like ">", ">=", "<" and "<=". I think you'll need to loop through the jQuery set after selecting and test each of such conditions. As a conclusion I would like to point out the fact that this is not an improvement to jQuery. It rather tries to showcase how easy it is to implement a SQL-like paradigm in jQuery. I hope you'll enjoy reading this post.
Coming next ..
Next time we will be talking about how to transpose a html table, turning it from horizontal to vertical, and vice versa, with jQuery of course ... keep tuned !