jQuery
jQuery는 버전이 맞고 다운을 받거나, 아래 링크를 적어야 사용가능하다.
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
- jquery 동작 $의 의미 및 ready함수
$(document).ready(function(){})
$ // 제이쿼리 의미(jQuery라고 적어도 동작함), ready() 함수
$(document).ready(function(){} 스크립트가 작동하게 하는 태그 function(){
여기에 내용을 적으면 됨}
- javascript와 구분되는 jQuery에서 태그 선택 방법
document.getElementsByTagName('p')[0]
//p태그는 하나밖에 없긴하지만, 여러개일 수 있기 때문에 인덱스 번호도 적어야 한다.
$('p'); (제이쿼리 사용) 위 태그와 동일한 기능을 함
$('') ()안에 태그, 클래스, id등 다 넣어서 구분한다.
속성은 []안에 넣는다.
예) $('[href]').hide(); //앵커태그를 숨겨라
$('a[target="_blank"]').hide();
()바깥쪽에 ''를 붙일경우 ()안쪽은 ""으로 적어야함 동일하게 할 경우 가까운 ''를 인식한다.
- jQuery와 javascript의 css style 주는 방법 차이★
$('.logo').css("background-color",'yellow') 제이쿼리로 css style주는 방법 예시
.setAttribute("background-color",'yellow'); 자바스크립트로 css style주는 방법 예시
jQuery 표현과 css표현 방식이 비슷해서 헷갈리기 쉽다.
예)css방식 tr:nth-child(even) {border: dotted blue;}
jQuery 방식 $('tr:even').css('border', 'dotted','blue')
- 요소 선택하는 방법들
[속성 = '속성값'] 속성값과 일치
[속성 ~= '속성값'] 속성값에서 특정 문자열로 이루어진 하나의 단어를 포함하는 요소선택. 단어의 기준은 공백이다. -으로 연결된 것은 제외
[속성 |= '속성값'] 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 선택
[속성 ^= '속성값'] 속성값이 특정 문자열로 시작하는 모든 요소를 선택
[속성 *= '속성값'] 속성값에 특정 문자열을 포함하는 모든 요소를 선택
[속성 $= '속성값'] 속성값이 특정 문자열로 끝나는 모든요소
- 함수를 활용한 jQuery
$('#hide').click(function () {$('p').hide();}); // id가 hide인거를 누르면 p태그인거를 숨겨라 라는 뜻
$('button').click(function(){$('#div1').fadeIn(); //버튼을 누르면 id가 div1인 것을 서서히 나오게 해라
- hide 함수
hide(1000), hide('slow') hide('fast') 등 // 숨겨지는 속도
- 특정 특정 태그 중 특정 id값인 것 선택
cf) $('button#out') 버튼 태그중 id가 out인것
- 내용을 보였다가 안보이게 하는 함수들
.fadeIn() , .fadeOut(), .fadeToggle() 등의 태그가 있음
비슷하게 .slideUp .slideDown slideToggle 등이 있음
- table 태그 참고
table 태그에 border-collapse: collapse; 해주면 사이 공간 없어짐
- jQuery 여러 선택 예시들
$(':header') //body안에 위쪽은 header라서 위에 나오는 애들이 적용 된다
$('li:eq(0)') // li에 eq(이퀄, 같다) 인덱스0번인 태그를 적용함
$('li:gt(0)') // li에 gt(그레이털 덴, 더 큰) 인덱스0번보다 큰 태그들을 적용함
$(':root') // body에 해당한다고 보면 됨
$(':animated') //움직이는 것이 있다면~ 이라는 뜻
$('#m1 > p:contains("css")') // idm1의 아래 p태그가 "css"라는 내용이 있는 것
$('#m1 > p:empty') //idm1의 아래 p태그 중 내용이 비어있는 것
$('#m2 > span:parent')//idm2의 아래 span의 부모태그
$('#m3 > section:has(article)') //idm3의 아래 section에서 article을 가지고 있는 section
$('input:text')// input 중에서 type이 text인 것 (css와 달리 []안적어도 됨)
$(':button') //앞에 :를 주고 속성처럼 적은것, 그냥 'button'으로 적어도 된다
$('option:selected') //option중에 선택된 것
$('#m1 > div').add("#m1 > p") //idm1아래 div에다가 idm1 아래 p도 추가해서 선택해라
$('#m3').find('span') // idm3중에서 span을 찾아라
- 자동실행 함수
()(); 의 형태
예) (function upDown() { $('h2').slideToggle(2000, upDown)})();
앞에 나온 함수이름을 한번더 해주는게 callback 함수 사용
- 체인닝 함수
함수1().함수2() 함수1이 끝나고 함수2를 연속해서 작동한다.
예) $('#m2').children().children('span')
//id m2의 자녀들 중 또 자녀들 중 span
- 보이지않는 속성 선택
$('div:hidden') //위에 속성들 중에서 display:none은 있지만 display:hidden은 없었다. 하지만 화면상에 보이지 않기 때문에 display:hidden이라고 적어도 적용된다
- if함수 사용
if($('#m4').children().is('p')){console.log('p태그를 갖고 있습니다')} // 만약 idm4의 자식 태그중에 p태그가 있다면~ 하라~
- jQuery의 $.each (=javascript의 for each)★
let subjectInfo = {subject : 'html',grade : 1 , days: 20} //객체(key,value)로 변수를 만들고
$.each(subjectInfo,function(key,value){console.log(key + ":" + value)}) // 이렇게 쓰면 각각 key와 value 값을 출력
- html(), text()
javascript의 innerHTML() , innerText()는 jQuery에서 html(),text()로 바뀐다
console.log($('#demo1').text()); // iddemo1안의 내용을 출력
$('#demo1').text('full-stack-course') //iddemo1안에 full-stack-course 라는 내용을 넣어라
- 함수와 return
function (index, text) {return "div요소의 텍스트는 " + text + "이고, 인덱스는" + index} //return 아래 내용을 실행하라는 함수
- class 삭제
$('#m1 > div').removeClass('con') //id m1아래 div에서 class'con'을 제거하라
- animate 사용
$(selector).animate({속성 : '속성값'});
예)$('div').animate({left:'250px'})
animate 속성중에서 예) height : '+=150px' 이런식으로하면 높이가 누적해서 커진다 , height : 'toggle' 이런식으로 나왔다가 사라지게 할 수 도 있다
- animate 중지
$('#panel').stop(); #panel에 animation이 진행중일 떄 .stop()으로 중지 시킬 수 있음
- .on 사용법★
$('#gnb .m').on('mouseenter',function(){}).on('mouseleave',function(){}) // id가gnb인 것의 밑에 m클래스인 것이 마우스가 가져다 대면~ 뭐를 하고 떼면 ~ 뭐를 하라
.on("이벤트내용') .
- this 사용법★
$('ul',this).show(); //function 안에 이걸 넣는다.
선택한 바로 그 ul만 나오게 하려고 ul,this를 넣는다.
$(this).siblings('li').find('ul').hide(); 선택한 것의 형제 태그li중 ul을 찾아서 숨겨라
