<JQUERY> 선택자와 css, attr, prop 사용하기

"제이쿼리는 HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리" - 위키피디아

오늘 처음 배우는 제이쿼리 자바스크립트를 이용해서 HTML, CSS에 쉽게 접근하기 위해서 쓴다는데 아직은 필요성을 모르겠다.

 

script에다가 소스를 걸어서 제이쿼리를 가져오는 방법은 2가지가 있다. 

 

1. 제이쿼리 사이트에 들어가서 파일을 다운 받아오는 방법

<script src="lib/jquery-3.6.0.min.js"></script>

2. 인터넷에서 링크를 가져와서 연결해주는 방법(CDN이라고 부른다)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

제이쿼리를 사용하는 방법은 아래와 같다.

$(document).ready(function(){
		//jquery 실행부
		
		//jqeury 선택자 : 태그, 클래스, 아이디....
		
		//스타일시트 -> css("속성","값") fontSize(js에서만)
		$("input").css("font-size","2em"); //태그선택자
		$("#username").css("color","green"); //id선택자
		$(".c1").css("background-color","pink"); //class 선택자
		
		//jqeury에서 html 속성 처리 -> attr("속성", "값") -> 속성과 속성값이 존재할때
		$("img").attr("src","../img/icon05.png");
		$(".c1").attr('value', '홍길동');
		
		//html의 속성 처리 -> 속성명은 존재하나 속성값이 없는 속성들
		$("#username").prop("readonly", true);
		$("#hobby").prop("checked", true);
		
		console.log($('#hobby').prop('checked'));
		console.log($('#username').attr('value'));
	});

 

$ 심볼과 함께 괄호 속에 객체가 들어간다. 위에 $(document).ready()라는 함수는 document가 실행이 완료되면(ready) 시작되는 함수라는 뜻.

제이쿼리도 선택자를 이용해서 스타일을 바꿀 수 있다. 

css는 자바스크립트에서 style을 말한다.

attr은 html 속성을 처리할 수 있고 값이 있는 속성을 처리한다. 첫번째 ''속에 속성을 적고 그 다음 두번째 ''사이에 값을 적는다.

prop도 마찬가지로 html속성을 처리하지만 값이 정해지지않아도 되는 속성을 처리할때 사용된다.