google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Chọn các đối tượng HTML nhanh hơn với jQuery Thông qua vài ví dụ mẫu JavaScript đơn giản trong bài viết này, bạn sẽ dễ dàng sử dụng thư viện jQuery để chọn các đối tượng HTML. Một thủ thuật khá ngắn ngọn nhưng cực kì hữu ích để viết mã JavaScript tốt hơn.


Nhãn: chọn đối tượng, đối tượng HTML

Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

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 );
pin.data( "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.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web