jquery

last update: 2018/01/16

Search :

: 0 results

導入

http://jquery.com/download/
// ダウンロードして外部scriptで読み込む
// 2.x系はIE6/7/8未対応

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
// CDNから読み込む場合

jQueryオブジェクト

<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div>foo</div>

<script>
jQuery(function($){ // DOM参照するためにonDomReadyが必要

  console.log(jQuery); // function (e,t){return new v.fn.init(e,t,n)}
  // jQuery の中身はjQueryオブジェクトを生成する関数(jQuery Function)
  console.log(jQuery === $); // true
  // jQuery と $ は同じ(すなわち、$ も jQuery Function)
  console.log($("div")); // [div, prevObject: v.fn.v.init[1], ...]
  // $ は関数であり、$(引数) のように括弧を付け記述すると、引数で指定したDOM要素などをjQueryオブジェクト(要素の配列と付属情報の集合体)の形式で返す
  console.log($("div")[0]); // <div>foo</div>
  // 要素そのものは配列の形で参照可能
  console.log($("div").get(0)); // <div>foo</div>
  // メソッドの形でも参照可能
  console.log($("div").constructor === $); // true
  // jQueryオブジェクト(インスタンス)の生成元は、jQuery Function(コンストラクタ)

});
</script>

code_popup

即時関数

<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

(function($){ // ※1

  var foo = "a";
  console.log(foo);  // a
  console.log($);  // function (e,t){return new v.fn.init(e,t,n)}
  console.log(jQuery);  // function (e,t){return new v.fn.init(e,t,n)}

})(jQuery); // ※2

console.log(foo);  // Uncaught ReferenceError: foo is not defined 

// 即時関数は、定義と呼び出しを兼ね、実行後はundefinedになる
// 即時関数で囲む場合、jQueryオブジェクトを変数$に格納してスコープを関数内に制限し、他ライブラリのグローバル$から影響を受けないようにする
// ※2のjQueryオブジェクトが引数として※1の$に入る

</script>

code_popup

onDomReady

// その1
jQuery(function($){
  処理;
});


// その2
$(document).ready(function(){
  処理;
});


// その3 - その2から (document).ready を省略
$(function(){
  処理;
});


// DOM構築が完了した後、処理を実行する
// 上の3つは同じ動作
// DOM参照するときに必要な場合が多い

---

<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

jQuery(function($){   // onDomReady(その1)

  console.log('b');

});

console.log('a');

// a -> b の順に実行
// その2や3は、即時関数で囲まないと$変数が他のライブラリと競合してしまう可能性がある

</script>

code_popup

---

<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

(function($){   // 即時関数
  $(function(){   // onDomReady(その3)

    console.log('b');

  });
})(jQuery);

console.log('a');

// a -> b の順に実行
// その2や3でも即時関数内に入れれば$の競合は避けられるが、実行後undefinedになるので注意

</script>

code_popup

$("セレクタ").メソッド(…);

<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

jQuery(function($){ // onDomReady

  $(".red").css("background-color","#f00");
  $(".green").css("background-color","#0f0");
  $(".blue").css("background-color","#00f");

});

// $("セレクタ").メソッド(…); が基本の形
// .css() は数あるメソッドの内の１つ
// メソッドは後ろに複数連結可能

</script>

<p class="red">.red </p>
<p class="green">.green </p>
<p class="blue">.blue </p>

code_popup

イベントリスナ

<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="foo">click 1</div>
<div class="foo">click 2</div>
<div class="foo">click 3</div>

<script>

function fncConsole(ev){
  console.log(ev.target.innerHTML);
}

$(function(){ // onDomReady
  $(".foo").on("click", function(ev){
    fncConsole(ev);
  });
});

// onDomReadyは必要ない場合もある
// 上記 click 以外のイベント
// mouseover, mouseout, mousedown, mouseup, mousemove, dblclick, keydown, keyup, focus, blur, change, resize, scroll など

</script>

code_popup

メソッド作成

