제이쿼리 - 기초(2)

$(function(){
	// $("label").parent().css({border:"1px solid red"}); // 아버지인 p 태그 찾기
	
	// span.item의 아버지
	// $("span.item").parent().css({border:"1px solid red"});
	
	// span.item의 아버지가 li인 경우
	// $("span.item").parent("li").css({border:"1px solid red"});
	
	// div는 할아버지라서 적용 안됨
	// $("span.item").parent("div").css({border:"1px solid red"});
	
	// parent 뒤에 s 붙여서 parents라고 하면 찾을 수 있다.
	// $("span.item").parents("div").css({background:"yellow"});
	
	// 가장 가까운 조상 찾기
	// $("span.item").parent().parent().parent("div").css({background:"yellow"});
	$("span.item").closest("div").css({background:"yellow"});
	
	// div > ul > li에서 div를 제외한 모든 조상 요소
	$("li").parentsUntil("div").css({border:"1px solid red"});
	
});

찾고자 하는 태그를 거슬러 올라가야 할 때 유용함

$(function(){
	$("span.item").click(function(){
		var s = $(".inner-box").closest("div").find("p").data("subject");
		alert(s);
	});
});


/*
-- 상위(ancestor:조상) 요소의 탐색
  .parent( [selector] ) : 선택한 요소의 부모(parent) 요소를 선택한다.
  .parents( [selector] ) : 선택한 요소의 상위(ancestor) 요소를 모두 선택한다.
  .parentsUntil( [selector] [,filter] ) : 선택한 요소의 상위 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.
  .closest( selector ) : 선택한 요소를 포함한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택한다.
*/

클래스를 먼저 찾고 그 클래스에서 가장 가까운 div 태그를 찾고 그 div안에서 p 태그를 찾고

p태그 안에있는 data형식인 subject의 값을 찾는다.

 

$(function(){
	
	// div의 모든 자식 요소
	$("span.item").closest("div").children().css("color", "blue");
	
	// div 자손중 p 태그
	$("span.item").closest("div").find("p").css("background", "yellow");
	
	
});

/*
-- 하위(descendant:자손) 요소의 탐색
   .children( [selector] ) : 선택한 요소의 자식(child) 요소를 모두 선택한다.
   .find( selector ) : 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택한다.
*/

반대로 자식을 찾는거도 가능

 

$(function() {
	// 처음, 마지막
	// $("#s1 li").first().css("background", "#eee");
	// $("#s1 li").last().css("background", "#eee");
	// $("#s1 li").eq(0).css("background", "#eee"); // 처음
	// $("#s1 li").eq(-1).css("background", "#eee"); // 마지막
	
	// $("#s1 li").filter(":odd").css("background", "#eee"); // 홀수번째
	
	// $("#s1 li").not(":odd").css("background", "#eee"); // 홀수 제외
	
	$("#s1 li").has(".item").css("border", "1px solid red"); // li 요소중 클래스 item을 하위 요소로 가진 모든 li 요소
	
	if($("label").parents().is("p")){ // 존재하면 true
		$(".box1").text("<label> 요소의 상위 요소로 p 요소가 존재");
	}
	
	// map() : 선택한 요소 집합의 각 요소마다 지정된 콜백 함수 실행
	var val = $("#s1 li").map(function(){
		return $(this).html();
	}).get().join(",");
	$(".box2").html(val);
	
	// 인덱스 범위의 요소
	$("#s2 li").slice(2).css("color", "tomato"); // 인덱스 2 이상
	$("#s2 li").slice(1, 3).css("border", "1px solid #777"); // 인덱스 1이상, 3미만
	
});

$(function(){
	$(".box3").css("background", "tomato");
	
	$(".btn1").click(function(){
		var isHidden = $(".box3").is(":hidden");
		// var isVisible = $(".box3").is(":visible");
		
		if(isHidden) {
			$(".box3").show(300);
		} else {
			$(".box3").hide(300);
		}
	})
});


