생활코딩 jQuery 강의노트

프로그래밍/Jquery

생활코딩 jQuery 강의노트

가카리 2016. 10. 23. 22:14

생활코딩 jQuery 강의의 강의노트입니다(https://opentutorials.org/course/53)

<html>

<body>

$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');

</script>

</body>

</html>

<html>

<head>

function addEvent(target, eventType,eventHandler, useCapture) {

if (target.addEventListener) { // W3C DOM

target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);

} else if (target.attachEvent) { // IE DOM

var r = target.attachEvent("on"+eventType, eventHandler);

}

function clickHandler(event) {

var nav = document.getElementById('navigation');

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

var child = nav.childNodes[i];

if(child.nodeType==3)

continue;

child.className = '';

}

event.target.className = 'selected';

}

addEvent(window, 'load', function(eventObj) {

var nav = document.getElementById('navigation');

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

var child = nav.childNodes[i];

if(child.nodeType==3)

continue;

addEvent(child, 'click', clickHandler);

}

})

</script>

#navigation li {

list-style:none;

float:left;

padding:5px;

}

#navigation {

cursor:pointer;

}

#navigation .selected {

background-color:red;

color:white;

}

</style>

</head>

<body>

<li>javascript</li>

<li class="selected">jQuery</li>

<li>mysql</li>

</ul>

</body>

</html>

jQuery

<html>

<head>

$('#navigation li').live('click', function() {

$('#navigation li').removeClass('selected');

$(this).addClass('selected');

})

</script>

#navigation li {

list-style:none;

float:left;

padding:5px;

}

#navigation {

cursor:pointer;

}

#navigation .selected {

background-color:red;

color:white;

}

</style>

</head>

<body>

<li>javascript</li>

<li class="selected">jQuery</li>

<li>mysql</li>

</ul>

</body>

</html>

//$ 대신 jQuery를 사용

jQuery('body').html('hello world');

</script>

//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방

(function($){

$('body').html('hello world');

})(jQuery)

</script>

<html>

<body>

<ul>

</ul>

</ul>

(function($){

$('ul.foo').click( function() {

$('li', this).css('background-color','red');

});

})(jQuery)

</script>

</body>

</html>

예제 2. jQuery( element )

<html>

<body>

jQuery(document.body).css( "background-color", "black" );

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body{

font-size:12px;

}

.selected,.selected_parent {

background-color: red !important;

color:white;

border:2px solid red !important;

}

input.btn {

width:130px;

}

ul, .live{

float:left;

width:150px;

padding-left:20px;

margin:0;

}

textarea{

float:left;

width: 400px;

height:150px;

font-size:11px;

margin-left:20px;

}

.clear{

clear: both;

}

.sample{

margin-bottom: 20px;

}

</style>

</head>

<body>

<li class="tutorial" id="javascript"> javascript </li>

<li class="tutorial" id="jquery"> jQuery </li>

<li class="tutorial" id="MYSQL"> MYSQL </li>

</ul>

<li class="tutorial" id="javascript"> javascript </li>

<li class="tutorial" id="jquery"> jQuery </li>

<li class="tutorial" id="MYSQL"> MYSQL </li>

</ul>

</textarea>

</div>

<input class="btn" type="button" id=".tutorial" value=".tutorial" /> - class 선택자 <br />

</fieldset>

<legend> filter </legend>

<li> javascript </li>

<li> MYSQL </li>

</ul>

<li> javascript </li>

<li> MYSQL </li>

</ul>

</textarea>

</div>

<input class="btn" type="button" value="#list li:eq(2)" /> - 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:gt(1)" /> - 인자 보다 인덱스가 큰 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:lt(2)" /> - 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:even" /> - 첫번째, 세번째... 홀 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:odd" /> - 두번째, 네번째.... 짝 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:first" /> - 첫번재 인덱스 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:last" /> - 마지막 인덱스 엘리먼트에 대한 선택자 <br />

</fieldset>

</ul>

</ul>

</textarea>

</div>

