JQuery 입문

JQuery 사용하기 

https://developers.google.com/speed/libraries#jquery

호스팅된 라이브러리  |  Hosted Libraries  |  Google for Developers

JQuery 사이트의 다운로드에서 Google CDN 링크 

JQuery의 3.x snippet의 

<script>태그를 복사해서 html의 head에 붙여준다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

jQuery()       [$()]

jQuery()는 팩토리 함수로 작업할 객체를 Wrapper객체로 만들어주는 공장의 역할을 한다. 

jQueryWrapper객체가 되면 다양한 프로퍼티를 다룰 수 있게 된다. 

jQuery() 대신 $() 를 사용할 수도 있다. 

$('h1').css('color','blue').text('바꿈');

$('h1')으로 h1태그 객체들을 Wrapper객체로 반환해주고 

css()함수로 Wrapper객체들의 css를 변경해주고 다시 반환해준다. 

반환받은 객체는 다시 text() 함수로 text가 변경되고 wrapper객체가 반환된다. 

jQuery는 기본적으로 factory 함수로 대부분 wrapper객체를 반환해주기 때문에 체이닝 코딩이 가능하다.

 

jQuery는 string(css selector, <tag>), object(DOM node), function을 인자로 받을 수 있다. 

 

대부분의 작업은 돔트리가 생성되어야 시작할 수 있는 작업이므로 

$(function(){

onload 이후 실행할 코드 

});

onload에 등록된 함수안에서 기술한다. 

$(function(){...});

 

let h2Text = $('h2').text();//get은 모든 텍스트, 자손의 텍스트를 누적해서 반환해줌

$('h2').text();

text() 함수에 인자가 없으면 get, 인자가 있으면 set을 해주는 함수 

 

$('.contents1').html("<u>jQuery는 오픈소스 </u>");//tag 파싱 함

.html()함수는 innerHTML 과 같은 역할을 하는 함수로 인자로 받은 내용을 html로 올려주어 만약, 태그가 있다면 parsing된다.

 

반면, .text()함수는  text로 받기 때문에 <>태그가 있어도 text 그대로 출력해준다. 

 

$('h2').text(function(elementIndex,previousText){//엘레먼트 인덱스와 변경전 기존 값을 인자로 줌, function실행 결과를 text에

if(index%2==0){

return `하하하하하[${index}]`;

}else{

return `glglglgl[${index}]`;

}

});

 

text()함수에 함수를 인자로 넣으면 요소의 인덱스와 그 텍스트를 사용할 수 있다. 

 

jQuery에 string을 인자로 넣을 때는 <tag>나 css Selector인데 css Selector라면 당연히 > . # 도 사용할 수 있다.

$('body > *').css('font-wegith','bold');

 

 

jQuery 함수 이용

 

each(array,function(arrayIndex,name){...}}

array를 받았을 경우 각 원소들을 순회하고 

객체를 받았을 경우 객체의 프로퍼티를 순회한다. 

$.each(memeberNameArray,function(index,name){//컬렉션일 경우 원소를 , 객체일 경우 객체의 프로퍼티를 순회

$('#memberNameList').append(`<li>${name}</li>`);

});

 

grep(array,function(name,index){...}) 

let filterNameArray=$.grep(memberNameArray,(name,index)=>name.startsWith('k'));//한줄이면 {}바디 필요 없고 return 한줄뿐이면 return 생략

function에서는 name의 원소를 받아서 true, false를 반환하고 true인 원소들만 새로운 배열로 모아서 반환해준다. 

이때, 기존의 배열은 변하지 않는다. 

each 함수는 함수에서 index, name의 순서로 인자로 받지만 

grep 함수는 함수에서 name, index의 순서로 인자를 받는다. 

 

sort([function(){...}])

sort()함수는 배열을 오름차순 정렬해준다. 

내림차순 정렬하려면 function을 정의해주거나 reverse()함수를 사용해서 오름차순된 배열을 뒤집어준다. 

 

내림차순 정렬 함수 정의하기 

memberScoreArray.sort((a,b)=>b-a);

연속한 원소를 인자로 받아서 두 원소를 뺏을때 양수이면 두 원소의 순서를 바꿔준다. 

뒤에 있는 원소인 b가 a보다 크면 바꿔줘야 내림차순으로 정렬되므로 b-a를 반환해주면 된다. 

memberArray.sort(function(member1,member2){

if(member1.id>member2.id)

return 1 ;

else return -1;

});

만약 객체를 정렬한다면 객체의 어떤 프로퍼티를 기준으로 정렬할지 정하고 그 프로퍼티의 대소를 비교하는 식을 세워주면 된다. 

string 프로퍼티로 대소를 비교하면 큰 값이 앞에 있으면 오름차순 정렬일 때는 1(양수)을,

내림차순 정렬일때는 -1(음수)을 반환해준다. 

 

join()함수 

배열의 원소를 join의 인자로 연결하여 하나의 문자열로 반환해준다. 

memberNameArray.join(' -> ')

 

 

++css selector 

 

 

속성 선택자 [attribute]

$('a[target]').css('border','3px solid green');

[target] 

target 속성이 존재하는 모든 객체

 

a[target] 

a태그의 target 속성이 존재하는 모든 객체  

 

a[target != '_blank']{

a[target!='_blank']

a태그의 target 속성이 _blank가 아닌 모든 객체 

 

[attribute ^= 'value']

attribute의 값이 'value'로 시작하는 모든 객체

 

[attribute $= 'value']

attribute의 값이 'value'로 끝나는 모든 객체

 

[attribute = 'value']

attribute의 값이 'value'와 일치하는 모든 객체

 

[attribute *= 'value']

attribute의 값이 'value'을 포함하는 모든 객체

 

[attribute ~= 'value']

attribute의 값이 'value'단어를 포함하는 모든 객체 (단어라 함은 value를 공백으로 구분해 줄 수 있어야 한다.)

 

 

: pseudo class 가상클래스(의사클래스)

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN

 

선택한 요소가 특정 조건을 만족하여야 적용되게 할 수 있다. 

 

LVHA(Link - Visited - Hover - Active) 여러개의 슈도클래스를 같이 작성할 때는 순서를 지켜 작성해야 정상 작동한다.

:link 방문전 

a:link{

color:grey;

}

:visited 방문후

:hover 마우스가 위에 올라와있을때

:active 누르고 있을때

:first(last)-child 첫번째(마지막) 자식인 경우

 

:: pseudo element 가상 엘레먼트

::before(after) 요소의 앞(뒤)에 요소 삽

::first-letter 요소의 첫 글자

h2::first-letter{ }

::selection 사용자가 선택한 요소

::placeholder placeholder의 텍스트 

 

jQuery에서 제공하는 슈도클래스 

$('tr:eq(0) > td:gt(2)').css('background','orange');

:eq(),gt(),lt() 요소의 값이 일치(크거나 작으면)하면

:odd() 요소의 값이 홀수이면

$('tr:eq(2)>td:even').css('background','purple');

:even() 요소의 값이 짝수이면

:first() 요소의 첫번째 값

$('tr:eq(3)>td:first').css('background','purple');

:last() 요소의 마지막 

:nth-child(n) n번째 자식

:not() ~가 아니면 

td.notSelect{

border: 0.5px dashed blue;

}

td태그 중 notSelect클래스 

td:not(.notSelect)

notSelect 클래스가 아니면