[jQuery] jQuery css , attr 추가, 프로퍼티 설정

[jQuery] jQuery css , attr 추가, 프로퍼티 설정

---

✔️ jQuery css

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

 

📓 예제 1

$(function(){
	$("li").css("color", "blue");
	
	$("p").css({
		fontSize : "17px",
		color: "#fff",
		"background-color":"#333",
		marginBottom:"5px",
		padding:"5px"
	});
	
	let c = $("p").css("backgroundColor");
	console.log(c);
	
	
});

 

📓 예제 2

$(function(){
	$(".item").click(function(){
		let color = $(this).css("backgroundColor"); //모두 rgb(255,255,0)형식으로
		let color2 = this.style.backgroundColor //red(영어색상)는 red, 나머지는  rgb(255,255,0)형식으로
		
		$("#resultLayout").html("color : " + color + ", " + color2);
		
	})
})

 

 

✔️ jQuery 프로퍼티 설정 / 반환

✨ attr 로 되는것도 있고 안되는 것도 있다.
.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);

 

📓 예제 1

$(function(){
	$(".btn1").click(function(){
		//$("form input[name=receiveMail]").attr("checked", true);
		
		$("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(){
		let s1 = $("form input[name=hak]").prop("readonly");
		
		let s2 = $("form input[name=name]").is(":disabled");
		let s3 = $("form input[name=receiveMail]").is(":checked");
		
		let s4 = $("#photo").attr("src");
		
		let s = "<p>학번 : readonly - " + s1 + "</p>";
		s += "<p>이름 : disabled - " + s2 + "</p>";
		s += "<p>메일수신 : checked - " + s3 + "</p>";
		s += "<p>이미지 : scr - " + s4 + "</p>";
		
		$(".result-box").html(s);
		
	});
	
	
	$(".btn3").click(function(){
		//$("form input[name=receiveMail]").attr("checked", false);
		
		$("form input[name=hak]").prop("readonly", false);
		$("form input[name=name]").prop("disabled", false);
		$("form input[name=receiveMail]").prop("checked", false);
		
		$("#photo").removeAttr("src");
		
	});
	
	
});

 

 

✔️ jQuery 클래스

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

 

📓 예제 1

$(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(){
		let b = $("#s2 li").hasClass("item");
		
		if(b){
			alert("클래스 o");
		} else {
			alert("클래스 x");
		}
		
	});
	
		
});

 

 

✔️ jQuery index

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