Jquery의 사용 및 적용하는 것을 배우고 중점적으로 적용하는 시간을 가졌다.
<jquery의 기본 문법>
$('#id값').html();
– 선택요소의 html 내용을 가져온다. innerHTML과 동일.
$('#id값').text();
– 선택요소 내의 html태그 요소를 제외한 내용을 가져온다. innerText innerText와 동일.
$('#id값').val();
– input 태그의 value 값을 조회.
(Jquery cdn 임포트는 기본이기에 생략한다.)
첫 째로 해야할 것은 Jquery가 작동할 수 있는 환경을 셋팅해야 하는데 script 태그를 만들어준다.
style 태그 밑에 만들어 시인성을 좋게 만드는 게 팁이라면 팁이다.
두번 째 내가 실행 시키고자 하는 div구역에 id를 지정해주고 지정한 버튼에 onclick='함수이름'
지정된 id를 적용해 기능 구현을 하게 된다.
<script>
function 함수() {
$('#(id값)')
}
</script>아래의 예제 코드를 보면
<script>
function openclose() {
$('#mybox').toggle()
}
</script> 위의 코드는 지정한 버튼을 누르면 그에 해당하는 박스가 나타났다 사라지기를 반복하는 기능이다.
그 기능이 작동하게 하는 것이 .toggle()이다. 두 가지 상태 사이를 전환하는 동작을 의미, 어떤 속성이나 상태를 켜거나 끄는 동작인 것이다.
$('#아이디값') 으로 어떤 html태그를 바꿀 것인지 지정해준다. 지정했다면 바꿔줄 명령어도 적어준다.
위의 코드에 나온 $('#mybox') 뒤에 .toggle()이 명령어다.
- append() -> 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
예를 들면,
$(target).append(source)
source 객체를 target객체의 마지막에 추가한다.
for문과 foreach문의 차이점
-
1. for문
1) 에러 발생시 다음으로 넘어가지 못하고 작업이 중단된다.(단, 조건에 부합하면 계속해서 순환한다.)
2) return을 사용할 수 있다.
3) 중간에 멈출 수 있다. (break, continue 사용 가능) -
2. foreach문
1) 에러가 발생해도 작업이 진행된다. 단, 내가 원하는 순서가 아닐 수 있다.
2) return을 사용할 수 없다. (반환값이 undefined이기 때문)
3) 중간에 멈출 수 없다.( break, continue 사용 불가)
<백틱(`)>
1.문자열 안에 변수를 넣을 수 있다.
2.함수 호출 -> 매개변수가 문자열,배열로 인식
