Guest, register

Selecting JavaScript HTML Elements Faster with jQuery There are some simple JavaScript example codes in this free HTML JavaScript tutorial that guide you select the JavaScript HTML elements, HTML DOM elements faster with jQuery framework; by simple object extending and playing nicely with 3rd party objects.

Very cool and helpful JavaScript tip to be better in JavaScript coding.

Label: JavaScript HTML Element, HTML DOM element, selecting

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

After a bit of prodding around I've not only found out that selecting JavaScript objects and arrays with jQuery is fully supported, but there are also some potential use cases! It all started a couple of weeks ago when I thought it would be cool to bind custom events to actual JavaScript objects.

var foo = {};
$( foo ).bind( "fireOne", function({
    alert( "event is go!" );
$( foo ).trigger( "fireOne" );

And lo and behold, it worked. Not only with .bind and .trigger, but also with .data and inside plugins. Too weird to be true, I fired off a question to the jQuery Dev list where Mr John Resig himself confirmed:

It was unintentional - way back in the day - but we've come to embrace it. Expect those aforementioned methods (bind / unbind and data) to continue to work on plain JavaScript objects.

Cool but why? And can we do anything really stupid with it? The first thing I had to try was $($). But of course, that's dumb, because typeof jQuery == function. And functions get executed as shortcuts to the ready function... so the interpreter spits the dummy with Error: too much recursion. Naturally. So next up, how about this? typeof jQuery.cache == Object! Ha ha! How about storing data against the object that stores data? Sure thing! $( $.cache ).data( "butWhy", 1234 ) works a treat. But, er. anyway...

Right-o. Is there any useful purpose for all this? I'm sure there's plenty. In fact, there's on thing that is in jQuery already. The $.extend method lets you mash two objects together (though the argument for the second needs to wrapped as jQuery object too). Let's make a simple version of that.

Simple object extending

Here's an example of how we could do a "shallow extend" with a plugin. We'll set up a shallow plugin that copies all the top level properties off one object on to the selected one, and use another plugin to log out all the properties so we can test it worked:

$.fn.shallow = function( obj ){
	return this.each( function(){
		for ( name in obj ) {
			if( this[ name ] === undefined ){
				this[ name ] = obj[ name ];
$.fn.log = function(){
	return this.each(function(){
		for ( name in this ) {
			console.log( name, this[ name ] );

Next, we'll set up a couple of objects and mash them together with our plugins:

var one = {
	name: "I'm one"
var two = {
	name: "I'm two",
	jump: function(){}

$( one ).shallow( two ).log();

And the console will spit out { name: "I'm one", jump: function }. Which is pretty snazzy, but still pretty useless. The only place where I think you could argue in favour of this technique is if the wrapped code was "DOM specific" stuff, or where it acted as kind of a bridge between 3rd party objects...

Playing nicely with 3rd party objects

The weekend after I found out about wrapping objects I fell over a (perhaps) reasonable use case for them. It was 4.00am at the first #govhack event and the team I was working with were using Bing maps to plot some data as map markers. When the user clicked on the marker, an event would be fired so you'd know which marker was clicked - but not which of our custom JavaScript objects that marker related to! Hmmm. It's 4.00am... is this realllly a use case? I didn't know, but did it anyway.

The map API gives you back a "pin" object that contains information about the marker. I just attached the custom point object to the marker itself. Because it uses jQuery's cache, there is no danger of overwriting any of the 3rd parties properties - we don't change their object at all.

var pin = new VEShape( VEShapeType.Pushpin, latLong ); "point", this );

map.AttachEvent( "onclick", shapeInfo );
shapeInfo : function( e ){
	shape = map.GetShapeByID(e.elementID);
	var point = $(shape).data("point");

When a click event is caught, we can grab the data back! Very handy!

So there you go. Perhaps it's not so crazy after all. I still think there is a "killer" idea in there waiting to be discovered. It's a pity that functions get shortcutted and exectued in jQuery, else we could build some crazy decorators and interface systems that wouldn't make any sense. Ah well.
Save up to 630$ when buy new iPhone 15
Free Airdrops to Claim, Share Up to $150,000 per Project
Open tool hub for free to use by any one for every one with hundreds of tools,,,
Talk to ChatGPT by your mother language
Generate creative images automatically with AI
Render creative video automatically with AI

JavaScript by day

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web