Jquery 끄적 노트

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

우당탕탕 개발 블로그 도전기

Jquery 끄적 노트 본문

잡다한 정리노트

Jquery 끄적 노트

나루나른 2024. 4. 2. 22:07

국비과정 개강 후 초반부에 기초적인 프론트엔드 파트를 배운 후, Java와 DB(oracle)을 거쳐 다시 프론트엔드 파트로 돌아오게 되었다.

오늘 배운 내용 중 궁금했던 내용을 대충 복습하는 겸 정리하는 노트다.

Jquery란?

쉽게 이야기 하자면 JavaScript를 더욱 쓰기 편하게 압축시켜 놓은 것이다. 라이브러리의 한 종류라고 생각하면 편하다.

Jquery 다운로드 페이지

https://jquery.com/download/

HTML 페이지에서 jquery 등의 외부 라이브러리를 사용하려면 <head> 태그 안의 script 단에서 링크를 걸어줘야 한다.

Jquery를 사용하면 JavaScript만 단독으로 사용했을 때보다 더욱 축약된 코드를 사용 가능하다.

<input type="text" id="uid" value="ITWILL"> // 에 접근

//1) JavaScript에서 접근하는 방법
//요소가 가진 값 중에서 특정 id값을 통해 값을 가져오겠다
alert(document.getElementById("uid").value);


//2)Jquery를 통한 접근
//기본 문법-> $("선택자").action();
alert($("#uid").val()); //$() <- 기본적인 클래스 선택자

 $("#btn_join").click(function(){
 let uid = $("#uid").val();
 uid = uid.trim();
//alert("#"+uid+"#"); 중간중간 alert를 심어서 흐름을 알아야한다
if(!(uid.length>=8 && uid.length<=12)){
alert("아이디 8 ~ 12 글자 이내로 입력해주세요.");
 $("#uid").focus();
  return false//button 요소의 기본속성이 submit 이므로, return false를 통해 서버로 전송되는 것을 방지함
 }

 alert("서버로 전송됩니다.");
$("#memfrm").submit();//<form id=memfrm></form> 서버로 전송
 });

$("#btn_reset").click(function(){
 $("#memfrm").reset();//<form id=memfrm></form>의 상태를 초기값으로 
    //<inputtype=reset>과 동일한 기능이다.
  return false;
 });

Jquery에서의 getter와 setter 함수

Jquery는 대부분 getter와 setter 함수의 이름을 같이 사용한다.

- JavaScript에서 스타일 접근 방식 : document.getElementByID(" ").style

- Jquery에서 스타일 접근 함수 : css() 함수를 사용한다.

1) css (속성명) 접근 : 매개변수가 하나라면 보통 getter의 개념을 지닌다.

2) css(속성명, 속성값) 접근 : 앞의 속성명을 뒤의 속성으로 속성값 변경

- 속성값이 두 개일 경우 setter의 개념이 강하다.

3) css({속성명:속성값, 속성명:속성값, ~~}) : 여러 개의 속성을 한꺼번에 세팅(JSON 기반)

- JSON의 구조적인 형태를 빌려와서 키(속성명)와 값(속성값)의 쌍으로 CSS 스타일을 적용

//body 태그에 있는 button 요소들 중에서 0번째에 접근
$("button:eq(0)").click(function(){
	//setter 기반
	$("#box").css("background","red");
 });
 
 //Json 형태 : key와 value의 구성
 $("button:eq(2)").click(function(){
    let width = 800;
    $("#box").css({
     "width":width, 
      hegiht:600, 
     "background":"url(../images/k7.png)",
     "border":"50px dotted blue"
       });
  });

jquery에서의 each 반복문

- 하나의 덩어리를 주면 덩어리 안의 횟수 만큼 반복함

형식) $.each(), $(배열).each() 등

