JQuery learning notes.

1. Import jq

<script src="jquery.js"></script> // Need download.

<script src="url"></script> // Refer from online source. Recommended

where url are:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

2. Grammer

basic format: $(selector).action

3. Selector: this-current element, "tag", ".class", "#id".

"p.intro" - <p> of intro class.

$("[href]" - select all elements with href

$("[href='#']) - select elements equal to #

$("[href$='.jpg']") - select all elements contains .jpg

$("ul li:first") - first entry in each <ul>

$("div#head.head") - elements of class in div which id is head.

for example, $("p").css("background-color","red"); // Changed color at the action part.

4. Run only after page is fully loaded.

$(document).ready(function(){

});

5. Event example

$("button").click(function(){

$("p").hide();

};

// This event can be put into a js file and imported when used.

Other events:

ready, click, dbclick, focus, mouseover.

6. An example for slide toggle.

First, define functions that will be called when event happens

$(document).ready(function(){

$(".flip").click(function(){ //defin event as click

$(".panel").slideToggle(100); //select class panel and define event slide.

});

});

Then, define div for slide.

Put display:none; in the attributes to hide it.

7. Get content 

$("selector").text();    $("selector").html();  Former one get the plain text and the latter one also get the html tags.

get value from input box.

$("selector").val();

get attributes

$("selector").attr("href");

8. Modify content

$("selector").action(value); where actions = text, val, html...

Modify according to original content:

$("selector").click(function () {

   $("selector").text(function(i, origText ){

      return "Old text:" + origText + "xxx";

   });

});

Modify attr

$("selector").attr("href", " new url");

9. Adding elements

----------

Add inside a element

$("selector").append("sth"); - add at end.

$("selector").prepend("sth"); - add at top.

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

Add before / after an element

$("selector").after("sth");

$("selector").before("sth");

10. Delete an element

$("selector").remove(); 

$("selector").empty();

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

Also, delete with selector

$("selector").remove(".class");

11. Modify class.

$("selector").addClass("className"); // Can put several names there.

$("selector").removeClass("className"); // Remove class.

$("selector").toggleClass("className"); 

12. CSS

$("selector").css("property","value(optional)") if there is no value, the value will be returned. Or the value will be set.

We could also set multiple values:

$("selector").css({"proterty":"value", ...});

13. Use JQ to get / set element width / height

For element size:

$("selector").width(); 

$("selector").height();

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

For inside border

$("selector").innerWidth();

$("selector").innerHeight();

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

For outside border

$("selector").outerWidth();

$("selector").outerHeight();

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

set multiple

$("selector").width(xx).height(xx);

14. Upwards.

$("selector").parent(); select parent.

$("selector").parents(); select all parents.

$("selector").parentsUntil(); select a parents path.

15. Downwards.

$("selector").children(); - only select direct child.

$("selector").find() - all children and their children.

16. Same level

$("selector").siblings(); - All elements in the same level.

$("selector").next() - The next sibling.

$("selector")..nextAll() - Next all

$("selector").nextUntil() - to some element.

similarly 

$("selector").prev() / prevAll() / prevUntil()

17. Filter

The first / last

$("selector").first() / last();

By index

$("selector").eq(0); // The first element.

By filter

$("selector").filter("some criteria");

On the contrary,

$("selector").not("some criteria");

18. AJAX

Mainly about 

$("selector").load("url");