提高您技能的 14 个 jQuery 技巧、提醒和最佳实践

$someDiv
  .attr('class', 'someClass')
  .hide()
  .html('new stuff');

var someDiv = $('#someDiv');
someDiv.hide();

var someDiv = $('#someDiv').hide();

// Rough idea of how it works
 ['#someDiv, 'p'];

$('.someElements', '#someContainer').hide();

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
   return jQuery( context ).find( selector );
}

$('#someAnchor').click(function() {
	// Bleh
	alert( $(this).attr('id') );
});

	$('#elem').hide();
	$('#elem').html('bla');
	$('#elem').otherStuff();

	// This works better
	$('#elem')
	  .hide()
	  .html('bla')
	  .otherStuff();

	// Or this, if you prefer for some reason.
	var elem = $('#elem');
	elem.hide();
	elem.html('bla');
	elem.otherStuff();

$(document).ready(function() {
	// let's get up in heeya
});

$(function() {
	// let's get up in heeya
});

// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
	return rootjQuery.ready( selector );
}

var j = jQuery.noConflict();
// Now, instead of $, we use j. 
j('#someDiv').hide();

// The line below will reference some other library's $ function.
$('someDiv').style.display = 'none';

(function($) {
	// Within this function, $ will always refer to jQuery
})(jQuery);

jQuery(document).ready(function($) {
 // $ refers to jQuery
});

// $ is either undefined, or refers to some other library's function.

// jQuery's each method source
	each: function( object, callback, args ) {
		var name, i = 0,
			length = object.length,
			isObj = length === undefined || jQuery.isFunction(object);

		if ( args ) {
			if ( isObj ) {
				for ( name in object ) {
					if ( callback.apply( object[ name ], args ) === false ) {
						break;
					}
				}
			} else {
				for ( ; i < length; ) {
					if ( callback.apply( object[ i++ ], args ) === false ) {
						break;
					}
				}
			}

		// A special, fast, case for the most common use of each
		} else {
			if ( isObj ) {
				for ( name in object ) {
					if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
						break;
					}
				}
			} else {
				for ( var value = object[0];
					i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {}
			}
		}

		return object;
	}

someDivs.each(function() {
	$('#anotherDiv')[0].innerHTML += $(this).text();
});

var someDivs = $('#container').find('.someDivs'),
      contents = [];

someDivs.each(function() {
	contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

var someUls = $('#container').find('.someUls'),
	frag = document.createDocumentFragment(),
	li;
	
someUls.each(function() {
	li = document.createElement('li');
	li.appendChild( document.createTextNode(this.innerHTML) );
	frag.appendChild(li);
});

$('#anotherUl')[0].appendChild( frag );

getJSON: function( url, data, callback ) {
	return jQuery.get(url, data, callback, "json");
}

get: function( url, data, callback, type ) {
	// shift arguments if data argument was omited
	if ( jQuery.isFunction( data ) ) {
		type = type || callback;
		callback = data;
		data = null;
	}

	return jQuery.ajax({
		type: "GET",
		url: url,
		data: data,
		success: callback,
		dataType: type
	});
}

$.ajax({
	type: 'GET',
	url : 'path/to/json',
	data : yourData,
	dataType : 'json',
	success : function( results ) {
		console.log('success');
	})
});

var anchor = document.getElementById('someAnchor');
 //anchor.id
// anchor.href
// anchor.title
// .etc

	// Fails
	var id = $('#someAnchor').id;

// OPTION 1 - Use jQuery
var id = $('#someAnchor').attr('id');

// OPTION 2 - Access the DOM element
var id = $('#someAnchor')[0].id;

// OPTION 3 - Use jQuery's get method
var id = $('#someAnchor').get(0).id;

// OPTION 3b - Don't pass an index to get
anchorsArray = $('.someAnchors').get();
var thirdId = anchorsArray[2].id;

// Set header so the called script knows that it's an XMLHttpRequest
// Only send the header if it's not a remote XHR
if ( !remote ) {
	xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}

function isXhr() {
  return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}

window.jQuery = window.$ = jQuery;

<!-- Grab Google CDN jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

<script>
	$('p:first').data('info', 'value'); // populates $'s data object to have something to work with
	
	$.extend(
		jQuery.expr[":"], {
			block: function(elem) {
				return $(elem).css("display") === "block";
			},
			
			hasData : function(elem) {				
				return !$.isEmptyObject( $(elem).data() );
			}
		}
	);
	
	$("p:hasData").text("has data"); // grabs paras that have data attached
	$("p:block").text("are block level"); // grabs only paragraphs that have a display of "block"
</script>

$('#someElement').hover(function() {
  // mouseover
}, function() {
 // mouseout
});

$('#someElement').hover(function() {
  // the toggle() method can be used here, if applicable
});

$('<a />')
  .attr({
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
  });

$('</a>', {
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
});