how_to_javascript_memo_en

List of jQuery events and instruction †

(1) Element Selector †

http://api.jquery.com/category/selectors/

$("Elements")

Element is specified in the 'string'! However, the following two are the exception.

• $(document)
• $(this)

match the id †

$("#sample")

match the class †

$(".sample")

match the HTML tag †

$("span")　←　Select all <span>

Specify more than one element †

$("#link1,#link2")　←　Can be selected any number of

Specific element within the element †

$("ul a")　←　"a element" in "ul element"

　

(2-1) Changing and Retrieving Elements †

http://api.jquery.com/category/attributes/

Instructions to the specified element.
Obtain information from the specified element.

Changing and Retrieving Attributes †

＜img id="hoge" src="img/pencil.jpg" alt="PENCIL" /＞

• change the src attribute

  $("#hoge").attr("src","img/school.jpg");

• get the src attribute

  var filename = $("#hoge").attr("src");

Changing and Retrieving Attribute Value †

＜input id="hoge" name="names" value="MY_NAME" /＞

• Change the attribute value

  $("#hoge").val("NEW VALUE");

• Get the attribute value

  var data = $("#hoge").val();

Changing and Retrieving CSS Style †

＜div id="hoge"＞World there is nothing after the dream of infinite＜/div＞

• Change the CSS

  $("#hoge").css("color","#00FF88");

• Get The CSS

  var col = $("#hoge").css("color");

Changing and Retrieving HTML †

＜div id="hoge"＞<p>a<b>b</b>c</p>de＜/div＞

• Change the HTML

  $("#hoge").html("<p>Content<b>・</b>Content<br />");

• Get the HTML

  var kashi = $("#hoge").html();

Changing and Retrieving TEXT †

＜div id="hoge"＞aiueo＜/div＞

• Change the TEXT

  $("#hoge").text("good morning");

• Get the TEXT

  var kashi = $("#hoge").text();

　

(2-2) Show and hide elements (Effect) †

http://api.jquery.com/category/effects/

Show the element †

$("#hoge").show();
$("#hoge").show("slow");
$("#hoge").show("normal");
$("#hoge").show("fast");
$("#hoge").show(1500);  // Display over 1.5 seconds

Hide the element †

$("#hoge").hide();
$("#hoge").hide("slow");
$("#hoge").hide("normal");
$("#hoge").hide("fast");
$("#hoge").hide(1500);  // Hide over 1.5 seconds

Slide the display element †

$("#hoge").slideDown();
$("#hoge").slideDown("slow");
$("#hoge").slideDown("normal");
$("#hoge").slideDown("fast");
$("#hoge").slideDown(1500);

Slide the Hidden element †

$("#hoge").slideUp();
$("#hoge").slideUp("slow");
$("#hoge").slideUp("normal");
$("#hoge").slideUp("fast");
$("#hoge").slideUp(1500);

Fade in the element †

$("#hoge").fadeIn();
$("#hoge").fadeIn("slow");
$("#hoge").fadeIn("normal");
$("#hoge").fadeIn("fast");
$("#hoge").fadeIn(1500);

Fade out the element †

$("#hoge").fadeOut();
$("#hoge").fadeOut("slow");
$("#hoge").fadeOut("normal");
$("#hoge").fadeOut("fast");
$("#hoge").fadeOut(1500);

Change transparency †

Change to transparency of 33%

$("#hoge").fadeTo("slow",0.33);
$("#hoge").fadeTo("normal",0.33);
$("#hoge").fadeTo("fast",0.33);
$("#hoge").fadeTo(1500,0.33);

　

(3) Event set †

http://api.jquery.com/category/events/

If you run all of the elements loaded in the browser †

$(document).ready(function(ev){
	/* CODE */
});

Events is set in the "$(document).ready(FUNCTION);" event.
Omitted that you can write "$(FUNCTION);"

$(function(){
	/* CODE */
});

Click †

$("element").click(function(ev){
	/* CODE */
});

Double Click †

$("element").dblclick(function(ev){
	/* CODE */
});

Mouse Move †

$("element").mousemove(function(ev){
	/* CODE */
});

Mouse Over †

$("element").mouseover(function(ev){
	/* CODE */
});

Mouse Down †

$("element").mousedown(function(ev){
	/* CODE */
});

Mouse Up †

$("element").mouseup(function(ev){
	/* CODE */
});

Processing alternately each time it is clicked †

$("element").toggle(function(){
	/* CODE1 */
}, function(){
	/* CODE2 */
});

When the choice has been changed in <select>. ~ †

When the contents that are input into a form has been changed.

$("element").change(function(ev){
	/* CODE */
});

Selected text of the form †

$("element").select(function(ev){
	/* CODE */
});

Click a submit button †

$("element").submit(function(ev){
	/* CODE */
});

　

HTML template of jQuery †

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-x.x.x.min.js" type="text/javascript"></script>
<script language="JavaScript">
$(function(){
 
});
</script>
</head>
<body>

</body>
</html>