<input class="btn" type="button" value="[target*="BC"]" /> - 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target="DEFG"]" /> - 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target!="DEFG"]" /> - 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target^="B"]" /> - 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target$="H"]" /> - 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target]" /> - 속성이 존재하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target][id]" /> - 속성들이 존재하는 엘리먼트를 찾아내는 선택자

</fieldset>

<div>

</div>

</div>

<div>

</div>

</textarea>

<input class="btn" type="button" value="[type="text"]" /> - 폼 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다. <br />

<input class="btn" type="button" value="[type="text"]:disabled" /> - disabled 속성의 값이 disabled인 엘리먼트를 찾아내는 선택자<br />

<input class="btn" type="button" value="[type="text"]:enabled" /> - disabled 속성의 값이 enabled인 엘리먼트를 찾아내는 선택자<br />

<input class="btn" type="button" value="input:checked" /> - 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자 <br />

</fieldset>

$('input').live('click', function() {

$this = $(this);

$('*').removeClass('selected');

switch($this.attr('value')) {

case '#jquery':

$('#jquery').addClass('selected');

break;

case '.tutorial':

$('.tutorial').addClass('selected');

break;

case 'li':

$('li').addClass('selected');

break;

case '#jquery, #MYSQL':

$('#jquery, #MYSQL').addClass('selected');

break;

case '#list li:eq(2)':

$('#list li:eq(2)').addClass('selected');

break;

case '#list li:gt(1)':

$('#list li:gt(1)').addClass('selected');

break;

case '#list li:lt(2)':

$('#list li:lt(2)').addClass('selected');

break;

case '#list li:even':

$('#list li:even').addClass('selected');

break;

case '#list li:odd':

$('#list li:odd').addClass('selected');

break;

case '#list li:first':

$('#list li:first').addClass('selected');

break;

case '#list li:last':

$('#list li:last').addClass('selected');

break;

case '[target*="BC"]':

$('li[target*="BC"]').addClass('selected');

break;

case '[target="DEFG"]':

$('li[target="DEFG"]').addClass('selected');

break;

case '[target!="DEFG"]':

$('li[target!="DEFG"]').addClass('selected');

break;

case '[target^="B"]':

$('li[target^="B"]').addClass('selected');

break;

case '[target$="H"]':

$('li[target$="H"]').addClass('selected');

break;

case '[target]':

$('li[target]').addClass('selected');

break;

case '[target][id]':

$('li[target][id]').addClass('selected');

break;

case '[type="text"]':

$('[type="text"]').addClass('selected');

break;

case '[type="text"]:disabled':

$('[type="text"]:disabled').addClass('selected');

break;

case '[type="text"]:enabled':

$('[type="text"]:enabled').addClass('selected');

break;

case 'input:checked':

$('input:checked').parent().addClass('selected');;

break;

}

})

</script>

</body>

</html>

<html>

<body>

<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');

</script>

</body>

</html>

예제2. javascript의 DOM을 이용해서 코딩하는 경우

<html>

<body>

<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

var tutorial = document.getElementById('tutorial');

tutorial.setAttribute('href', 'http://jquery.org');

tutorial.setAttribute('target', '_blank');

tutorial.style.color = 'red';

</script>

</body>

</html>

<html>

<body>

</ul>

</ul>

</body>

</html>

<html>

<head>

function clickHandler(e){

alert('thank you');

}

$(document).bind('ready', function(){

$('#click_me').bind('click', clickHandler);

$('#remove_event').bind('click', function(e){

$('#click_me').unbind('click', clickHandler);

});

$('#trigger_event').bind('click', function(e){

$('#click_me').trigger('click');

});

})

</script>

</head>

<body>

</body>

</html>

예제2. 이벤트 헬퍼

<html>

<head>

function clickHandler(e){

alert('thank you');

}

$(document).ready(function(){

$('#click_me').click(clickHandler);

$('#remove_event').click(function(e){

$('#click_me').unbind('click', clickHandler);

});

$('#trigger_event').click(function(e){

$('#click_me').trigger('click');

});

})

</script>

</head>

<body>

</body>

</html>

예제3. live를 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 수 있다.

