https://www.w3schools.com/Jquery/jquery_selectors.asp
안녕하세요
퇴근후 jquery 시작을 했습니다.
html editor를 사용해보다가 ajax를 알게되었고, ajax가 jquery로 구성되어 있더군요
그래서 오늘 부터 배워 볼 예정입니다.
항상 jsp 게시판 만들기 검색해서
다른 사람이 만든 소스로 분석해서 바꿀건 바꾸고 하는 방식을 선호했는데요
최근에 이방식이 너무 잘못된걸 깨달았습니다.
상대방의 소스를 분석하는데 시간이 너무 오래 걸릴 뿐만아니라, 제대로 설명되지 않은 경우가 많았습니다.
이런걸 다 경험해보신 선배님들이겠죠...
그러니 검색을 메뉴얼이나 tutorial을 참고하라는 말이 정말이었습니다.
쓸데없는말이 길어 졌고, jquery에 대해서 공부하겠습니다.
SyntaxDescriptionExample
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
자바스크립트에 지식은 전혀없는 백지입니다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
$은 select 즉, 선택할 수 있는 언어로 보입니다.
$을 통해서 html 의 태그를 선택할 수 있다는 소리죠
p태그 뿐만아니라 type 등 다양하게 선택할 수 있습니다.
이 중에서 많이 보이는게 있다면 두가지 였습니다.
class는 $('.className')
id는 $('#idName')
Mouse EventsKeyboard EventsForm EventsDocument/Window Events
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Event란 All the different visitors' actions that a web page can respond to are called events.
즉 웹페이지에서 사용자가 행동할 수 있는 동적이벤트를 정의한겁니다.
제일 많이 볼 수 있는게 버튼 클릭이죠
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
The $(document).ready() method allows us to execute a function when the document is fully loaded
$(document).ready() method는 완전히 웹페이지가 로딩을 완료했을때 함수실행을 허용시키는 메소드입니다.
말로 풀어 보면 웹페이지가 완전히 로딩 될때 p태그를 가진 요소를 클릭할 때 여러가지 p태그 중에 금방 클릭한거를 hide()를 실행한다.
jquery의 문법적 구성요소는 이렇게 되는군요