Summary of common methods on how to better use jQuery

The fact that jQuery is so easy to use has a lot to do with its use of syntax compatible with CSS selectors when obtaining objects. After all, everyone is familiar with CSS selectors (you can read about CSS selectors in ten minutes) CSS selector), but it is more powerful in that it is compatible with CSS3 selectors, and even has a lot more.

Selector

After you have the basics of CSS selectors, it is very simple to look at jQuery selectors.

$('.class1.class2')Match elements whose class name contains both class1 and class2$("E:first")The first of all E$("E:last")The last of all E##$("E:not(selector)")##$("E:even")                                                                                                                     #$ ("E: ODD") ## all in all E. All elements in E with index nAll elements in E with index greater than nAll elements in E with index less than nSelect h1~h7 elementsSelect the element that is performing animation effectContent filter$('E:contains(value)')$('E:empty')The element with F in the sub-element, $('p:has(a)'): p##$('E: parent')The parent element is the element of E, $('td: parent'): the parent element is the element of td$('E:hidden')All hidden E$('E:visible')All visible E$('E[attr]')E$( 'E[attr=value]')E$('E[attr !=value]') Attribute attr!=value's E##$('E:nth-child(n)')E’s nth child node$('E:nth-child(3n+1)')E’s index matches 3n+1 The child node of the expression$('E:nth-child(even)')The child node whose index is an even number$('E:nth-child(odd)')The child node whose index is an odd number$('E: first-clild')The first child node of all E$('E:last-clild')All the first child nodes of E The last child node$('E:only-clild')The child node of E that has only the only child node$('E:type')Specific type of input$(':checked')The selected checkbox or radio$('option: selected') Selected option

Basic selector
$('*' )	Match all elements on the page
$('#id')	id selector
$('.class')	Class selector
$('element')	Tag selector
Composition/Level Selector
$('E,F')	Multiple element selector, separated by ",, matches element E or element F
$('E F')	Descendant selector , separated by spaces, matches all descendants of the E element (not just child elements, children Elements recurse downward) Element F
$(E>F)	Child element selector, separated by ">", matches all direct child elements of the E element
$('E+F')	directly adjacent selector, matches E The of after element and the of adjacent at the same level element F
$('E~F')	Ordinary adjacent selector (younger brother selector), matches the sibling element F after the E element (whether directly adjacent or not)
Basic filter selection Device
Filter E according to selector
	$("E:gt(n)")
	$("E:ll(n)")
	$(":header" )
	$("p:animated")
Elements whose content contains value
Elements whose content is empty	$('E:has(F)')
# containing the a tag
	Visual Selector
	Attribute filter selector
$('E[attr ^=value]')	Attribute attr starts with value's E
$('E[attr $=value]')	Attribute attr ends with value E
$('E[attr *=value]')	Attribute attr contains value E
$('E[attr][attr *=value]')	can be used together
Child element filter
Form element selector

Filtering method

.find(selector) Find each element of the collection Child node

$('li.item-ii').find('li').css('background-color', 'red');

.filter(selector) Filter the elements in the current collection

$('li').filter(':even').css('background-color', 'red');

Basic method

.ready(handler) Method executed after the document is loaded, different from window.onload

$(document).ready(function() {  // Handler for .ready() called.});

.each(function(index,element)) Traverse each element in the collection

$("li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});

jQuery.extend( target [, object1 ] [, objectN ] ) Merge objects

var object = $.extend({}, object1, object2);

The above is the detailed content of Summary of common methods on how to better use jQuery. For more information, please follow other related articles on the PHP Chinese website!