/*
-- 필터링 메소드
  .first() : 선택한 요소 중에서 첫 번째 요소를 선택함.
  .last() : 선택한 요소 중에서 마지막 요소를 선택함.
  .eq() : 선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함.
  .filter() : 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택함.
  .not() : 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택함.
  .has() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택함.
  .is() : 선택한 요소 중에서 전달받은 선택자에 해당하는 요소가 하나라도 존재하면 참(true)을 반환함.
  .map() : 선택한 요소 집합의 각 요소마다 콜백 함수를 실행하고, 그 반환값으로 구성된 jQuery 객체를 반환함.
  .slice() : 선택한 요소 중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택함.
*/

필터링 메소드

 

$(function(){
	// .item1과 .item2 요소의 border 변경
	// $(".item1 .item2").css("border", "1px solid green");
	//$(".item1").add("item2").css("border", "1px solid green");
	
	// $("ul#s2").find(".item3").css("border", "1px solid green");
	
	/// ul#s2의 자식인 .item3과 ul#s2
	$("ul#s2").find(".item3").addBack().css("border", "1px solid tomato");
	
	$("p#p1").find(".label").end().css("border", "1px solid tomato");
	
	
	// contents() : 선택 요소의 자식(주석, 텍스트 포함)
	$("ul#s2").contents().find(".item4").css("background", "yellow");
	
	
	
	
});


/*
-- 기타 탐색 메소드
  .add() : 선택한 요소에 다른 요소를 추가 선택한다.
  .addBack() : 선택한 요소의 집합에 바로 전에 선택했던 요소를 추가한다.
  .end() : 마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원한다.
  .offsetParent() : DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 요소를 선택한다.
  .contents() : 선택한 요소의 자식(child) 요소를 모두 선택한다. (텍스트 노드와 주석 노드까지 모두 포함)
*/

요소 추가 메소드

 

$(function() {
	// 스타일 설정
	$("li").css("color", "blue");
	
	// 여러 스타일 지정
	$("p").css({
		"font-size":"17px",
		"color":"#fff",
		"backgroundColor":"#333",
		"margin-botton":"5px",
		"padding":"5px"
		});
	
	// 스타일 반환
	var c = $("p").css("backgroundColor");
	console.log(c); // rgb(51, 51, 51)
	
});


/*
-- css
  .css() : css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다.
--속성명 설정 방식
  - JavaScript에서는 하이픈(-)으로 연결된 CSS 속성 명을 사용할 때, 하이픈(-)을 제거하고 이름을 camelCase 방식으로 바꿔서 사용해야 한다.
    font-size => fontSize로 변경해서 사용해야 함
  - jQuery의 .css() 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식의 속성 명을 둘다 사용할 수 있다.
    font-size, fontSize 둘다 사용 가능
*/

이렇게 css를 지정할 수 도 있다.

 

$(function(){
	$(".item").click(function(){
		var color = $(this).css("background-color"); // rgb(255, 255, 0) 형식으로만 반환
		var color2 = this.style.backgroundColor; // rgb 또는 #523456은 rgb로, red는 red로
		
		$("#resultLayout").html("duv color : " + color + ", " + color2);
	});
});

색상도 가져 올 수 있고

 

$(function(){
	$(".btn1").click(function(){
		
		// readonly, disabled, checked, selected 속성을 변경할 때는 일반적으로
		// prop() 메소드를 사용하고, 나머지 속성은 attr() 메소드를 사용한다.
		$("form input[name=hak]").prop("readonly", true);
		$("form input[name=name]").prop("disabled", true);
		$("form input[name=receiveMail]").prop("checked", true);
		
		$("#photo").attr("src", "img.png");
	});
	
	$(".btn2").click(function(){
		var s1 = $("form input[name=hak]").prop("readonly"); // :readonly 필터는 없음
		var s2 = $("form input[name=name]").is(":disabled"); // 속성이 아니니까 is 필터는 is 써야함
		var s3 = $("form input[name=receiveMail]").is(":checked");
		
		var s4 = $("#photo").attr("src");
		
		var s = "<p>학번 : readonly - " + s1 + "</p>";
		s += "<p>이름 : disabled - " + s2 + "</p>";
		s += "<p>메일 수신 checked - " + s3 + "</p>";
		s += "<p>이미지 : src - " + s4 + "</p>";
		
		$(".result-box").html(s);
		
	});
	
	$(".btn3").click(function(){
		$("form input[name=hak]").prop("readonly", false);
		$("form input[name=name]").prop("disabled", false);
		$("form input[name=receiveMail]").prop("checked", false);
		
		$("#photo").removeAttr("src");
	});
});


