¤³¤ì¤Ï²¿?

day01 Hello jQuery

http://tutsplus.com/lesson/hello-jquery/

³«È¯´Ä¶­¤È»ñ»º¤Ë¤Ä¤¤¤Æ

jQuery ¤È $ ¤Ë¤Ä¤¤¤Æ

day02 Not So Fast, jQuery

http://tutsplus.com/lesson/not-so-fast-jquery/

day03 The Basics of Querying the DOM

http://tutsplus.com/lesson/the-basics-of-querying-the-dom/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson3</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.headerClass {
  color: green;
  font-weight: bold;
  font-size: large;
  text-decoration: underline;
}
.footerClass {
  padding-top: 20px;
  vertical-align: bottom;
  font-size: small;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  // ­¡id »ØÄê
  $('#header').addClass('headerClass');
  // ­¢class »ØÄê
  $('#footer').css('color', 'gray');
  // ­£tag »ØÄê
  $('table').css('border-spacing','0');
  // ­¤Â°À­»ØÄê
  $('[type="text"]').css('text-align','right');
  // ­¥»ÒÍ×ÁÇ
  $('table thead tr').children().css('background','orange');
  // ­§·«¤êÊÖ¤·
  $('table tbody tr').each(function(index){
    // ­¦Í×ÁÇÈÖ¹æ»ØÄê
    $(this).children().eq(0).text(index + 1);
    if (index % 2) {
      $(this).children().css('background','ivory');
    }
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <div id="header">
    <h1>ACME SHOPPING SITE</h1>
  </div>
  <div id="body">
    <table border="1">
      <thead>
        <tr>
          <th>No.</th>
          <th>ÉÊ̾</th>
          <th>ñ²Á</th>
          <th>¸Ä¿ô</th>
          <th>¹ç·×</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>Ultra Marker</td>
          <td>100</td>
          <td><input type="text" size="5" value="0"/></td>
          <td>0</td>
        </tr>
        <tr>
          <td></td>
          <td>Ultimate Eraser</td>
          <td>300</td>
          <td><input type="text" size="5" value="0"/></td>
          <td>0</td>
        </tr>
        <tr>
          <td></td>
          <td>Super Pencil</td>
          <td>50</td>
          <td><input type="text" size="5" value="0"/></td>
          <td>0</td>
        </tr>
        <tr>
          <td></td>
          <td>Hyper Card</td>
          <td>150</td>
          <td><input type="text" size="5" value="0"/></td>
          <td>0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="4">¹ç·×</th>
          <th>0</th>
        </tr>
      </tfoot>
    </table>
  </div>
  <div id="footer" class="footerClass">
    Copyright(c) ACME CO LTD 2012 All Rights Reserved.
  </div>
</body>
</html>

DOM¤Î¥Î¡¼¥É»ØÄê

DOM¤Î¥Î¡¼¥ÉÁàºî

°À­¼èÆÀvar argVal = $('#id').attr('arg');
°À­ÀßÄê$('#id').attr('arg','argval');
¥¯¥é¥¹ÄɲÃ$('#id').addClass('class');
¥¯¥é¥¹ºï½ü$('#id').removeClass('class');
¥¯¥é¥¹¹¹¿·$('#id').toggleClass('class');¤¹¤Ç¤Ë class ¤¬ÀßÄꤵ¤ì¤Æ¤¤¤ì¤Ðºï½ü¡£¤½¤¦¤Ç¤Ê¤±¤ì¤Ð class ¤òÄɲÃ
CSS¼èÆÀvar css = $('#id').css('font-size');
CSSÊѹ¹$('#id').css('font-size','10');
°ÌÃÖ¼èÆÀalert($('#id').offset().top + "," + $('#id').offset().left)
Â礭¤µ¼èÆÀalert($('#id').width() "," + $('#id').height()
Â礭¤µ¹¹¿·$('#id').width(400); $('#id').height(300);
DOM¼èÆÀvar div = $('#header').get();
var div = $('div').get(0);
HTML¼èÆÀvar div = $('#header').html();
HTMLÀßÄê$('#header').html('<h1>HELLO</h1>');
TEXT¼èÆÀvar text = $('#msg').text();
TEXTÀßÄê$('#msg').html('HELLO');
VALUE¼èÆÀvar val = $('#price').val();
VALUEÀßÄê$('#price').val('$9.99');
DATA¼èÆÀvar data = $('#id').data('key');jQuery¤Ï¡¢DOM¥Î¡¼¥É¤ò¼èÆÀ¤¹¤ëºÝ¤Ë data ¤ò³ÊǼ¤Ç¤­¤ë¤è¤¦¤Ë³ÈÄ¥¤¹¤ë¡£
¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥é¤Ê¤É¤â¤³¤³¤Ë³ÊǼ¤µ¤ì¤ë(°ìÈ̥ǡ¼¥¿¤ò³ÊǼ¤¹¤ë¥­¡¼¤Ë 'event'¡¢'handle' ¤ò»È¤Ã¤Æ¤Ï¤¤¤±¤Ê¤¤)¡£
¤¢¤È¡¢¤Ç¤«¤¤¥Ç¡¼¥¿¤òÃÖ¤¤¤¿¤é¤¤¤«¤ó¤è
DATAÀßÄê$('#id').data('key','val');
DATAºï½ü$('#id').removeData('key');°ú¿ô¤Ê¤·¤Ç removeData() ¤ò¸Æ¤Ó½Ð¤¹¤È¡¢jQuery ¤Ë¤è¤ë³ÈÄ¥¤¬Á´¤Æºï½ü¤µ¤ì¤ë¤Î¤Ç¡¢É¬¤º°ú¿ôÉÕ¤­¤Ç¸Æ¤Ó½Ð¤¹¡£
undefined¡¢null¡¢0 ¤ò°ú¿ô¤Ë»ØÄꤹ¤ë¤È¡¢°ú¿ô¤Ê¤·¤È¸«¤Ê¤µ¤ì¤ë

day04 Events 101

day05 Events 201

http://tutsplus.com/lesson/events-201/

[source] [reload]

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<title>Lesson5</title>
	<style type="text/css">
/* ==================== STYLES ==================== */
dl {
	width: 300px;
}
dt {
  cursor: pointer;
  width: 300px;
  font-weight: bold;
  background: lavender;
  border-top: 1px solid white;
  border-bottom: 1px solid gray;
}
dd {
	margin: 0;
  cursor: pointer;
  width: 300px;
  font-weight: bold;
  background: lightyellow;
  border-top: 1px solid white;
  border-bottom: 1px solid gray;
  display: none;	
}
/* ==================== STYLES ==================== */
	</style>
	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
	$('dl').on('mouseover', 'dt', function() {
		$(this)
			.next() // <-- next() returns the next dd
				.slideDown(200) // <-- gradually show ovew 200ms
				.siblings('dd') // <-- all other dd
					.slideUp(200); // <-- gradually hide over 200ms
	});
	$('dl').on('mouseout', function() {
		$(this).find('dd').slideUp(200);
	});
});
/* ==================== SCRIPTS ==================== */
  </script>
</head>
<body>
¢­¥Þ¥¦¥¹¥Ý¥¤¥ó¥¿¤ò´Á»ú¤Ë¹ç¤ï¤»¤Æ¤ß¤Æ
<dl>
	<dt>»³¸¶¿å·Ü</dt>
	<dd>¤ä¤ó¤Ð¤ë¤¯¤¤¤Ê</dd>
	<dt>ÌÚè¹</dt>
	<dd>¤ß¤ß¤º¤¯</dd>
	<dt>ÅÎó¤</dt>
	<dd>¤Û¤È¤È¤®¤¹</dd>
	<dt>üê</dt>
	<dd>¤¯¤Þ¤¿¤«</dd>
	<dt>æÇ¿é</dt>
	<dd>¤«¤ï¤»¤ß</dd>
</dl>
</body>
</html>

day06 Quiz#1

day07 Bind... Live... Delegate... Huh?

http://tutsplus.com/lesson/bind-live-delegate-huh/

day08 Creating and Appending Content (DOM ¥Ä¥ê¡¼¤ÎÁàºî)

http://tutsplus.com/lesson/creating-and-appending-content/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson8</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
table, td, th {
  border: 1px darkblue solid;
  border-spacing: 0;
}
button.up {
  color: white;
  background-color: red;
}
button.up:hover {
  background-color: darkred;
}
button.up:disabled {
  background-color: pink;
}
button.down {
  color: white;  
  background-color: blue;
}
button.down:hover {
  background-color: darkblue;
}
button.down:disabled {
  background-color: lavender;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  
  $('button.up').on('click',function(){
    onUpButtonClicked($(this));
  });
  
  $('button.down').on('click',function(){
    onDownButtonClicked($(this));
  });

  $('button#addTop').on('click',function(){
    // tbody ¤Î»ÒÍ×ÁǤÎÀèƬ¤ËÄɲÃ
    $('tbody').prepend(createQueueRow());
    disbleTopAndBottomButton();
  });

  $('button#addBottom').on('click',function(){
    // tbody ¤Î»ÒÍ×ÁǤÎËöÈø¤ËÄɲÃ
    $('tbody').append(createQueueRow());
    disbleTopAndBottomButton();
  });

  disbleTopAndBottomButton();
});

function onUpButtonClicked(btnComponet) {
    var row = btnComponet.closest('tr');
    // Á°¤Î tr ¤ÎÁ°¤Ë°ÜÆ°¤¹¤ë
    row.prev().before(row);
    disbleTopAndBottomButton();  
}

function onDownButtonClicked(btnComponent) {
    var row = btnComponent.closest('tr');
    // ¼¡¤Î tr ¤Î¼¡¤Ë°ÜÆ°¤¹¤ë
    row.next().after(row);
    disbleTopAndBottomButton();  
}

function disbleTopAndBottomButton() {

  $('button').removeAttr('disabled');

  $('button.up').first().attr('disabled','disabled');
  $('button.down').last().attr('disabled','disabled');
}

function createQueueRow() {

  var order = $('#order')[0].value;
  if (order == '') {
    return;
  }
  $('#order')[0].value = '';

  var tr = $('<tr></tr>');

  // 1ÎóÌÜ
  var td1 = $('<td></td>');

  var downBtn = $('<button></button>',{
    class: 'down',
    text: '¢­'
  });
  var upBtn = $('<button></button>',{
    class: 'up',
    text: '¢¬'
  });

  td1.append(downBtn);
  td1.append('\n'); // ¸«¤¿ÌܤΤ¿¤á HTML ¤Ë¹ç¤ï¤»¤Æ²þ¹Ô¤òÆþ¤ì¤ë
  td1.append(upBtn);

  tr.append(td1);

  // 2ÎóÌÜ
  var td2 = $('<td></td>');
  td2.append(order);
  tr.append(td2);

  // ¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥éÄɲÃ
  upBtn.on('click',function(){
    onUpButtonClicked($(this));
  });
  
  downBtn.on('click',function(){
    onDownButtonClicked($(this));
  });


  return tr;
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <table class="table">
    <thead>
      <tr><th></th><th>Task Queue</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button class="down">¢­</button>
          <button class="up">¢¬</button>
        </td>
        <td>¥Ó¡¼¥ë</td>
      </tr>
      <tr>
        <td>
          <button class="down">¢­</button>
          <button class="up">¢¬</button>
        </td>
        <td>ÆüËܼò</td>
      </tr>
      <tr>
        <td>
          <button class="down">¢­</button>
          <button class="up">¢¬</button>
        </td>
        <td>¥¦¥¤¥¹¥­¡¼</td>
      </tr>
    </tbody>
    <tfoot>
    </tfoot>
  </table>
  <hr/>
  <input id="order" type="text" placeholder="¤´Ãíʸ"/>
  <button id="addTop">¤¹¤°Íߤ·¤¤</button>
  <button id="addBottom">¤¢¤È¤Ç¤Ç¤¤¤¤¤è</button>
</body>
</html>

day09 Slides and Structure

http://tutsplus.com/lesson/slides-and-structure/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson9</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
#orderForm { 
  width: 300px;
  font-size: 10px;
  background: lightgray; 
  padding: 1em 2em; 
  position: relative;
}

/* Javascript ¤¬Í­¸ú¤Ê¤È¤­¤Î¤ß CSS ¤òŬÍѤ¹¤ë¥Æ¥¯¥Ë¥Ã¥¯ */
.js #orderForm {
  position: absolute;
  top: 0;
  display: none;
} 

