jQuery Useful Built-in Functions Summary

1. css() --- get or set css properties

two kinds of syntax:

i. $('#foo').css('background', '#fff000', 'width', '100px');

ii. $('#foo').css({background: '#fff000', });     // original css syntax

 

2. text() --- get or set the value of an element

$('#foo').text('new text');

 

3. clone() --- copy an element

$('#foo').clone();

 

4. appendTo(), append() --- move an element to / be appended by an element (also changes the inheritance relationship between objects)

$('#foo').appendTo($('#bar'));  // is the same as

$('#bar').append($('#foo'));

 

5. insertAfter(), insertBefore(), etc --- for all kinds of insertion

 

6. eq() / get() --- used as filter to select an element in the selection (as jQuery object / DOM element)

$('#foo').eq(1).text('changed');  // change the text of the second element of a jQuery object '#foo'

$('#foo').get(1);  // get the the second element of '#foo' as a DOM element

 

 7. attr() --- get or add an Attribute of an element

$('#foo').attr('disable', 'str');  // ignore the second input parameter 'str' for get function, otherwise for adding

 

8. removeAttr() --- remove an Attribute of an element

$('#foo').removeAttr('checked');  // uncheck the check box

$('#foo').removeAttr('readonly');  // set the input field to be read-only

 

9. empty() --- remove all children of an object

$('#foo').empty();

 

10. setTimeout(function, int millisecond) --- call a function with delay

setTimeout(function(){alert('Time\'s up!')}, 1000);  // wait for 1s before executing the function 

 

11. find() --- selects all decsendents with conditions

$('#foo').find('.child'); // selects all children of '#foo' that have attribute [class = 'child']

 

12. size(), length --- returns an integer of the number of elements

// these two are for the same use, except when count the length of string or array, only the length is available.

 

13. animate(css, int millisecond) --- display css changes by animation

$('#foo').animate({width: 100px, margin: 120px}, 1000);  // the time defines the period of time that the animation uses

// for all css properties that can be animated, view "http://www.jb51.net/w3school/jquery/prop_length.htm"

 

14. filter() --- selects elements (not the children of whom, which is different from find() ) with conditions

$('#foo').filter(':odd');  // selects all elements of '#foo' with odd number of index

$('#foo').filter('.peer');  // selects all elements of '#foo' with attribute [class = 'peer']

 

15. html() --- get or set the innerHTML of an element

$('p').html('Yes, you are!');

Effect:   <p>I am an inner HTML!<\p>  ====>  <p>Yes, you are!<\p>  // this doesn't change the HTML file itself, but only changes the display

 

16. replace() --- replace text in string objects

stringObject.replace(/string to be replaced/, "string to replace");

// for detailed syntax of parameter of replace(), view http://www.w3school.com.cn/jsref/jsref_replace.asp

 

17. children(), find(), parent(), parents()

eg: $('#foo').children();

// children() / parent() only selects the direct children / parent of '#foo'

// find() / parents() selects all descendant / ancestor elements of '#foo'

 

18. not() --- select all elements with exception

$('#foo').children().not('.bad')  // select all children of '#foo' except ones with attribute [class = 'bad']

 

19. remove() --- remove an element

$('#foo').remove()  // remove '#foo'