<!doctype html>
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
jQuery(function($){


// デフォルトのスタイルシートをjQueryで指定

$(":not('input')").css("margin","1px").css("padding","1px").css("font-size","12px").css("line-height","1em").css("border","#fff 1px solid");
$("li").css("list-style","none");
$("li, div span, p").css("margin-left","10px");
$("span").css("display","block");

// $("セレクタ").メソッド(…); が基本の形
// .css() は数あるメソッドの内の１つ
// メソッドは後ろに複数連結可能

// 一行目は以下のように書ける
// $(":not('input')").css({
//  "margin": "1px",
//  "padding": "1px",
//  "font-size": "12px",
//  "line-height": "1em",
//  "border": "#fff 1px solid"
// });

// 一行目は以下のようにも書ける
// var foo = {
//  "margin": "1px",
//  "padding": "1px",
//  "font-size": "12px",
//  "line-height": "1em",
//  "border": "#fff 1px solid"
// }
// $(":not('input')").css(foo);

// 一行目は以下のようにも書ける
// function foo() {
//   return {
//   "margin": "1px",
//   "padding": "1px",
//   "font-size": "12px",
//   "line-height": "1em",
//   "border": "#fff 1px solid"
//   }
// }
// $(":not('input')").css(foo());


// メソッド作成

$.fn.redBorder = function(){
  reset(); // リセット用関数の実行
  this.css("border","#f00 1px solid").css("background-color","rgba(255,0,0,0.1)"); // thisに入るオブジェクトに対してborder,background-colorを付ける
}
/*
$.fn.メソッド名 = function(){
  処理;
}
が基本の形
*/


// リセット用関数の定義

reset = function() {$(":not('input')").css("border","#fff 1px solid").css("background-color","rgba(255,255,255,1)");}
// input以外の全てのborder,background-colorをリセット


// clickしたinputのvalueが示すオブジェクトをredBorderメソッドに伝える

$("input").on("click", function(){
  $(this.value).redBorder(); 
  // this -> clickされたinputオブジェクト
  // this.value -> そのinputのvalueの文字列
  // $(this.value) -> そのvalueが示すDOM要素をまとめたオブジェクト
});


});
</script>


<h1>h1</h1>
<h1 id="ttl">h1(id="ttl")</h1>
<h2>h2</h2>
<ul>ul
<li>li</li>
</ul>
<ul>ul
<li>li</li>
<li class="cls">li(class="cls")</li>
</ul>
<ul>ul
<li class="sty1">li(class="sty1")</li>
<li class="sty2 sty1">li(class="sty2 sty1")</li>
<li class="sty1 sty2">li(class="sty1 sty2")</li>
<li class="sty1-sty2">li(class="sty1-sty2")</li>
</ul>
<span>span</span>
<span>span</span>
<div>div
<span>span</span>
<span>span</span>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
<div>div
<p>p
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
</p>
</div>
<div>div
<span>span</span>
</div>
<div>div
<p>p</p>
<span>span</span>
</div>
<div>div(include empty span)
<span></span>
</div>
<span>span</span>
<span>span</span>

<div style="background:#eee;">
<input type="button" onclick="reset()" value="reset">
<input type="button" value='h1'>
<input type="button" value='ul'>
<input type="button" value='li'>
<input type="button" value='h1, li'>
<input type="button" value='#ttl'>
<input type="button" value='.cls'>
<input type="button" value=':header'>
<input type="button" value='li[class]'>
<input type="button" value='li[class="sty1"]'>
<input type="button" value='li[class^="sty1"]'>
<input type="button" value='li[class|="sty1"]'>
<input type="button" value='li[class$="y2"]'>
<input type="button" value='li[class*="sty1"]'>
<input type="button" value='span'>
<input type="button" value='div span'>
<input type="button" value='div > span'>
<input type="button" value='div + span'>
<input type="button" value='div ~ span'>
<input type="button" value='span:first'>
<input type="button" value='span:first-child'>
<input type="button" value='span:first-of-type'>
<input type="button" value='span:last'>
<input type="button" value='span:last-child'>
<input type="button" value='span:last-of-type'>
<input type="button" value='span:nth-child(2)'>
<input type="button" value='span:nth-of-type(2)'>
<input type="button" value='span:nth-last-child(2)'>
<input type="button" value='span:nth-last-of-type(2)'>
<input type="button" value='span:nth-child(even)'>
<input type="button" value='span:even'>
<input type="button" value='span:nth-child(odd)'>
<input type="button" value='span:odd'>
<input type="button" value='span:only-child'>
<input type="button" value='span:only-of-type'>
<input type="button" value='span:eq(5)'>
<input type="button" value='span:lt(5)'>
<input type="button" value='span:gt(5)'>
<input type="button" value='span:empty'>
<input type="button" value=':not(h2,span,input)'>
<input type="button" value='div:has(p)'>
</div>

code_popup

sample

each

<!doctype html>
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<ul>
<li></li>
<li></li>
<li></li>
</ul>

<script>
$(function(){
  var arr = $("li");
  $.each(arr, function(index){
    $(this).text(index);
    console.log(index); // 0, 1, 2
    console.log(this); // <li>0</li>, <li>1</li>, <li>2</li>
    console.log($(this)); // [li, context: li], [li, context: li], [li, context: li]
  });
});
</script>

code_popup

sample

extend

<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
jQuery(function($){

var obj_1 = {
  v1: "a",
  v2: "B"
}

var obj_2 = {
  v2: "b",
  v3: "c"
} 

$.extend(obj_1, obj_2);

console.log(obj_1); // merged // {v1: "a", v2: "b", v3: "c"}
console.log(obj_2); // no merged

});
</script>

code_popup

///



<!doctype html>
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
jQuery(function($){



});
</script>

code_popup