Skip to content

Latest commit

 

History

History
58 lines (52 loc) · 1.81 KB

2. 1. jQuery.md

File metadata and controls

58 lines (52 loc) · 1.81 KB

jQuery

"write less, do more", JavaScript library
AJAX call과 DOM manipulation 같이 자바스크립트의 많은 일들을 단순화한다.

$(selector).action()

  • $: jQuery 정의/접근
  • (selector): HTML elements
  1. $(this).hide(): 현재 element 숨기기(hide)
  2. $("p").hide(): 모든 <p> elements 숨기기
  3. $(".test").hide(): class="test"인 모든 elements 숨기기
  4. $("#test").hide(): id="test"인 element 숨기기
  • action(): element(s)에 수행할 함수

Document ready event

document 로딩이 끝나기 전(준비되기 전)에 jQuery code가 실행되는 것을 막는다. 항상 써줘야 한다.


$(document).ready(function(){
  //jQuery methods go here ...
  });


$(function(){
  //shorter method for the document ready event
  })

다른 .js file 이용하기



<script src="jquery-1.12.4.min.js"></script>
<script src="my_jquery_functions.js"></script>

jQuery DOM Manipulation

getter and setter - contents

  • text(): 선택된 elements의 text content 를 set 또는 return
  • html(): 선택된 elements의 content 를 set 또는 return (HTML markup 포함)
  • val(): form fields의 value 를 set 또는 return

getter and setter - attributes

  • attr() method 이용

$("button").click(function(){
  alert($("#w3s").attr("href")); //id가 w3s인 element의 href 값을 가져와 화면에 출력
  });


$("button").click(function(){
  alert($("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery",
    "title" : "W3Schools jQuery Tutorial"
    });                                           //"attr name" : "attr value"
  });

callback function

새로운 값을 return 해줘야 한다.