220223 jquery_메소드, 필터 선택자
*** JQuery
: 자바스크립트 라이브러리(함수) 제공
* 메소드
★ .attr("속성","값") : 태그(element)의 속성(attribute)의 값을 가져오거나, 속성을 추가
<img src="rose.jpg" width=100 title="장미"> <--이 태그를
--> .attr("src","rose.jpg") .attr("width","100") .attr("title","장미") <-- 이런식으로 바꿔 사용
+) .removeAttr("속성") : 속성을 제거
.val() : HTML 폼 요소의 value 속성 값을 지정하고 설정
-> 괄호 안에 아무것도 없을 시 폼 태그에 입력된 텍스트나 선택되어있는 값을 가져옴
.text() : html태그를 적용하지 않고 문자를 출력
-> 괄호 안에 아무것도 없을 시 셀렉터로 지정한 태그의 텍스트를 가져옴
★ .html() : html태그를 적용해 문자를 출력
---> 예를 들어,
$("p").text("현재 X좌표:"+e.clientX+"<br> 현재 Y좌표:"+e.clientY);
$("p").html("현재 X좌표:"+e.clientX+"<br> 현재 Y좌표:"+e.clientY);
이런 두 태그가 있다고 했을 때,
.text()는 [ 현재 X좌표: xxx <br> 현재 Y좌표: yyy ] 로 출력되고
.html()은 [ 현재 X좌표: xxx
현재 Y좌표: yyy ] 로 출력됨
(html 코드인 <br>을 인식할 수 있느냐 없느냐의 차이)
.is(":checked") : 값의 유형을 검사하고 그 결과에 따라 true 또는 false를 반환함
---> id=male인 폼의 값이 checked라면 (콜론(:) 반드시 표기) true 반환시키는 것.
+) if($("#male").is(":checked")) = if(male.checked)
.after() : 선택 요소 뒤에 'HTML 형식으로' 새 요소를 추가, 또는 다른 곳에 있는 요소를 이동
$(this).after("<p>입력 내용을 초기화 합니다.</p>");
.append() : 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가
.prepend() : 선택된 요소의 처음에 새로운 HTML 요소나 콘텐츠를 추가
.test() : 조건식을 만족하는지 여부를 boolean 타입으로 리턴 (유효성 검사 시 사용, 아래에 있음)
.isNaN() : 값에 숫자가 아닌 게 있으면(Not a Number) true, 숫자만 있으면 false 리턴
★ .each() : 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행
var list=['A','B','C','D','E'];
$.each(list, function(index, value) { <--list배열의 index, value를 매개변수로 가져옴
alert(index+":"+value); <-- 출력
$('ol').append('<li>'+value+'</li>'); <-- value를 리스트로 추가
}); ------이 과정을 계속 반복하는 것
+) JSON 형태의 배열 (key : value) 출력 (Ajax 배울 때 json 정리할 것임 지금은 each만 보기)
var array = [ { name: 'Naver', link: 'http://naver.com' },
{ name: 'Daum', link: 'http://daum.net' } ];
var output = '';
$.each(array, function (index, item) {
output += '<a href="' + item.link + '">'; <-- 배열의 값을 변수 item으로 정하고
output += ' <h1>' + item.name + '</h1>'; <-- key를 이용해 value를 호출함
output += '</a>';
$("div").html(output); <--html 코드 출력.. each는 이 과정을 반복 실행
});
※ 함수의 단독 실행 테스트를 해야 해서, 딱히 불러올 태그가 없을 때?
$.each() 이런 식으로 $만 놓고 함수 작성하면 됨
* 필터 선택자 : 기본적으로 <input type="">의 type 값을 [ :value ] 형태로 불러오는 것임
:input ---> 입력 폼 태그 전부(input, textarea, select, button)를 불러오는 필터
:text ---> <input type="text"> 태그만
:radio ---> <input type="radio"> 태그만
ex. 라디오 버튼 클릭 시 스타일이 적용되는 코드
+) 라벨을 클릭했을 때
$("label").click(function(){ <- 클릭한 label
$("label").css("font-weight",""); <- 모든 <label> 태그에 적용
$(this).css("font-weight","bold"); <- 클릭한 label(상위 선택자)에만 적용
}
:checkbox ---> <input type="checkbox"> 태그만
ex. 전체 체크, 전체 체크 해제
$("button").click(function(){ <- 일반 <button> 태그로 만들어놔서 button으로 구해옴
$(":checkbox").attr("checked","checked"); <- 모든 checkbox 값을 checked로
});
$(":reset").click(function(){ <- <input type="reset">인 태그를 불러옴
$(":checkbox").attr("checked",false); <- 모든 checked 해제
// $(":checkbox").removeAttr("checked"); <- attr 내용 중 checked 속성을 remove함
});
★ :checked ---> 라디오&체크박스에서 체크 상태인 태그를 선택
$("label,:checkbox").click(function(){ <--label태그, input type=checkbox 태그 가져옴
$("label").css("background",""); <--기본적으로 label 배경은 투명임
$(":checked").each(function(){ <-- checkbox에 checked 될 때마다 반복 수행
$("label[for='"+$(this).attr("id")+"']").css("background","#CCC");
}); ---> checked일 때 label 배경색을 바꾸는 함수를 반복 실행!
});
※ 태그엔 label for=~ 이지만 선택자로 명시할 때는 [] 넣는 형태로.. 따옴표 활용해서 저렇게..!
label[for='체크된 라벨'] <- 이런 모양을 문자열로 처리하고 체크된 라벨을 따로 받아오는 식으로!
★ :selected ---> select에서 옵션이 선택되면 그 옵션을 구해옴