[제이쿼리가 나온 배경]
jQuery => vue.ja, react.js, ... node.js
웹프로그래밍의 종류
- html (구조문서)
- css (표현)
- javaScript (동적)
제이쿼리 라이브러리 사용방법
1) 다운로드 :
2) CDN : 온라인이 아니면 사용할 수 없음
노란색 라인은 즉 로딩을 의미, 코드 아래로 가면 안된다.
- 함수로 처리된다.
jQuery();
$()
window.onload와 같은 역할을 하는 것이 jQuery(document).ready((){})
selector
- CSS와 동일 + 함수형 셀렉터 + 필터 셀렉터
210726일 공부한 내용
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="resources/script/jquery-3.6.0.min (1).js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("p#content").css("color", "red");
$("img").attr("src", "resources/images/pig.png");
alert(data);
})
})
</script>
<!-- <script>
window.onload=function(){
document.getElementById("btn").onclick = function(){
alert("버튼이 눌렸다!");
}
}
</script>
-->
</head>
<body>
<div class="wrapper">
<input type="button" id="btn" value="Click">
<p id="content">무궁화 꽃이 피었습니다.</p>
<p>
<img src="resources/images/flower.png" alt="꽃입니다.">
</p>
</div>
</body>
</html>
설정을 맞춰줘야함
수정하고 싶을 땐, servlet-context
마지막 "/" 절대 잊어먹으면 안된다.
<Selector>
1) 기본선택자
* : 전체 선택자
요소 선택자(element) : 태그명 그 자체
#아이디 : 아이디 선택자
.클래스 : 클래스 선택자
> : 자식 선택자
공백 : 후손선택자(자손)
+ : 형제선택자
~ : 복수선택자
, : 멀티플 선택자
[2교시]
2. 속성 선택자(attribute Selector)
요소[속성=값] : 속성과 값이 같은 문서
요소[속성!=값] : 속성 안의 특정 값과 같은 요소
요소[속성~=값] : 지정된 값으로 시작하는 값
요소[속성^=값] :
요소[속성$=값] : 지정된 값으로 끝나는 속성
요소[속성*=값] : 포함
선택했고 그곳에 값을 넣겠다.
val 1개일 때 값을 넣고, 두개일 때 꺼내온다.
3. 필터선택자
요소 : button
요소 : checkbox
요소 : file
요소 : image(x)
요소 : password
요소 : reset
요소 : submit
요소 : checked
요소 : disabled
요소: enabled
요소 : focus
요소 : input
요소 : selected
자바스크립트 펑션
setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법
4) 위치기반 선택자
: first
: last
: first-child
: last-child
: only-child
: even
: odd
$("tr:first").css("background", "black").css("color", "white");
[3교시]
table2 복붙으로 하나 더 만들기
셀렉터
'개발자로 가는 길(국비지원과정) > 4.Spring+ Ajax' 카테고리의 다른 글
| [스프링_보드복습] 회원가입, 로그인, 로그아웃 (0) | 2021.07.28 |
|---|---|
| [210728수] 제이쿼리 선택자, text(), html(), attr(), val() (0) | 2021.07.28 |
| [210726월] 오류 처리, 제이쿼리 시작! (0) | 2021.07.26 |
| [210723금] 인터셉터 처리 (0) | 2021.07.23 |
| [210722G목] 쿠키와 세션의 차이 (0) | 2021.07.22 |
