jQuery入門 - 芸大 Webデザイン演習B

‣

‣
‣

JavaScript

‣

‣

var divs = document.getElementsByTagName("h1");

for(var i = 0; i < divs.length; i++) {

divs[i].style.color = "red";
}

‣

‣

var divs = document.getElementsByTagName("h1");

for(var i = 0; i < divs.length; i++) {

divs[i].style.color = "red";
}

$("h1").css("color", "red");

‣

‣
‣

‣

HTML5 jQuery

‣
‣ http://semooh.jp/jquery/

‣

‣
‣
‣

‣

‣

‣
‣

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" />

<title>jQuery </title>

</head>

<body>

<h1>jQuery </h1>

</body>
</html>

‣
‣
‣ http://code.google.com/intl/ja/apis/libraries/

‣

‣

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>

‣

‣

<!DOCTYPE html>
<html>

<head>





</head>

<body>

<h1>jQuery </h1>

</body>
</html>

‣
<!DOCTYPE html>
<html>

<head>





<script>

$(function() {

$("h1").fadeOut(3000);

});

</script>

</head>

<body>

<h1>jQuery </h1>

</body>
</html>

‣
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>

<script>
$(function() {
$("h1").fadeOut(3000).fadeIn(3000);
});
</script>

‣

<script>
$(function() {

$("h1").fadeOut(3000);

});

</script>

‣

<script>
$(function() {

$("h1").fadeOut(3000);

});
</script>

‣
‣

<script>
$(function() {

$("h1").fadeOut(3000);

});
</script>

‣
‣

<script>
$(function() {

$("h1").fadeOut(3000)
.fadeIn(3000);

});
</script>

‣
‣

$(function() {
//h1
$("h1").text(" ");
});

‣
‣

$(function() {
//h1
$("h1").css("backgroundColor","#336699");
});

‣
‣

$(function() {
//h1 CSS
$("h1").css({
backgroundColor:"#336699",
color:"white",
size:"40px",
padding:"20px"
})
});

‣
‣
‣

// 500px → 500px
$("h1").animate({marginTop:"500px"}, 500);

// 500px 1000ms
$("h1").animate({marginTop:"500px"}, 500)
.delay(1000)
.animate({marginTop:"0px"}, 200);

‣
‣

$(function() {
//
$("h1").animate({
fontSize:"150px",
opacity:0.2
}, 500)
.delay(1000)
.animate({
fontSize:"40px",
opacity:1.0
}, 500);
});

‣
‣

$(function() {
// NG
$("h1").animate({
color:"white",
backgroundColor:"blue"
}, 500));
});

‣
$(function() {
//h1 CSS
$("h1").css({
backgroundColor:"#6699cc",
color:"white",
size:"40px",
padding:"20px",
})
.animate({
paddingLeft:"640px",
}).delay(200)
.animate({
paddingLeft:"20px",
marginLeft:"640px"
}).delay(200)
.animate({
paddingTop:"60%"
}).delay(200)
.animate({
marginLeft:"0"
}).delay(200)
.animate({
paddingTop:"20px"
});

jQuery入門 - 芸大 Webデザイン演習B

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

More from Atsushi Tadokoro

More from Atsushi Tadokoro (20)

jQuery入門 - 芸大 Webデザイン演習B

Editor's Notes