これは何? †

↑

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/

filelesson10.html
<!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 2092件 [詳細] filequiz1.png 2211件 [詳細] filethis3.png 2062件 [詳細] file30days.png 2320件 [詳細] filethis2.png 2125件 [詳細] filethis1.png 2170件 [詳細] filelesson10.html 3220件 [詳細] filelesson9.html 3634件 [詳細] filelesson8.html 3330件 [詳細] filelesson5.html 3352件 [詳細] filelesson3.html 3375件 [詳細] filelesson1.html 3726件 [詳細] filelesson4.html 3432件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2012-02-12 (日) 00:49:41 (4680d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=a3f24b2a31
ISBN10
ISBN13
9784061426061