반응형
1) 기본문법
선택자 : 함수가 적용되길 원하는 요소 및 속성
동작함수 : 선택된 요소에 원하는 동작을 설정
- 아이디 선택자 : $("#id명")
- 태그 선택자 : $("태그명")
- 클래스 선택자 : $(".id명")
- 속성 선택자 : $("태그명[속성명=속성값]")
// input 태그들 중 type이 password인 태그를 선택하기
$("input[type='password']")
$(function( ){
$(선택자).동작함수( );
});
// 아래 3구문이 같은 뜻
$( ); = window.onLoad( ) = $(document.ready( ))
2) 값 가져오기
$("선택자").val( )
let inputTag = $("#text")
inputTag.val( )
3) 문자열 변경
$("선택자").text( ) : 해당 태그에 쓰여진 문자열
$("선택자").text("새로운 문자열") : 태그에 쓰여진 기존 문자열 변경
4) 스타일 변경
$("선택자").css("속성명","속성값")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li class="li">1번째 요소</li>
<li class="li">2번째 요소</li>
<li class="li">3번째 요소</li>
</ul>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
'use stirct';
$(".li").css('color','red');
</script>
</html>
5) 반복문
$.each(배열명,function(index,item){
index : 0부터
item : 요소
})
6) 제이쿼리 특징
- 순수 자바스크립트에 비해 속도가 느려진다.
- 간결한 문법으로 인해 개발속도 증가와 처리비용 감소에 대한 장점이 있으며 60% 이상의 웹 사이트에서 사용하고 있다.
- 까다로운 UI 작업일 경우 상대적으로 무거운 제이쿼리보다는 직접 DOM을 이용해 개발을 하기도 한다.
반응형
'Front-End > JQuery' 카테고리의 다른 글
| [제이쿼리] 제이쿼리 개요, 다운로드, 연결 방법 (0) | 2021.06.27 |
|---|