<html>

<head>

function clickHandler(e) {

alert('thank you');

}

$('#click_me').live('click', clickHandler);

$('#remove_event').live('click', function(e) {

$('#click_me').die('click', clickHandler);

});

$('#trigger_event').live('click', function(e) {

$('#click_me').trigger('click');

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

}

</style>

</head>

<body>

<p>

I would like to say:

</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

}

</style>

</head>

<body>

<p>

I would like to say:

</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

border:2px blue solid;

margin:2px;

padding:2px;

}

p {

background:yellow;

margin:2px;

padding:2px;

}

strong {

color:red;

}

</style>

</head>

<body>

<strong>What about me?</strong>

<span>Another One</span>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

margin:6px 0;

}

</style>

</head>

<body>

<p>

Hello

</p>

how are

<p>

you?

</p>

Call remove() on paragraphs

</button>

$("button").click( function () {

$("p").remove();

});

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p> Hello </p>

<p> cruel </p>

<p> World </p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>p {

margin: 4px;

font-size:16px;

font-weight:bolder;

cursor:pointer;

}

.blue {

color:blue;

}

.highlight {

background:yellow;

}

</style>

</head>

<body>

<p class="blue"> Click to toggle </p>

<p class="blue highlight"> highlight </p>

<p class="blue"> on these </p>

<p class="blue"> paragraphs </p>

$("p").click( function () {

$(this).toggleClass("highlight");

});

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>p {

color:blue;

margin:8px;

}

</style>

</head>

<body>

<p>

</p>

var value = $(this).val();

$("p").text(value);

}).keyup();</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

span {

}

</style>

</head>

<body>

<p>

</p>

$("input").focus( function () {

$(this).next("span").html('focus');

}).blur( function() {

$(this).next("span").html('blur');

}).change(function(e){

alert('change!! '+$(e.target).val());

}).select(function(){

$(this).next('span').html('select');

});

</script>

</body>

</html>

예제2. (.submit(), .val())

<!DOCTYPE html>

<html>

<head>

<style>

p {

margin:0;

color:blue;

}

div, p {

margin-left:10px;

}

span {

color:red;

}

</style>

</head>

<body>

<p>

Type 'correct' to validate.

</p>

<div>

</div>

</form>

$("form").submit( function() {

if ($("input:first").val() == "correct") {

$("span").text("Validated...").show();

return true;

}

$("span").text("Not valid!").show().fadeOut(1000);

return false;

});

</script>

</body>

</html>

탐색

<!DOCTYPE html>

<html>

<head>

<style>

body{

font-size:11px;

width:1000px;

}

#panel div,#panel li,#panel ul{

border:2px solid black;

margin:10px;

padding:10px;

}

#panel ul{

list-style: none;

}

#panel .s{

border:2px solid red;

background-color: #808080;

}

#panel #root{

margin-top:0;

}

textarea{

width:982px;

height:100px;

font-size:11px;

overflow: visible;

}

#help{

float:left;

width:500px;

height:450px;

overflow-y: scroll;

overflow-x: hidden

}

#panel{

float:left;

width:500px;

}

#help table{

border:1px solid gray;

border-collapse: collapse;

width:100%;

}

#help table td{

border:1px solid gray;

padding:5px;

}

#help .title{

color:white;

background-color:#555;

padding:3px;

}

#help .title.checked{

background-color:red;

}

</style>

</head>

<body>

<p>

javascript을 입력 한 후에 엔터를 눌러주세요.

<table>

<tr id="add"><td><div class="title">.add(selector)</div>엘리먼트를 추가한다</td></tr>

<tr id="andSelf"><td><div class="title">.andSelf()</div>현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다</td></tr>

<tr id="children"><td><div class="title">.children([selector])</div>자식 엘리먼트를 선택한다</td></tr>

<tr id="closet"><td><div class="title">.closest(selector)</div>가장 가까운 selector 조상 엘리먼트를 탐색한다</td></tr>

<tr id="each"><td><div class="title">.each(function(index,Element))</div>현재 엘리먼트 셋에 반복 작업을 실행한다</td></tr>

