Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- abstract
- 어윈 사용법
- 자바
- 참조형변수
- EnhancedFor
- 환경설정
- 객체 비교
- exception
- 메소드오버로딩
- 예외처리
- 다형성
- 자동차수리시스템
- 생성자오버로드
- 예외미루기
- 집합_SET
- 사용자예외클래스생성
- 정수형타입
- 대덕인재개발원
- 추상메서드
- GRANT VIEW
- 오라클
- 컬렉션 타입
- cursor문
- 한국건설관리시스템
- 제네릭
- 컬렉션프레임워크
- oracle
- NestedFor
- Java
- 인터페이스
Archives
- Today
- Total
거니의 velog
230914_jQuery 강의 본문
[jQueryTest9.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리09" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리09" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리09</title>
<link href="css/style01.css" rel="stylesheet" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 1px dotted green;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
p {
font-size: 1.5rem;
color: blue;
}
</style>
<script>
const proc1 = () => {
// alert($("body").html());
alert($("body").text());
}
$(document).ready(function(){
$("#btext").click(function(){
// #result2의 모든 p를 대상으로 문자를 가져온다.
alert($("#result2 p").text());
});
$("#bhtml").click(function(){
// #result2의 첫 번째 p를 대상으로 태그 포함한 문자를 가져온다.
alert($("#result2 p").html());
});
$("#bhfor").click(function(){
var str = "";
// $("#result3 p").each(function(){
// str += $(this).html() + "\n";
// });
// 매개변수 값이 하나씩 추가 될 때마다 반복문의 횟수 증가.
// i번째(#result3)의 v번째 p태그 선택.
// 매개변수는 옵션
$("#result3 p").each(function(i, v){
var idx1 = i;
console.log(idx1);
var idx2 = v;
console.log(idx2);
str += $(this).html() + "\n";
});
alert(str);
});
});
</script>
</head>
<body>
<hr color="red" />
<h1>
jQuery 실습 9-1
<br />
HTML 메서드, TEXT 메서드
</h1>
<br />
<input id="btn1" type="button" value="확인" onclick="proc1();" />
<br />
<div id="result1"></div>
<hr color="red" />
<h1>
jQuery 실습 9-2
<br />
HTML 메서드, TEXT 메서드
</h1>
<br />
<input id="btext" type="button" value="text" />
<input id="bhtml" type="button" value="html" />
<br />
<div id="result2">
<p>hello~<span>HTML</span></p>
<p>안녕~<span>CSS</span></p>
<p>hi~<span>jQuery</span></p>
</div>
<hr color="red" />
<h1>
jQuery 실습 9-3
<br />
HTML 메서드 반복문
</h1>
<br />
<input id="bhfor" type="button" value="html반복" />
<br />
<div id="result3">
<p>hello~<span>HTML</span></p>
<p>안녕~<span>CSS</span></p>
<p>hi~<span>jQuery</span></p>
</div>
<hr color="red" />
</body>
</html>
[jQueryTest10.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리10" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리10" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리10</title>
<link href="css/style02.css" rel="stylesheet" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 3px dotted yellowgreen;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
p {
border: 3px solid magenta;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#result1>p:nth-of-type(2) + p").css({
backgroundColor : "red",
color : "white"
});
});
$("#btn2").click(function(){
$("#result1>p:nth-of-type(2) ~ p").css({
backgroundColor : "blue",
color : "white"
});
});
});
</script>
</head>
<body>
<hr color="red" />
<h1>
jQuery 실습 10-1
<br />
선택자 엘리먼트 관련
<br />
형제 선택
<br />
+ : 바로 다음에 나오는 첫 번째 형제
<br />
~ : 다음에 나오는 모든 형제
</h1>
<br />
<input id="btn1" type="button" value="확인+" />
<input id="btn2" type="button" value="확인~" />
<br />
<div id="result1">
#result1 div 본인
<p>#result1의 첫 번째 자식 p</p>
<p>#result1의 두 번째 자식 p</p>
<p>#result1의 세 번째 자식 p</p>
<div>
#result1의 네 번째 자식 div
<p>
#result1의 네 번째 자식 div의 자식 p
<br />
#result1의 자손 p
</p>
</div>
<p>#result1의 다섯 번째 자식 p</p>
<p>#result1의 여섯 번째 자식 p</p>
</div>
<hr color="red" />
</body>
</html>
[jQueryTest11.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리11" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리11" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리11</title>
<link href="css/style02.css" rel="stylesheet" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 3px dotted yellowgreen;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
p {
border: 3px solid magenta;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
</style>
<script>
$(function(){
$("#btn1").click(function(){
// id가 result로 시작하는 div 태그를 선택
$("div[id|=result]").css({
backgroundColor : "yellow",
border : "5px solid red"
});
});
$("#btn2").click(function(){
// class가 pp인 요소를 선택
// $("p.pp")
$("p[class=pp]").css({
backgroundColor : "purple",
border : "5px solid yellow",
color : "white"
});
});
$("#btn3").click(function(){
$("p[title~=star]").css({
backgroundColor : "cyan",
border : "5px solid #ddd",
color : "#333"
});
});
})
</script>
</head>
<body>
<hr color="red" />
<h1>
jQuery 실습 11-1
<br />
선택자 속성관련 엘리먼트
</h1>
<br />
<input id="btn1" type="button" value="div[id|=result]" />
<input id="btn2" type="button" value="p[class=pp]" />
<input id="btn3" type="button" value="p[title~=star]" />
<br />
<div id="result-1"></div>
<div id="result-2"></div>
<div id="result-3"></div>
<div id="result-4"></div>
<div id="result-5"></div>
<p class="pp" title="koreastar">Hello</p>
<p class="pp" title="koreastar">Hello</p>
<p class="pp2" title="korea star">Hello</p>
<p class="pp2">Hello</p>
<p class="pp">Hello</p>
<hr color="red" />
</body>
</html>
[jQueryTest12.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리12" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리12" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리12</title>
<link href="css/style02.css" rel="stylesheet" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 3px dotted yellowgreen;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
//input 요소 테두리 lime , 배경색 핑크 = OK
//input type이 button 인 요소 배경색 노란 = OK
//Button 요소와 input type이 button 인 요소 배경색 하늘색 = OK
//Type이 submit 요소의 배경색 녹색 = OK
//Type이 reset인 요소의 배경색 빨강 = OK
//Type이 text, password 인 요소의 테두리 파랑 = OK
//Type이 file, image인요소의 테두리 cyan = OK
$("#btn1").click(function(){
$("#result1 input").css({
border : "1px solid lime",
backgroundColor : "pink"
});
$("#result1 :button").css({
backgroundColor : "skyblue"
});
$("#result1 input:button").css({
backgroundColor : "yellow"
});
$("#result1 :submit").css({
backgroundColor : "green",
color : "white"
});
$("#result1 :reset").css({
backgroundColor : "red"
});
$("#result1 :text, #result1 :password").css({
border : "5px dashed blue"
});
$("#result1 :file, #result1 :image").css({
border : "5px dashed cyan"
});
});
});
</script>
</head>
<body>
<hr color="red" />
<h1>
jQuery 실습 12-1
<br />
선택자 input 입력양식 엘리먼트
</h1>
<br />
<input id="btn1" type="button" value="확인" />
<br />
<div id="result1">
<!-- <form onsubmit="return false;">-->
<form action="inputForm.jsp" method="post">
Text : <input type="text" name="id" />
<br />
<br />
Password : <input type="password" name="pass" />
<br />
<br />
Radio : <input type="radio" name="radioGroup" id="radioA" value="A" /> A
<input type="radio" name="radioGroup" id="radioB" value="B" /> B
<br />
<br />
Checkbox : <input type="checkbox" name="checkboxes" id="checkbox1" value="1" /> 1
<input type="checkbox" name="checkboxes" id="checkbox2" value="2" /> 2
<br />
<br />
Textarea : <br /> <textarea rows="15" cols="50" id="myTextarea"></textarea>
<br />
<br />
Image(전송, submit) : <input type="image" src="images/check.png">
<br />
<br />
File : <input type="file">
<br />
<br />
Buttons :
<button>전송</button>
<button type="button" id="normalButton">Normal</button>
<button type="submit" id="submitButton">Submit</button>
<button type="reset" id="resetButton">Reset</button>
<br />
<br />
<input value="type미정 :자동으로 text" />
<input type="button" value="일반버튼">
<input type="submit" value="전송버튼">
<input type="reset" value="초기화버튼">
</form>
</div>
<hr color="red" />
</body>
</html>
[inputForm.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String userId = request.getParameter("id");
String userPw = request.getParameter("pass");
%>
<p><%= userId %>님 환영합니다...</p>
<p><%= userPw %>를 확인하세요...</p>
</body>
</html>
[jQueryTest13.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리13" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리13" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리13</title>
<link href="css/style02.css" rel="stylesheet" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 3px dotted yellowgreen;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
ul {
padding-left: 20px;
}
</style>
<script>
$(function(){
$("#btn1").click(function(){
$("#result1 ul>li:first").css({
backgroundColor : "yellow"
});
$("#result1 ul>li:last").css({
backgroundColor : "yellow"
});
$("#result1 ul>li:eq(5)").css({
backgroundColor : "red"
});
$("#result1 ul>li:lt(4)").css({
fontSize : "2rem"
});
});
$("#btn2").click(function(){
$("#result1 ul>li").first().css({
backgroundColor : "yellow"
});
$("#result1 ul>li").last().css({
backgroundColor : "yellow"
});
$("#result1 ul>li").eq(5).css({
backgroundColor : "red"
});
// $("#result1 ul>li").lt(4).css({
// fontSize : "2rem"
// });
$("#result1 ul>li").filter(":lt(4)").css({
fontSize : "2rem"
});
});
$("#btn3").click(function(){
$("#result1 ul>li").removeAttr("style");
});
})
</script>
</head>
<body>
<hr color="red" />
<h1>
jQuery 실습 13-1
<br />
기본 필터
<br />
:first, :last, :eq, :lt, :gt => 권장하지 않는 필터
<br />
메소드를 사용
<br />
.first() .last() .eq(idx) .filter(":lt(idx)") .filter(":gt(idx)")
</h1>
<br />
<input id="btn1" type="button" value="기본 필터" />
<input id="btn2" type="button" value="필터 메서드" />
<input id="btn3" type="button" value="초기화" />
<br />
<div id="result1">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
</ul>
</div>
<hr color="red" />
</body>
</html>
[jQueryTest14.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리14" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리14" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리14</title>
<link href="css/style02.css" rel="stylesheet" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 3px dotted yellowgreen;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
table {
border-collapse: collapse;
border: 2px solid blue;
width: 100%;
}
td:first-of-type {
font-weight: bold;
}
td {
width: 50%;
height: 50px;
text-align: center;
padding: 10px;
}
</style>
<script>
$(function(){
$("#btn1").click(function(){
$("#result1 tr:even").css({
backgroundColor : "#bbb"
});
$("#result1 tr:odd").css({
backgroundColor : "yellow"
});
$("#result1 tr:first").css({
backgroundColor : "blue",
color : "white"
});
});
$("#btn2").click(function(){
$("#result1 tr").removeAttr("style");
});
});
</script>
</head>
<body>
<hr color="red" />
<h1>
jQuery 실습 14-1
<br />
기본 필터
<br />
:even :odd
</h1>
<br />
<input id="btn1" type="button" value="기본 필터" />
<input id="btn2" type="button" value="초기화" />
<br />
<div id="result1">
<table border="1">
<tr>
<td>one</td>
<td>62만원</td>
</tr>
<tr>
<td>two</td>
<td>45만원</td>
</tr>
<tr>
<td>three</td>
<td>33만원</td>
</tr>
<tr>
<td>four</td>
<td>72만원</td>
</tr>
<tr>
<td>five</td>
<td>77만원</td>
</tr>
<tr>
<td>six</td>
<td>54만원</td>
</tr>
<tr>
<td>seven</td>
<td>61만원</td>
</tr>
<tr>
<td>eight</td>
<td>52만원</td>
</tr>
<tr>
<td>nine</td>
<td>88만원</td>
</tr>
</table>
</div>
<hr color="red" />
</body>
</html>
[jQueryTest15.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="제이쿼리15" />
<meta name="keywords" content="대덕인재개발원, html, 제이쿼리15" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>제이쿼리15</title>
<link href="css/style02.css" rel="stylesheet" />
<script src="js/jquery-3.7.1.min.js"></script>
<style>
div {
border: 3px dotted yellowgreen;
margin: 20px;
padding: 20px;
font-size: 1.2rem;
word-break: break-all;
}
input[type=button],
button[type=button] {
display: inline-block;
padding: 5px 10px;
text-align: center;
font-size: 1.2em;
font-weight: 700;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}
</style>
<script>
// jQuery가 포함된 span태그 의 테두리 파랑
// jQuery가 포함되지 않은 span 태그 의 테두리 빨강
// span을 갖는 div요소 태그 의 테두리 그린
// 아무것도 없는 빈 div 태그 의 테두리 노랑
// div 후손 span 태그 의 글자색 빨강, 크기, 굵게
$(function(){
$("#btn1").click(function(){
$("#result1 span:contains(jQuery)").css({
border : "3px solid blue",
padding : "10px"
});
$("#result1 span:not(:contains(jQuery))").css({
border : "3px solid red",
padding : "10px"
});
$("#result1 div:has(span)").css({
border : "3px solid green",
padding : "10px"
});
$("#result1 div:empty").css({
border : "3px solid yellow",
padding : "10px"
});
$("#result1 div span").css({
color : "red",
fontSize : "2rem",
fontWeight : "bold"
});
});
$("#btn2").click(function(){
$("#result1 *").removeAttr("style");
});
});
</script>
</head>
<body>
<hr color="red" />
<h1>
jQuery 실습 15-1
<br />
내용 필터
<br />
:contains(text) :empty :has(selector) :parent
</h1>
<br />
<input id="btn1" type="button" value="내용 필터" />
<input id="btn2" type="button" value="초기화" />
<br />
<div id="result1">
<div></div>
<div>
헬로우~~
<span>오늘도 즐겁게~열심히!</span>
</div>
<p>
Hello jQuery!
<span>Thanks, jQuery!</span>
</p>
<div class="myClass">jQuery!</div>
<span class="notMyClass">쉬운 jQuery~~!</span>
<div></div>
</div>
<hr color="red" />
</body>
</html>
'대덕인재개발원_Front End' 카테고리의 다른 글
| 230918_jQuery 강의 (0) | 2023.09.18 |
|---|---|
| 230915_jQuery 강의 (0) | 2023.09.15 |
| 230913_jQuery 강의 (0) | 2023.09.13 |
| 230912_jQuery 강의 (0) | 2023.09.12 |
| 230912_JS 강의 (0) | 2023.09.12 |
'대덕인재개발원_Front End' Related Articles
more
