jQuery 개념정리

59429 단어 jqueryjquery

jQuery = JS의 라이브러리

  • 라이브러리: 자주 사용하는 코드를 재사용 할 수 있는 형태로 가공하여 프로그래밍 효율을 높여주는 코드들을 말합니다.
  • 내 코드에 도움을 준다 >> 라이브러리
  • 이미 설명서가 있고 내 코드가 부품이 되서 그 설명서대로 조립 >> 프레임워크
  • React가 jQuery 를 넘어섬. 공부해둘 필요는 있음
  • 참고사이트1
  • 참고사이트2

jQuery CDN과 Download

https://jquery.com/download/
에서 코드 복붙

  • 버전별 차이 :

jquery-1.x : 구형 브라우저 대부분 지원, 가장 안정적인 버전, 최신 버전과 호완문제가 있어 migrate를 함께 넣어주어야 합니다.

jquery-2.x : 익스플로러 8버전 버림, 따라서 파일 크기 감소. 9버전 이상을 호환할 것이라면 2.x를 사용할 것!

jquery-3.x : Promises와 ajax, when, data 등 여러 최신 플러그인과 HTML5 호환

jQuery 사용하기

  1. body 안에 링크나 소스 걸기
    (소스를 걸 경우 다운로드 된 경로 입력)
 <script src="jquery-3.6.0.min.js"></script>
  1. 그 밑에 <script> 태그 넣고 jQuery 입력
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello </title>
</head>

<body>

  <h1 id="test"> 안녕</h1>
  <script src="jquery-3.6.0.min.js"></script>
  <script>
	$('#test').css('color', 'red');
  </script>
  
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello </title>
</head>
<body>


  <h1 id="test"> 안녕</h1>
  <script src="jquery-3.6.0.min.js"></script>
<!-- $: jQuery 를 사용하겠다 -->
<!-- (""): 선택자, 태그네임/아이디/클래스 -->
<!-- .어쩌구(): -해라 - 할 때 -->
<script>
//   $("p").hide();
// $("#test").show();
// $(".test").click(function(){
// 	alert("클릭!");
// });
// <!-- CSS 가능 -->
// $(".test").click(function(){
// 	$(this).css('color', 'red');
// });
// $('.test').text('hello world');

// <!-- HTML 가능 -->
// $('#test').html('<b>hello</b> world');
$('#test').css('color', 'red');
// $('img').attr('src', 'a.jpg');
// $('.one .two').text('hello world');
// $('p#two').text('hello world');

</script>
</body>
</html>

jQuery의 필터와 실행방법(문법)

https://api.jquery.com/
에서 검색

jQquery 필터

  • eq - equal ( = )
  • ne - not equal ( <> )
  • lt - little ( < ), stands for the less-than sign
  • (jQquery 없음) le - little or equal ( <= ), less-than or equals sign
  • gt - greater ( > ), stands for the greater-than sign
  • (jQquery 없음) ge - greater or equal ( >= ), greater-than or equals sign

기본 필터

index는 음수도 허락합니다.

  • :eq(index) $("li").eq(3).css("color", "red" );
  • :even(짝수, 2븐 == 짝수)
  • :odd(홀수, odd는 3글자 홀수)
  • :first
  • :last
  • :gt(index) - 큰 숫자 선택 $("li:gt(2)").css( "backgroundColor", "yellow");
  • :lt(index) - 작은 숫자 선택 $("li:lt(2)").css( "backgroundColor", "yellow");
  • :not(filter) - $("input:not(:checked)+span").css( "background-color", "yellow" );