<tr id="end"><td><div class="title">.end()</div>이전 체인 컨텍스트로 돌아간다.</td></tr>

<tr id="eq"><td><div class="title">.eq(index)</div>현재 엘리먼트 셋에서 index에 해당하는 엘리먼트를 선택한다</td></tr>

<tr id="filter"><td><div class="title">.filter(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 엘리먼트를 선택한다</td></tr>

<tr id="find"><td><div class="title">.find(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 자손 엘리먼트를 선택한다</td></tr>

<tr id="first"><td><div class="title">.first()</div>현재 엘리먼트 셋 중 첫번째 엘리먼트를 선택한다</td></tr>

<tr id="last"><td><div class="title">.last()</div>현재 엘리먼트 셋 중 마지막 엘리먼트를 선택한다</td></tr>

<tr id="next"><td><div class="title">.next()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다</td></tr>

<tr id="nextAll"><td><div class="title">.nextAll()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="prev"><td><div class="title">.prev()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다</td></tr>

<tr id="prevAll"><td><div class="title">.prevAll()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="siblings"><td><div class="title">.siblings()</div>각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="slice"><td><div class="title">.slice(start, [end])</div>현제의 엘리먼트 셋 중 start에서 end까지의 엘리먼트를 선택한다</td></tr>

</table>

</div>

div#root

<div>

div

</div>

<div>

div

<ul>

</ul>

</div>

<div>

div

</div>

var $wrapper = $('#root').addClass('selected');

$('#code').keydown(function(e){

if(e.keyCode == 13){

eval($(this).val());

return false;

}

}).change(function(){

eval($(this).val());

});

$('tr').click(function(){

$(this).find('.title').toggleClass('checked');

})

</script>

</body>

</html>

에니메이션

<!DOCTYPE html>

<html>

<head>

<style> span {

color:red;

cursor:pointer;

}

div {

margin:3px;

width:80px;

height:80px;

}

div {

background:#f00;

}

</style>

</head>

<body>

target

</div>

var $this = $(e.target);

switch($this.attr('id')) {

case 'fadeout':

$('#target').fadeOut('slow');

break;

case 'fadein':

$('#target').fadeIn('slow');

break;

case 'hide':

$('#target').hide();

break;

case 'show':

$('#target').show();

break;

case 'slidedown':

$('#target').hide().slideDown('slow');

break;

case 'slideup':

$('#target').slideUp('slow');

break;

case 'mix':

$('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});

break;

}

})

</script>

</body>

</html>

예제2.

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color:#bca;

width:100px;

border:1px solid green;

}

</style>

</head>

<body>

» Run

</button>

Hello!

</div>

$("#go").click( function() {

$("#block").animate({

width: "300px",

opacity: 0.4,

marginLeft: "50px",

fontSize: "30px",

borderWidth: "10px"

}, 3000);

});</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

$('#getResult').click( function() {

$('#result').html('');

$.ajax({

url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',

dataType:'json',

type:'POST',

data:{'msg':$('#msg').val()},

success:function(result){

if(result['result']==true){

$('#result').html(result['msg']);

}

});

})

</script>

</body>

</html>

예제 1-2. 서버 쪽 로직

echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));

'프로그래밍 > Jquery' 카테고리의 다른 글

Jquery - data-icon="arrow-u" 속성이 안 될때 (0)	2015.01.29
Jquery - addClass 메소드 사용법 및 설명 (0)	2015.01.18
Jquery - html 메소드 사용법 (0)	2015.01.04
Jquery - preventDefault() 메소드 (0)	2015.01.03
Jquery - Chrome Hack : Cross-Domain 문제를 피하는 법 (0)	2014.12.29
Jquery -$ajax 크로스 도메인 문제 해결 방법 (0)	2014.12.29
Jquery - $.ajax() 메서드의 옵션 (0)	2014.12.28
jquery - 슬라이더 효과를 사용한 이미지 전환 방법 (이미지슬라이더) (0)	2014.12.21

현재글생활코딩 jQuery 강의노트

가카리의 공부방