jQuery Basics (selector / method)

* Why do we use jQuery over JavaScript?

1) To overcome cross browsing in JavaScript.
2) To implement the effect of animation in easy and convenience.

----------------------------------------------------------------------------------------------

* Meaning - EXEC statement will be executed after loading all the document.

$(document).ready(function(){
     EXEC statement here
});

$(function(){
     EXEC statement here
});

----------------------------------------------------------------------------------------------

* Kinds of selector

$("*") - select all elements

$("#id name") -  select the element having the id

$(".class name") - select the elements having the class

$("element name") - select the elements according with the element

$("ele1, ele2, ele3, ele4 ... eleN") - select all the elements at one go


$("element name").parent() - select a parent element of the element

$("element name").parents() - select all the parent elements of the element

$("element name sub-element") - select the sub-element of the element

$("element name > child element") - select appointed child element based on the element

$("element name").children() - select all the child elements of the element

$("element name").prev() - select a previous element of the element

$("element name").prevAll() - select all previous elements of the element

$("element name1").prevUntil("element name2") - select all the elements from element name 1 to 2

$("element name").nextAll() - select all next elements of the element

----------------------------------------------------------------------------------------------

* Chaining Technique

$(element name).css(property, value).css(property, value).css(property, value);

Like above, it could be used continuously.

----------------------------------------------------------------------------------------------

* Position selector

$("element:first") - $("li:first") - select the first element of the element.
$("element").first()

$("element:last") - $("li:last") - select the last element of the element.
$("element").last()

$("element:odd") - select all the elements corresponding position of the odd number

$("element:even") - select all the elements corresponding position of the even number

$("element:nth-child(num)") - $("li:nth-child(3)") - select only third element of the li elements

$("element:nth-child(numn")) - $("li:nth-child(3n)") - select all the elements corresponding 3 multiple

$("element:eq(index)") - $(li:eq(2)) - select the element referencing to index 2
$("element").eq(index)

$("element:gt(index)") - $("li:gt(1)") - select the all the elements referencing greater than index 1

$("element:lt(index)") - $("li:lt(1)") - select the all the elements referencing less than index 1

$("element").slice(index) - $("li").slice(2) - select the all the elements referencing from index 2

----------------------------------------------------------------------------------------------

* Property Selector

$("element[property]") - $("li[title]") - select the element having title property

$("element[property=value]") - $("li[title='list']") - select the element having title named list

$("element[property^=text]") - $("a[href^='http://']") - select the all the elements having href starting with http://

$("element[property$=text]") - $("a[href$='.com']") - select the all the elements having href ending with .com

$("element[property*=text]") - $("a[href*='helloworld']")  - select the all the elements having href containing helloworld

$("element:hidden") - $("li:hidden") - select the all the elements hidden

$("element:visible") - $("li:visible") - select the all the elements showing

$(":text") - select the input elements having text type

$(":selected") - select the elements applied selected attribute

$(":checked") - select the elements applied checked attribute

----------------------------------------------------------------------------------------------

* Content selector

$("element:contains('text')") - $("li:contains('text')") - select only elements having the containing 'text'

$("element").contents() - $("p").contents() - select the most cloest sub-element of the element

$("element:has(element name)") - $("li:has('span')") - select the li element having span element
$("element").has(element name)

$("element:not(:excluding element)") - $("li:not(:first)") - select others excluding first li element
$("element").not(:excluding element)

$("li").filter(".list2") - select the li elements having class named list2

$("element").find(element name) - $("li").find("strong") - select subelement, strong of the element

$("element").closest(element name) - $("strong").closest("div") - select closest high ranking div element wrapping strong

end() - $("li").children("a").end() - select previous element, li before filtering

----------------------------------------------------------------------------------------------

* Convenient methods with selectors

is() - $("li").is(":visible") - If li element is visible, it would return true

noConflict() 
- var m=$.noConflict();;
- m("h1").width(100);

get() - $("li").get(0).style.color="red"; - If get() method is used in jQuery, it is recognized as DOM selector.

each() / $.each() - Selected element is brought gradually.
 - $("li").each(function(){...});
 - $.each($("li"), function(){...});

map() - Create new array object by changing data in array

----------------------------------------------------------------------------------------------

* Property methods

html() - $("element").html("new element") - Change to new element

text() - $("element").text() - return text in the element
          - $("element").text(new text) - change to new text

css("property")  -  $("element").css("color"); - return value of the property
css("property","value") - $("element").css("color","blue"); - change to new value

removeAttr("property") - $("element").removeAttr("title"); - remove the selected attribute

attr("property") - $("element").attr("href"); - return value of the property
attr("property","value") - $("element").attr("href","main.html") - change to new value

addClass("class name") - $("element").addClass("abc"); - add class named abc to the element

removeClass("class name") - $("element").removeClass("abc"); - remove class named abc from the element

toggleClass("class name") - $("element").toggleClass("abc"); - Create and remove the class to the element frequently

hasClass("class name") - $("element").hasClass("abc") - Check whether there is class named abc or not and return ture or false

prop("property") - ("element").prop("tagName") - return property of the selected tag

val()  - $("element").val(); - return value of the element
val(value)  - $("element").val("junmo"); - change the value to the element

----------------------------------------------------------------------------------------------

* numerical value method

height() - $("element").height(); - Return height of the element except inner padding and border
              - $("element").height(100); - Change height to 100

width() - $("element").width(); - Return width of the element except inner padding and border
             - $("element").width(100);  - Change width to 100

innerHeight() - $("element").innerHegith(); - Return height of the element containing padding
                       - $("element").innerHeight(300); - Change height to 300

outerHeight() - $("element").outerHeight(); - Return height of the element containing padding and border
                       - $("element").outerHeight(100); - Change height to 100

position() - $("element").position().left;  -  Return the value of position how much far away from left
                 - $("element").position().top; - Return the value of position how much far away from top

offset() - $("element").offset().left; - Return the value how much far away from left in whole document
             - $("element").offset().top; - Return the value how much far away from top in whole document

scrollLeft() - $(window).scrollLeft(); - Return the value of moving width

scrollTop() - $(window).scrollTop(); - Return the value of moving height

----------------------------------------------------------------------------------------------

* Object method 

before() - $("element").before("new element"); - Add new element before the element

after() - $("element").after("new element"); - Add new element after the element

append() - $("element").append("new element"); - Add new element at the end position of the element

appendTo() - $("new element").appendTo("element"); - Add new element to the end of the element

insertBefore() - $("element").insertBefore("new element"); - Add new element before the element

insertAfter() - $("element").insertAfter("new element"); - Add new element after the element

clone() - $("element").clone(true or false); -If it is true, even all the sub elements are cloned together while only selected element cloned once it is false.

empty() - $("element").empty(); - Remove all the sub elements of the element

remove() - $("element").remove(); - Remove the element

replaceAll()/replaceWith() - $("new element").replaceAll("element");
                                            - $("element").replaceWith("new element");
                                            - Change new element from the element

unwrap() - $("element").unwrap(); - Remove parent element of the element

wrap() - $("element").wrap("new element"); - Wrap the element with new element

wrapAll() - $("element").wrapAll(); - Wrap the element with new element at once.

wrapInner() - $("element").wrapInner("new element"); - Wrap the content of the element with new element each