속성 필터

  • :attributeContains - input[name*='man’]
  • :attributeEquals - input[name='newsletter’]

차일드 필터

  • :first-child, :last-child
  • :nth-child(2)
  • :nth-child(even), :nth-child(odd)
  • :nth-child(3n) : 3의 배수에 적용

컨텐츠 필터

  • :contains(text)
  • :empty
  • :has(selector)

실행방법

속성값

$("name").val(); // 속성값 읽어오기
$("name").val('쓰길 원하는 값'); // 속성값 쓰기

$의 의미


이처럼 구현되어 있는 코드 모음이라고 생각하시면 됩니다.

jQuery로 변수를 만들어 사용할 때 $

let $value = $('#one')

jQuery로 변수를 만들어 사용할 때에는 앞에 $ 표시를 하는 경우가 많습니다. 이는 뒤에 연결되는 메서드 체이닝이 jQuery로 가능하다는 것을 명시하기 위함입니다.


선택 방법은 기본 선택과 계층 선택이 있습니다.

  • 기본 선택 : element, .class, #id, all(*)
  • 계층선택 : child(>)

선택자는 CSS처럼 사용할 수 있습니다. $("ul li"), $("#header .list-item"), $(".table-hover th") 처럼요.

jQuery에서 DOM을 탐색하는 방법: 상속

  • DOM: 부모나 자식에서 CRUD 작업을 하는 것
  • DOM의 탐색은 일반적으로 선택자를 통해서 이루어집니다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello </title>
</head>

<body>

  <div class="wrapper">
    <h1 class="title">TITLE</h1>
    <ul class="items">
      <li class="items">item 1</li>
      <li class="items">item 2</li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
	//  개발자 도구 콘솔에 출력해라, div 밑에 있는 것들 [h1.title,ul.items...] 
    console.log($("div").children());

  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello </title>
</head>

<body>

  <div class="wrapper">
    <h1 class="title">TITLE</h1>
    <ul class="items">
      <li class="items">item 1</li>
      <li class="items">item 2</li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
	// div, 밑에 있는 것 중에 1번째(h1), html로 hello라고 적어라
    console.log($("div").children()[0].innerHTML = 'hello');

  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello </title>
</head>

<body>

  <div class="wrapper">
    <h1 class="title">hi</h1>
    <ul class="items">
      <li class="items">item 1</li>
      <li class="items">item 2</li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // div, 밑에 있는 것 중에, 2번째(ul) , html로 myname 적어라
    console.log($("div").children()[1].innerHTML = 'my name');

  </script>
</body>

</html>

DOM의 편집

// .text(): 선택한 요소의 텍스트 내용을 읽거나 수정합니다.
$("test1").text("Hello World!");

// .html(): 선택한 요소의 html 코드를 읽거나 수정합니다.
$("test2").html("<b>Hello World!</b>");

// .val(): form 요소의 값을 읽거나 수정합니다.
$("test3").val("<b>Hello World!</b>");
//append(): 객체를, 선택한 객체(p)내의 가장 마지막 요소로 붙임. 
$("p").append("Some appended text.");

//prepend(): 객체를, 선택한 객체 내의 가장 첫번째 요소로 붙임. 
$("p").prepend("Some prepended text.");

//remove(): 선택한 객체를 삭제.
$("#div1").remove();

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello </title>
</head>

<body>

  <div class="wrapper">
    <h1 class="title">hi</h1>
    <ul class="items">
      <li class="items">item 1</li>
      <li class="items">item 2</li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
   $("div").append("p태그 가장 바닥에 글 추가");

  </script>
</body>

</html>

sample code


$('ul').append('<li>hello world end</li>');
$('ul').prepend('<li>hello world start</li>');
$('ul').after('<h2>끝!</h2>');
$('ul').before('<h2>시작!</h2>');

CSS 편집 CODE

$("div").addClass("important");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css("background-color");
$("p").css("background-color","yellow");

예를 들어 위와 같은 코드에 $(“div”).addClass(“world”)라는 코드를 실행하면 다음과 같이 클래스가 변화하게 됩니다.

이벤트

버튼을 클릭하거나, 마우스를 스크롤 하거나, 필드의 내용을 바꾸는 등의 행동(action)을 합니다. 웹 페이지는 이러한 사용자의 행동에 대해 상호작용을 하여 이벤트를 발생시킵니다.

이벤트 핸들러

특정 요소의 이벤트를 제어하는 함수를 이벤트 핸들러(event handler)라 합니다.

<!DOCTYPE html>
<html lang="ko">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Hello </title>
 <style>

 /* <div id="divOne" class="box"></div> */
 .box {
 width: 100px;
 height: 100px;
 background-color: red;
 display : none;
 }
</style>
</head>

<body>

 <p id="text"></p>
 <div id="divOne" class="box"></div>
 <h1></h1>

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
   //= <p id="text">Hello</p>
   $('#text').text('Hello');

   //3초 동안 사라짐
   $('#divOne').fadeIn(3000);

   //=<h1>WOW</h1>
   $('h1').text('WOW');

   // div 클릭했을 때 안 보이게 하기
   // dom이 준비되면 실행해라!
   $(function () {
     $("div").click(function () {
       $(this).hide();
     });
   })
 </script>
</body>

</html>





아래 방식은 예전 방식이고 요즘은 사용하지 않습니다.
3.0에서는 지원하지 않기 때문이에 있다면 수정해야 합니다. 

$(콜백함수_핸들러) // 권장
$(document).ready(콜백함수_핸들러) //비권장
$("document").ready(콜백함수_핸들러) //비권장



이벤트 사이트

다른 이벤트에 대해서 알고 싶다면 다음 사이트(https://api.jquery/com/category/events/)로 들어가 원하는 이벤트에 대해 찾아보면 좋을 것입니다.

Ajax(비동기 통신)

: 화면에 변화 없이 서버는 계속 데이터를 주고 받으면서 일을 함

jQuery CheatSheet

https://paullabworkspace.notion.site/343fa7f4c17948aa835f7aa5374f78c0?v=6fadd28fb986470bb9920b6c4ef6dc88

자주 사용되는 jQuery 핵심

$("#btn").on("click", function(){})
$("#btn").click(function(){})
$("#btn").submit("click", function(event){...event.preventDefault();...})
$("#btn").css("color", "red")
$("#btn").css({"color":"red", "background-color":"blue"})
$("#input").val(); // input type(text, password, hidden, select, radio, checkbox 관계 없이 가져옴)
$("#input").val("hello world"); // 값 세팅
WIL 6주차
[camp] 5주차 정리 (4.11~15)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage