▶ JavaScript

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="MYNAME" /＞

  • 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"＞

abc

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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
$(function(){

}); 
-->
</script>
</head>
<body>
<!-- CONTENTS -->
</body>
</html>