/*
-- 프로퍼티 설정 / 반환
.attr() : 선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정한다.
.prop() : 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.
.removeAttr() : 선택한 요소에서 지정된 속성(attribute)을 제거한다.
.removeProp() : 선택한 요소에서 지정된 프로퍼티(property)를 제거한다.

-- attr() 와 prop() 비교
  var s = $("#chk").attr("checked"); => "checked"/undefined 반환 => HTML의 텍스트 적인 속성을 설정하거나 리턴
  var s = $("#chk").prop("checked"); => true/false 반환 => 객체의 자바스크립트 속성을 설정하거나 리턴(Boolean)
  var s = $("#chk").is(":checked"); => true/false 반환 => 선택여부 확인

-- readonly, disabled 속성 설정은 .attr()로 가능 하지만 .prop()를 사용한다.
  $("form input[name=subject]").attr("readonly", "readonly");
  $("form input[name=subject]").attr("disabled", "disabled");

-- checkbox의 checked, select option의 selected는 반드시 .prop()를 사용. attr() 사용시 문제가 발생할 수 있다.
  $("form input[name=subject]").prop("readonly", true);
  $("form input[name=subject]").prop("disabled", true);
  $("form input[name=chk]").prop("checked", true);
  $("form select[name=city] option").prop("selected", true);
*/

readonly, disabled, checked, selected 속성을 제이쿼리로 변경할때에는 prop() 메소드를 써야하고

그 외에는 attr()메소드를 쓰면 된다.

 

$("form input[name=hak]").prop("readonly", true); => 폼 안에 input 태그 중 name이 hak인 놈의 속성을 readonly로 바꾼다.

 

$("#photo").attr("src", "img.png"); => id가 photo인 태그의 src속성을 img.png로 바꾼다.

 

$(function(){
	$(".btn1").click(function(){
		// 클래스 추가
		$("#s1 li").addClass("item");
	});
	
	$(".btn2").click(function(){
		// 클래스 제거
		$("#s1 li").removeClass("item");	
	});
		
	$(".btn3").click(function(){
		// 클래스 토글
		$("#s2 li").toggleClass("item");
	});
	
	$(".btn4").click(function(){
		var b = $("#s2 li").hasClass("item");
		if(b) {
			alert("item 클래스 존재");
		} else {
			alert("item 클래스 없음");
		}
	});
	
});


/*
-- 클래스
  .addClass() : 선택된 요소에 인수로 전달받은 클래스를 추가한다.
  .removeClass() : 선택된 요소에서 인수로 전달받은 클래스를 제거한다.
  .toggleClass() : 선택된 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거한다.
  .hasClass() : 인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인한다.
*/

클래스를 추가하고 제거 할 수 있다.

 

$(function(){
	$(".box ul > li").click(function(){
		var idx = $(this).index();
		alert($(this).text() + " 인덱스 : " + idx);
	});
	
	$(".btn").click(function(){
		var item = $("#s1 > .item");
		var idx = $("#s1 > li").index(item);
		alert(idx);
	});
});

/*
-- 인덱스
  .index() : 반환 값은 형제 요소에 상대적인 jQuery 객체 내 첫 번째 요소의 위치를 나타내는 정수.*/

인덱스를 구할 수 있다.