jquery 핵심

노건우·2024년 3월 6일
0

js

목록 보기
2/2

🖊️jquery의 핵심은 달러로 표시하는 것에 있다.

$(선택자).동작함수1().동작함수2() 이러한 형태로 사용

jquery를 왜 사용하는가? jquery는 웹페이지의 이벤트 기능을 위해 사용된다.

  • 📒jquery는 자바스크립트의 라이브러리 중의 하나로, 클릭이나 이벤트 등의 동작을 조작,
    구현하는데 중점을 둔다.

jquery특징.

jquery는 dom구조 탐색이 뛰어나다.

여기서 dom은 document object model로, 문자 그대로 문서객체모델이다. 트리 자료구조 형태를
가지며, html문서를 객체화 한 것을 말한다. 여기서 트리 자료구조 형태는
나무처럼 뻗어나가면서 하위로 펼쳐져 내려가는 구조이다.

조금 더 쉽게 생각해보면,
글을 작성할 때도 서론,본론,결론을 쓰듯이, 코드 내에서도 전개하는데 순서가 필요하다.
그 순서에 맞게 작성하는 것이 dom이다.

또 다른 특징으로는 ajax를 호출하는 기능이 있다.

ajax란 자바스크립트를 통해서 서버에
데이터를 요청하는 것을 말한다. jquery를 import한 페이지에서만 동작이 가능하다는 의미.

자바스크립트 문법
$ 기호는 제이쿼리를 의미하며, 접근할 수 있게 해주는 식별자이다.
$안에 선택자를 넣고, 동작함수를 정의, 원하는 요소에 설정한다.

jquery와 js문법의 사용법이 약간 다르다.
$('#ssd') $('.hdd') 가 jquery의 문법 형태이다.
document.getElementById('ssd')
document.querySelectorAll('.hdd')와 같이 사용되는 스타일이 js문법이다.

jquery문법을 조금 더 자세히 살펴보면,
1. 값을 가져오기 위해 val사용.
('#post-url').val(); 2.보이기와 숨기기('#//여기에 id 값을 넣고//').hide();//숨기기
('#//여기에 id 값을 넣고//').show();나타내기 3. css값 가져오기('#//여기에 id 값을 넣고//').css('//가져올 값을 넣는다.')
4.버튼넣기
let temp_html = '추가 버튼';
$('#id값').append(temp_html)

실제로 코드로 한번 보자

Document

.hide().show()메소드

문장 숨기기 문장 표시하기

안녕하세요,jQuery입니다.

숨기기와 나타내기 코드인데, 각 버튼의 id값 앞에 # 을 이용해 각 버튼을 특정한후
'click'을 했을때 사라지는 경우와 나타나는 경우의 동작함수를 포함한다.

profile
초보 개발자 이야기

0개의 댓글