jQuery
jQuery - 02.요소를 이용한 예제들
보로로롬
2016. 7. 13. 15:44
div태그 영역이 구분이됨!
-------------------------------------------------------------
요소[속성] : [] 안에 주어진 속성을 포함한 모든 요소를 선택
요소[속성=값] : 속성의 값이 주어진 값이 주어진 값과 동일한 모든 요소선택
요소[속성*=값] : 속성의 값이 주어진 값을 포함하는 문자열 지정
요소[속성^=값] : 속성의 값이 주어진 값을 시작하는 문자열 지정
요소[속성$=값] : 속성의 값이 주어진 값을 끝나는 문자열 지정
요소[속성]을 이용한 예제들...
<!DOCTYPE html><html><head><meta charset="EUC-KR"><title>Insert title here</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript">$(document).ready(function(){//1.input태그(요소)중 type속성을 갖는 녀석들 배경으 핑크색으로$('input[type]').css('background', 'pink');//2.input태그(요소)중 type속성이 password인 놈의 글자색:빨강 크기:30$('input[type=password]').css({'color':'red', 'fontSize':'30px'});//여러 속성을 줄때 많이 쓰이는 방법은 메소드 체인// $('input[type=password]').css('color','red').css('fontSize','30px');//3.value의 값이 홍승길인 요소를 찾아서 글자색을 파란색으로 변경$('input[value=도라에몽]').css('color','blue').css('fontSize','30px');$('input[value=도라에몽]').addClass('input').addClass('bgpink'); // 두번째방법으로 따로 input를 만들어서 적용});//4.select태그의 하위 option태그들 중 value속성의 값이 사 로 끝나는 요소를 찾아서 글자색 green으로$('select option[value$=사]').css('color','green');//5.select태그의 하위 option태그들 중 value속성의 값이 회 로 시작되는 요소를 찾아서 글자색 blue으로$('select option[value^=회]').css('color','blue');</script><style type="text/css">.input{color:blue; font-size:24px; }.bgpink{background-color:pink;}</style></head><body><h3>속성 선택자</h3><form>이름 <input type="text" name="name" value="도라에몽"><p/>ID <input type="text"><p/>PW <input type="password"><p/>취미 :<input type="checkbox" name="hobby" value="등산">등산<input type="checkbox" name="hobby" value="낚시">낚시<input type="checkbox" name="hobby" value="수영">수영</p><select name="job"><option value="회사원">회사원</option><option value="개발자">개발자</option><option value="회계사">회계사</option><option value="의사">의사</option><option value="전문직">전문직</option></select></form></body></html>
-------------------------------------------------------------------------------------------------------------//하위 태그 속성>속성과 속성 속성 -> 차이를 알려주는 예제
1번 2번
$('ul>li').css('color','pink'); /. -> 1번사진$('ul li').css('color','red'); // -> 2번사진});<ul><li>HTML</li><li>JavaScript</li><li>CSS</li><li>JQuery</li><ol><li>응용</li><li>웹</li><li>모바일</li></ol><li>SQL</li></ul>---------------------------------------------------------------------------text창을 누르면 배경색이 핑크색으로 바뀌고 다른곳으로가면 화이트가되는 예제<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript">$(document).ready(function(){//input요소 중에서 name속성에 name값을 가지는 놈을 선택$('input[name=name]').bind('focus',function(){// alert('포커스 얻어짐');// $('input[name=name]') ← 이래도 되지만$(this).css('background','pink').val(''); //focus얻을때 원래 있던값 없애기 값세팅도 똑같이 val()}).bind('blur', function(){// alert('이벤트 잃음 ㅠㅠ');//배경색을 원래대로 돌려놓고, 해당 요소에 입력되있는 값을 alert으로 출력var value = $(this).css('background','white').val();alert(value);});});</script></head><body><form>이름 : <input type="text" name="name"></form></body></html>bind : 계속실행one : 한번만실행--------------------------------------------------------------------------------------------------선택한 값을 alert창으로 띄우기 예제<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript">$(document).ready(function(){//input요소 중에서 name속성에 name값을 가지는 놈을 선택$('input[name=name]').bind('focus',function(){// alert('포커스 얻어짐');// $('input[name=name]') ← 이래도 되지만$(this).css('background','pink').val('');}).bind('blur', function(){// alert('이벤트 잃음 ㅠㅠ');//배경색을 원래대로 돌려놓고, 해당 요소에 입력되있는 값을 alert으로 출력var value = $(this).css('background','white').val();alert(value);});//특정 요소에 값이 변했을때 이벤트 처리를 해봅시다!$('select[name=job]').bind('change', function(){if($(this).val() != "0"){alert($(this).find('option[value='+$(this).val()+']').text());}});});</script></head><body><form>이름 : <input type="text" name="name">직업 : <select name="job"><option value="0">--직업선택--</option><option value="1">회사원</option><option value="2">개발자</option><option value="3">의사</option><option value="4">노가더</option></select></form></body></html>--------------------------------------------------------------------------------------------------직업선택후 제출하는 예제<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript">$(document).ready(function(){$('#form').submit(function(){//이름이 비어있으면 이름 칸으로 포커스var idinput = $('input[name=name]');if( idinput.val() ==''){alert('이름이 없음');idinput.focus();return false;//submit을 막음}var type = $('select[name=job]').val();if( type == "0"){alert('직업을 선택');return false;}else if( type == "1"){$(this).attr('action', '1.do');$(this).submit();}else if( type == "2"){$(this).attr('action', '2.do');$(this).submit();}});});</script></head><body><form id="form">이름 : <input type="text" name="name">직업 : <select name="job"><option value="0">--직업선택--</option><option value="1">회사원</option><option value="2">개발자</option><option value="3">의사</option><option value="4">노가더</option></select><input type="submit" value="제출ㅋ"></form></body></html>---------------------------------------------------------------------------------------------------전체선택 및 선택해제 예제<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript">$(document).ready(function(){$('input[type=checkbox].chkAll').bind('click', function(){var chkAll = $('input[type=checkbox].chkAll');if(chkAll.prop('checked')){$('span.chkAll').text('선택해제');$('div input[type=checkbox]').prop('checked',true);}else{$('span.chkAll').text('전체선택');$('div input[type=checkbox]').prop('checked',false);}});$('span.chkAll').bind('click', function(){$('input[type=checkbox].chkAll').click();});});</script></head><body><input type="checkbox" class="chkAll"><span class="chkAll">전체선택</span><br><div id="subChk"><input type="checkbox">HTML5<input type="checkbox">JavaScript<input type="checkbox">CSS3</div></form></body></html>