[jquery] 기본사용법. CSS 속성 주기.

[ 기본사용 법 ]

1. jquery 소환 

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

2. onload 선언
<script> 
$(document).ready(function(){ 여기에 전체 script 작성  }); 
</script> 

 

 

[ 장점 ] : 간편한 문법을 제공한다. 

쉬운 DOM 처리 
쉬운 이벤트 처리 
쉬운 CSS 처리 
쉬운 Ajax 처리 

 

[ 단점 ]

- 한 때 정말 잘 나갔는데,  HTML 이 부활하고, 뒷 편으로 물러나는 중이다. 

- 아직은 쓰이는, 쓰였던 코드들이 많은 시점이다. 

- 앞으로 몇 년후에도 쓰이고 있을지는 미정 

 

 

[ 1. CSS Selector ] 

 

< 기본 형태 >

 

$("적용대상").css( "css속성",  "속성값" );

: 적용대상을 찾아서 css 속성을 속성값으로 SET 하겠다. 

 

[ # 아이디 ]
$("#second").css("color", "pink");

: second 란 아이디를 가진 태그를 찾아서, color 속성을 pink 로 set 하겠다. 

 

< GET 사용법 >

alert( $("#second").css("color") );

:  second 아이디로 태그 찾아서 css 속성 color 의 속성값을 가져온다. 
=> rgb (200, 230, 400)

[ "태그" ] 
$("h1").css("color", "yellow");
: 기본 h1 모든 태그에 적용

 

< 태그가 많을 때, 구별해서 적용하기 기술들  >

$("td:first").css("color", "yellow");
:  첫번째 등장하는 td 태그 선택

 

$("td:first-child").css("color", "yellow");
: ( css + jquery ) td태그의 부모태그로 거슬러 올라가서
첫번째 태그이고 td인것 
 => tr(부모) 에서 첫번째인 td들 전체에 적용 ( 첫 컬럼에 쭉 적용 )

$("td:last-child").css("color", "yellow");
:  tr에서 마지막인 td 전체에 적용  ( 마지막 컬럼에 쭉 적용 ) 

 

$("tr:nth-child(2n)").css("color", "pink");
: tr에서 2n번째 줄인 것 들에 적용  

< even odd 사용 ( jquery용 ) >
$("tr:even td").css("color", "yellow");
$("tr:odd td").css("color", "pink");
:  짝/홀수번째인 tr의 모든 td 에 적용
=>  tr이 th 도 가지고 있기때문에, index 0 번은 th가 가져감. 

=> index 번호가 홀짝인지에 따라 적용됨 

< eq  gt  lt  사용   > 
$("tr:eq(3) td").css("color", "pink"); //3번인덱스 equal
$("tr:gt(3) td").css("color", "yellow"); //3번인덱스보다 greater than
$("tr:lt(3) td").css("color", "blue");    //3번인덱스보다 less than

(index 순서로 셈)

- 특히나 equal eq 는 자주 쓰인다. index 로 가져올때 사용 

 

<  select 태그 >
$("select option:selected").css("color", "pink");

 select 태그에서 option 이 selected 인것에 set 

[ . 클래스 ]

 

$(".red").css("color", "blue");
: 클래스 red 인거 set 

[ 자손포함관계 ]
$("h1 a").css("color", "green");

[ 여러대상에 콤마로 ]
$("h1, td").css("color", "olive");

 

[ and 조건주기 ]
$("h1#second").css("color", "orange");
: h1이면서 아이디가 second 인것에 적용
( 공백없이 바로 붙여서 )

[ 태그에 속성조건 걸어서 주기 ]
$("input[type = button]").css("color", "yellow");
- 이게 기본인데, 

[ : (filtering)  ] 사용 가능
=> 이 태그에서 : 이걸 가진것만 가져와

 

$("input:text").css("color", "yellow");
$("input:button").css("color", "yellow");

: input 태그중에 속성에 text / button 가진것만 가져와 

 

$("input:checked").css("color", "green");
: input 태그중에 checked 속성 가진것만 가져와

(checked checked - checkbox,radio에 적용 )

 

[ 와일드카드 ]

 

$("input[type^=te]").css("color", "yellow");
: input 태그중에 type이 te 로 "시작하는" 것에 적용

$("input[type$=l]").css("color", "pink");
: input 태그중에 type이 l로 "끝나는" 것에 적용

//$("input[type*=e]").css("color", "green");
// input 태그중에 type이 e 를 "포함"하는 것에 적용

 

[  콜백함수 + CSS ] 

    $("div").css('color', function(i){

    if(i == 0){return "red"; }
    else if(i ==1){return "green";}
    else if(i ==2){return "blue";}
    else if(i ==3){return "orange";}
    else { return "pink";}
    })

=> 속성값 자리에 콜백함수를 걸어두고, 

index 등에 따라서 return 값을 다르게 줘놓고 

동적으로 CSS 값을 줄 수 있다.