#orderForm h2 { margin-top: 0; }

#orderForm ul { padding: 0; }

#orderForm li { 
  list-style: none;
  margin-bottom: 1em;
}

.btnClose {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid;
  font-size: 0.5em;
  cursor: pointer;
}

/* Form inputs */
input, textarea { width: 100%; line-height: 2em;}
input[type=submit] { width: auto; text-align:right;}
label { color: black; display: block; text-align: left; }
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  // Javascript ¤¬Í­¸ú¤Ê¤È¤­¤Ë¡¢ÆÃÄê¤Î CSS ¤òŬÍѤ·¤¿¤¤¤È¤­¤Î¥Æ¥¯¥Ë¥Ã¥¯
  $('html').addClass('js');

  formWindow.init($('#orderForm') , {
    effect : 'fadeToggle',
    speed : 1000
  });
});

var formWindow = {
  container : null,
 
  config: {
    effect: 'slideToggle',
    speed: 500
  },
 
  init : function(container, config) {
    this.container = container;
    if (config) {
      $.extend(this.config, config);
    }

    // ¡ß¥Ü¥¿¥ó
    $('<span> X </span>')
      .prependTo(container)
      .on('click', this.close)
      .addClass('btnClose');

    // Formɽ¼¨¥Ü¥¿¥ó
    $('<button></button>', {
      text: 'ORDER HERE!'
    })
      .insertAfter(container.before())
      .on('click', this.show);
  },

  show : function() {
    var obj = formWindow.container;
    var fnc = formWindow.config.effect;
    var arg = formWindow.config.speed;
    // javascript ¤Î reflection
    obj[fnc](arg);
  },

  close : function() {
    var obj = formWindow.container;
    var fnc = formWindow.config.effect;
    var arg = formWindow.config.speed;
    // javascript ¤Î reflection
    obj[fnc](arg);
  } 
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <div id="header">
    <h1>ACME DREAM HEAD MASSAGER</h1>
  </div>
  <div id="body">
    <p>This scalp massager will take you to ultimate relaxing place.</p>
    <p>Specialized 12 fingers will bend to fit your head skin. 
    They are glide smoothly across the surface of your scalp, and improve your blood circulations. 
    This technology was developed by NASA and deployed to the ISS(International Space Station).</p>
    <p>Usually, it is 1000 Perica for one, but now it is 1000 Perica for two. 
    Don't miss this chance. </p>
  </div>
  <div id="orderForm">
    <h2>Order Form</h2>
    <form action="#">
      <ul>
        <li>
          <label for="name">Name: </label>
          <input name="name" id="name">
        </li>

        <li>
          <label for="emal">Email Address: </label>
          <input name="email" id="email">
        </li>

        <li>
          <label for="address">Address: </label>
          <input name="address" id="address">
        </li>

        <li>
          <label for="creditcard">Credit Card: </label>
          <input name="card" id="card">
        </li>

        <li>
          <label for="amount">Amount: </label>
          <input name="amount" id="amount">
        </li>

        <li>
          <input type="submit" value="Submit">
        </li>
      </ul>
    </form>
  </div>
</body>
</html>

day10 The this Keyword

http://tutsplus.com/lesson/the-this-keyword/

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson10</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
function fn(e) {
  e.preventDefault();
  console.log("----- in fn(), this is");
  console.log(this);
}

var obj = {
  fn1 : function(e) {
    e.preventDefault();
    console.log("----- in obj.fn1(), this is");
    console.log(this);
    obj.fn2();
  },
  fn2 : function() {
    console.log("----- in obj.fn2(), this is");
    console.log(this);    
  }
}

$(document).ready(function(){
  console.log("in ready(), this is");
  console.log(this);

  $('a#fn').on('click', fn);
  $('a#obj').on('click', obj.fn1);
  $('a#proxy').on('click', $.proxy(obj.fn1, obj));
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <a id="fn" href="http://www.google.com/">Call fn()</a><br/>
  <a id="obj" href="http://www.google.com/">Call obj.fn1()</a><br/>
  <a id="proxy" href="http://www.google.com/">Call proxy(obj.fn1())</a><br/>
</body>
</html>

¢ª Day 11 °Ê¹ß : Javascript Learn jQuery in 30 Days (11-20)


HTML


źÉÕ¥Õ¥¡¥¤¥ë: filethis4.png 2094·ï [¾ÜºÙ] filequiz1.png 2212·ï [¾ÜºÙ] filethis3.png 2067·ï [¾ÜºÙ] file30days.png 2321·ï [¾ÜºÙ] filethis2.png 2128·ï [¾ÜºÙ] filethis1.png 2170·ï [¾ÜºÙ] filelesson10.html 3221·ï [¾ÜºÙ] filelesson9.html 3635·ï [¾ÜºÙ] filelesson8.html 3331·ï [¾ÜºÙ] filelesson5.html 3353·ï [¾ÜºÙ] filelesson3.html 3375·ï [¾ÜºÙ] filelesson1.html 3726·ï [¾ÜºÙ] filelesson4.html 3434·ï [¾ÜºÙ]

¥È¥Ã¥×   ÊÔ½¸ Åà·ë º¹Ê¬ ¥Ð¥Ã¥¯¥¢¥Ã¥× źÉÕ Ê£À½ ̾Á°Êѹ¹ ¥ê¥í¡¼¥É   ¿·µ¬ °ìÍ÷ ñ¸ì¸¡º÷ ºÇ½ª¹¹¿·   ¥Ø¥ë¥×   ºÇ½ª¹¹¿·¤ÎRSS   sitemap
Last-modified: 2012-02-12 (Æü) 00:49:41 (4682d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=a3f24b2a31
ISBN10
ISBN13
9784061426061