//start 버튼을 누르면 7x1~9까지 특정 블럭에 출력됨
$("#startBtn").click(function(){
   let dan = 7;
    for(i=1; i<=9; i++){
    //$("li") //body 태그에 있는 요소들 중에서 생성되있는 li 태그 요소에 접근하라는 의미
   //$("<li>") //body 태그에 새로운 li태그를 생성해달라는 의미
    //메소드 체이닝을 통해 각각의 <li> 태그를 생성한 후 appendTo() 메소드로 displayList라는 아이디를 지닌 곳에 출력한다.
    $("<li>").text(dan+"*"+i+"="+(dan*i)).appendTo("#displayList");    
   }
   
//하나의 덩어리를 주면 덩어리 안의 횟수 만큼 반복함 
//형식) $.each(), $(배열).each() 등   
//이미 생성되있는 li를 반복함 여기서는 총 9번 반복
$("li").each(function(){
 let result = $(this).text();
alert(result);
});

jquery에서의 this

- $(this) : Jquery에서 this 객체에 접근(나 자신을 가르키는 객체)

- $("this") : 본문에서 생성되어 있는 <this> 요소에 접근 및 선택

-$("<this>") : 본문에 새로운 <this> 요소를 생성함

1) JavaScript에서의 this

- this.style.color = "red"; : 해당하는 this 객체의 글자색을 red로 변경함

ex) 버튼을 클릭시 클릭한 버튼의 색을 red 변경

2)Jquery에서의 this

- 주의사항 this.css()라고 사용하면 에러가 발생한다.

- 자바 스크립트 요소 객체를 Jqery 객체 $(this)로 변경한 후 사용한다.

형식) $(this).css("color","blue);

ex) 클릭시 this(버튼)의 색을 blue로 변경함

$("#exBox .btn").click(function(){
//$("button")과 같이 요소에서 직접 접근하면 [1]부터 출력되어 나오는데
//this를 통해 selector를 통해 접근하면 인덱스가 [0]부터 출력되어 나온다
let idx = $(this).index();
            
alert("인덱스 : " + idx);
            
let color = $(this).css("background-color");
let txt = $(this).text();
            
$("#index").text(idx);
$("#color").text(color);
$("#text").text(txt);
});

Jquery에서의 요소 생성

● 요소를 생성하는 이유

- 문자 단위의 통신에 많이 사용하기 때문이다(비동기식) -> Ajax

- 댓글의 더보기 등의 무한 스크롤링을 하기 위해서

● 요소의 생성 및 추가

- append(), appendTo() : 요소를 끝에 추가

- prepend(), prependTo() : 요소를 앞에 추가

- 부모.append(자식)/ 자식.appendTo(부모)의 형식이다.

 //jquery 함수를 이용해 접근성을 높인다
 //<table border = '1'> 같은 동작을 한다. attr()은 html 요소의 속성을 처리하기 위해 사용됨
//여기서는 table의 border속성과 설정할 속성의 값을 설정하기 위해 사용했다.
let $table = $("<table></table>").attr("border","1");

let $tr1 = $("<tr><td>사과</td><td>바나나</td></tr>");
let $tr2 = $("<tr>");
let $td1 = $("<td>수박</td>");
let $td2 = $("<td>").text("메론");

//$tr2 변수에 $td1, $td2를 마지막에 자식으로 추가
 $tr2.append($td1, $td2);

//$table 변수에 자식으로 추가함
 $table.prepend($tr1, $tr2);

 $("#box").append($table);
 });

요소에 대한 생성이 있다면 생성된 요소에 대한 접근도 존재한다.

 <table border = "1">
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
 </tbody>    
 </table>

<script>
$("td").eq(2).css("background","red")
//eq(2)의 이전요소 eq(1)의 background color를 yellow로 변경
.prev().css("background","yellow")
.parent()//현재 내가 있는 곳의 부모 첫번째 tr
.next()//그 다음 두번째 tr를 가리킨다.
 .children()//두번째 tr의 자식 td(4,5,6)을 가리킴
.eq(1).css("background","blue"); //그 두번째 tr의 자식인 [1]번째 인덱스 td(5)의 배경색을 blue로 변경
</scrpit>

Jquery에서의 요소에 대한 탐색 방법인데 DOM(Document Object Model) 구조에서 원하는 요소까지 이동하고 찾아가는 예시이다. selector를 이용한 접근이기 때문에 인덱스의 [0]번째 부터 시작해서 0, 1, 2 .. 식으로 순차 적으로 접근한다.

'잡다한 정리노트' 카테고리의 다른 글

MariaDB 사용법 (feat. HeidiSQL) (0)	2024.06.23
BootStrap 끄적 노트 (0)	2024.04.04

'잡다한 정리노트' Related Articles

우당탕탕 개발 블로그 도전기

Jquery 끄적 노트 본문

Jquery 끄적 노트

'잡다한 정리노트' 카테고리의 다른 글

티스토리툴바