jQuery
72일차 2023-06-20
choi Hoon
2023. 6. 20. 18:34
jQuery
지금까지 계속 Core에 대해 공부하고 있음
EQ.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EQ.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
//선택된 객체중에서 기술된 순서대로
//인덱스가 부여됨(인덱 0부터 시작) 즉 부모 자식관계와는 무관
$('button').click(function(){
console.log('선택기 필터 사용:',$('li:eq(4)').html());//0부터 시작 5번째 li는 지리산
console.log('eq()함수 사용:',$('li').eq(4).html())//지리산
//인덱스를 변수 처리할때는 eq()함수가 유리
var index =6;
console.log('선택기 필터 사용:',$('li:eq('+index+')').html());//소백산
console.log('eq()함수 사용:',$('li').eq(index).html());//소백산
});
});
</script>
</head>
<body>
<fieldset>
<legend>eq()함수</legend>
<h2>당신이 좋아하는 과목은?</h2>
<ul>
<li>자바</li>
<li>닷넷</li>
<li>스프링</li>
<li>제이쿼리</li>
</ul>
<h2>당신이 좋아하는 산은?</h2>
<ul class="mountain">
<li>지리산</li>
<li>설악산</li>
<li>소백산</li>
<li>한라산</li>
</ul>
<button>확인</button>
</fieldset>
</body>
</html>결과)
IS.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
$('legend').click(function(){
console.log($(':radio').is(':checked'));//true or false checkbox 2개 중 한 개라도 true면 true
console.log($('#mydiv').is('div'));//true or false checkbox 2개 중 한 개라도 true면 true
console.log($('#mydiv').is('p'))//p의 태그 선택자가 div인가 true or false
});
$('#mydiv').children().each(function(index,element){
//문]두번째 텍스트박스를 위쪽 및 좌우 테두리는 제거하고 아래쪽
// 테두리만 1px green solid로 설정하여라,
//단 is()함수를 사용하여라.
console.log('인덱스:%s,찾는 요소:%s',index,$(this).is(':text:eq(1)'))
if($(this).is(':text:eq(1)')){
$(this).css({border:'none',borderBottom:'1px green solid'})
}
});
});
</script>
</head>
<body>
<fieldset>
<legend >boolean is(선택자)</legend>
<input type="radio" name="gender"/>남자
<input type="radio" name="gender"/>여자
<p id="mydiv">
<input type="text"/>
<input type="text"/>
<input type="button" value="버튼"/>
<input type="file"/>
</p>
</fieldset>
</body>
</html>결과)
Not.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
/*
$(선택자).not(제거할 선택자):선택한 객체 중에서
제외하고 싶은 선택자 지정
*/
var href="";
$('#btn').click(function(){
//not함수 미 사용
/*
$('a').filter('[href^=www]').each(function(){
href+=$(this).attr('href')+ ' ';
});
console.log(href);*/
//not함수 사용
$('a').not('[href$=jsp]').each(function(){
href+=$(this).attr('href')+ ' ';
});
console.log(href);
});
});
</script>
</head>
<body>
<fieldset>
<legend>not("선택자")함수</legend>
<a href="www.naver.com">네이버</a>
<a href="www.daum.net">다음</a>
<a href="Form3.jsp">페이지로1</a>
<a href="Form4.jsp">페이지로2</a>
<a href="www.cyworld.com">싸이월드</a>
<a href="Form5.jsp">페이지로3</a>
<button id="btn">확인</button>
</fieldset>
</body>
</html>결과)
EndFind.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EndFind.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
//end():바로 이전에 선택된 객체를 반환한다.
//(즉 end()함수가 적용된 바로 이전 객체)
//$('선택자').find("찾을선택자"):find는 선택된 객체의 하위에서 찾는다.즉 하위 선택자와 같다
$('button').click(function(){
console.log($('div').find('b').length);//3 //'div'이하를 찾음(다포함)
console.log($('div').find('p:last').text().trim());
console.log($('div p:last').text().trim());
console.log($('div').find('p:last').find('b').end().html().trim());
//$('div').end()는 document객체이다 단,제이쿼리의 document객체이다
//즉 자바스크립트의 document객체를 래핑한 것이다
console.log($('div').end()===document);//false
console.log($('div').end().is(document));//true
try{
console.log($('div').end().html());//ncaught TypeError: Cannot read properties of null (reading 'createDocumentFragment')
}
catch(e){
console.log('요소를 못찾았어요:',e.message)
}
$('span').css('color','red').eq(0).css('border','1px red solid').end().eq(2).css('border','5px green solid')
});
});
</script>
</head>
<body>
<fieldset>
<legend>end()함수/find(선택자)함수</legend>
<span title="SPAN1">SPAN1</span>
<span title="SPAN2">SPAN2</span>
<span title="SPAN3">SPAN3</span>
<div>
<p>
<b>축구</b>
</p>
<p>
<b>농구</b>
</p>
<p>
<b>배구</b>
</p>
<button>확인</button>
</div>
</fieldset>
</body>
</html>
결과)
Append.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Append계열.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
$(':button').click(function(){
var table="<table style=\"border-spacing: 1px; background-color: red\">";
var row =$('#row').val();
var col =$('#col').val();
for(var i=1;i <= row;i++){
table+="<tr style=\"background-color: white\">";
for(var k=1;k<=col;k++){
table+="<td>"+i+"행 "+k+"열</td>";
}
table+="</tr>";
}
table+="</table>";
//append계열 함수 미사용
//$('#lblDisplay').html($('#lblDisplay').html()+table);
//[추가할 대상의 컨텐츠 이후에 추가됨]
//$("선택자").append("추가할 요소")
//$("선택자").append($()함수로 기존 객체 선택)
//$('#lblDisplay').append(table);
//$('#lblDisplay').append($('table:first'));//기존 요소 append시에는 잘라내서 붙여넣기 함
//$("추가할 요소").appendTo("선택자")
//$(table).appendTo('#lblDisplay');
//$('table:first').appendTo('#lblDisplay');
/*
before():
-DOM요소 이전에 html요소 추가
$('선택자').before('html요소');
after():
-DOM요소 다음에 html요소 추가
$('선택자').after('html요소');
insertBefore():
-DOM요소 이전에 html요소 추가 됨
$('html요소').insertBefore('선택자');
insertAfter():
-DOM요소 다음에 html요소 추가 됨
$('html요소').insertAfter('선택자');
*/
//$('#lblDisplay').before(table);
//$('#lblDisplay').before($('table:first'));//잘라내서 붙여넣기 함
//$('#lblDisplay').after(table);
$('#lblDisplay').after($('table:first'));
});
});
</script>
</head>
<body>
<fieldset>
<legend>DOM객체를 동적으로 추가하는 함수들</legend>
<h2>
<span>제목입니다</span>
</h2>
<input type="text" id="row" />행 <input type="text" id="col" />열
<input type="button" value="테이블 동적 생성" />
<table style="border-spacing: 1px; background-color: red">
<tr style="background-color: white">
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr style="background-color: white">
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<div id="lblDisplay" style="border: 1px red solid; width: 600px">
대상<br />대상2
</div>
</fieldset>
</body>
</html>결과)
Clone.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clone.html</title>
<style>
.clone {
width: 50px;
height: 50px;
border: 1px red solid;
text-align: center;
line-height: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
$('.clone').eq(0).click(function(){
//원본을 변경한 후 after()함수 적용:원본이 변경 되고 위치가 대상div아래로 포지셔닝
//var origin=$(this).css('backgroundColor','yellow').html('복제');
//$('.clone:eq(1)').after(origin)
//원본 복제(clone함수)후 복제본을 변경한 후 after()함수 적용:원본은 그대로 유지
var clone=$(this).clone().css('backgroundColor','yellow').html('복제');
$('.clone:eq(1)').after(clone);
});
//설문지 문항을 동적으로 추가하기
var index =1;
var origin = $('div:last');
$(':button').click(function(){
/*
//clone()함수 미사용
index++;
$('div:last').after(`<div>
<span>문제${index}번</span>
<input type="text" name="problem${index}" style="width: 60%" />
</div>`);*/
//clone()함수 용
$('div:last').after(origin.clone().find('span').html('문제'+ ++index+'번').next().prop('name','problem'+index).parent());
});
});
</script>
</head>
<body>
<fieldset>
<legend>clone()</legend>
<div class="clone">원본</div>
<div class="clone" >대상</div>
<hr/>
<button>문제 추가</button>
<hr />
<div>
<span>문제1번</span>
<input type="text" name="problem1" style="width: 60%" />
</div>
</fieldset>
</body>
</html>결과)
Wrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wrap.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
$('button').eq(0).on('click',function(){
$('span:first').wrap("<strike>").wrap("<strong>");
});
$('button:last').click(function(){
$('a').wrap('<li>');
});
});
</script>
</head>
<body>
<fieldset>
<legend><span>wrap()함수</span></legend>
<h2><span>포탈 사이트</span></h2>
<ul>
<a href="http://www.naver.com/">네이버</a>
<a href="http://www.daum.net/">다음</a>
<a href="http://www.nate.com/">네이트</a>
</ul>
<hr/>
<button>span태그 감싸기</button>
<button>a태그 감싸기</button>
</fieldset>
</body>
</html>결과)
RemoveEmpty.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RemoveEmpty.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
/*
※
$("선택자") 하면 무조건 jQuery객체 반환.
해당 객체가 없어도
즉 null이나 undefined가 아님
해당 객체 존재 유무는 null이 아닌
$("선택자").length==0으로 판단해라.
단,end()함수는 length가 1이다 이때 1은 DOM의 최상위 노드인 document객체이다
*/
console.log($('h2')===null?'h2요소가 없다':"h2요소가 있다");
console.log($('h2')===undefined?'h2요소가 없다':"h2요소가 있다");
console.log($('h2').length===0?'h2요소가 없다':"h2요소가 있다");
console.log($(':button').end().length===0?'버튼 이전 요소가 없다':"버튼 이전 요소가 있다");
$(':button').click(function(){
//$(this)는 무조건 요소수가 하나임으로 아래는 모두 false반환
//console.log($(this).is(':first'));//false
//console.log($(this).is(':eq(0)'));//false
console.log($(this).is('button:first'));//첫번째 버튼 클릭시 true,두번째 버튼은false
if($(this).is('button:first')){
//완전 사라짐.DOM에서 요소자체가 삭제됨
$('div').remove();
}
else{
//div요소 존재 .내용만 지운다
//text("")와 같다
$('div').empty();
}
});
});
</script>
</head>
<body>
<fieldset>
<legend>remove()및 empty()함수</legend>
<button>REMOVE</button>
<button>EMPTY</button>
<div style="color:green;border:1px red solid">DIV</div>
</fieldset>
</body>
</html>결과)
ReplaceWith.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReplaceWith.html</title>
<style>
div{
width:50px;
height:50px;
border:1px red solid;
text-align: center;
line-height: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
$(':button').click(function(){
if($('div').length===0){
$('button').not(':last').each(function(){
$(this).replaceWith('<div>'+$(this).html()+'</div>');
});
}
else{
$('div').each(function(){
$(this).replaceWith('<button>'+$(this).html()+'</button>');
});
}
});
});
</script>
</head>
<body>
<fieldset>
<legend>replaceWith()함수</legend>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<button>확인</button>
</fieldset>
</body>
</html>결과)
EachTrim.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EachTrim.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
/*
제이쿼리 함수:자스의 forEach나 for~in문처럼 특정요소에 적용하는 것이아나라
배열이나 객체에 적용하는 순환문
$.each(배열이나 객체,function(키값,밸류값){});
배열이라면
첫인자에는 인덱스 ,
두번째 인자에는 인덱스에따른 요소값이 저장됨.
객체라면
첫인자에는 키 ,
두번째 인자에는 키에따른 요소값이 저장됨.
*/
var mountains = ['한라산','지리산','덕유산'];
$.each(mountains,function(index,element){
console.log(index,element);
});
var member ={name:'가길동',age:20,addr:'가산동'};
$.each(member,function(key,value){
//console.log(key,value)
//console.log(member.key);//undefined
//※키를 변수로 처리시에는 반드시 []로 접근해야 한다
console.log(member[key]);
});
var members=[
{name:'가길동', age:20,addr:'가산동'},
{name:'나길동', age:30,addr:'나산동'},
{name:'다길동', age:25,addr:'다산동'}
];
$.each(members,function(index,e){
console.log('번호:%s,이름:%s,나이:%s,주소:%s',index+1,e.name,e.age,e['addr']);
});
console.log('X'+(' J Q U ER Y ')+'Y')
console.log('X'+$.trim(' J Q U ER Y ')+'Y')
});
</script>
</head>
<body>
<fieldset>
<legend>$.each(대상,콜백함수) 및 $.trim(문자열)</legend>
</fieldset>
</body>
</html>결과)
jQuery Ui
Ui폴더 생성
Accordion.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion.html</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function(){
/*
위젯 생성 방법
방법1. $("선택자").위젯함수() : 초기화
게터/세터는 초기화 후 사용
세터-$("선택자").위젯함수('option','옵션명','옵션값');
게터-$("선택자").위젯함수('option','옵션명');
방법2. $("선택자").위젯함수({'옵션명':'옵션값'})
*/
//방법1
//$("#accordion").accordion();//아코디언 초기화
//$("#accordion").accordion("option","active", 2 );//세터로 active옵션 2로 설정
// console.log('게터로 active옵션 읽기:',$("#accordion").accordion("option","active"));
//$("#accordion").accordion( "option", "collapsible", true );//active옵션보다 위에
//$("#accordion").accordion("option","active", false );
//방법2
var accordion= $("#accordion").accordion({
active:false,
collapsible:true,
animate:{duration:1000,easing:'easeOutBounce'},
//event:'mouseover click',
activate: function( event, ui ) {
console.log('activate이벤트 발생:',event,ui);
ui.newHeader.css('backgroundColor','black');
ui.newPanel.css('backgroundColor','gray');
ui.oldHeader.css({backgroundColor:'#886699',color:'white'});
}
});
//어코디언 함수가 적용된 div요소 반환됨
console.log('accordion:',accordion);
$(':button:first').click(function(){
var activeNumber = $(':input[type=number]').val();
//세터로 active변경
accordion.accordion("option","active", parseInt(activeNumber) );
});
$(':button:eq(1)').click(function(){
accordion.accordion('disable');
});
$(':button:eq(2)').click(function(){
accordion.accordion('enable');
});
$(':button:last').click(function(){
var animate=accordion.accordion('option','animate');
console.log(animate);
console.log('애니메이션 시간:%s,효과 함수:%s',animate.duration,animate.easing)
});
});
</script>
<style>
.ui-state-active{
background-color: green;
}
</style>
</head>
<body>
<fieldset>
<legend>아코디언</legend>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
<hr/>
<input type="number" step="1" max="3" min="0"/>
<button>active변경</button>
<button>비활성화 하기</button>
<button>활성화 하기</button>
<button>GETTER로 애니메이트 속성읽기</button>
</fieldset>
</body>
</html>결과)
1번 열었을 때 css변경
2번 열었다 닫음
DatePicker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function(){
//방법1]
/*
$("#datepicker").datepicker();//초기화
$("#datepicker").datepicker('option','dateFormat','yy-mm-dd');
$("#datepicker").datepicker( "option", "showAnim", "bounce" );*/
//방법2]
$("#datepicker").datepicker({
dateFormat:'yy-mm-dd',
showAnim:'fold',
showOtherMonths: true,//현재달에 시작과 끝에 다른 달의 날짜 보이기(다른달의 날짜는 선택 불가)
selectOtherMonths: true,//다른 달의 날짜 선택 가능 토록
//minDate: new Date(),//오늘날짜부터 이후만 선택 가능,숫자로는 0
buttonImage: "../images/calendar.png",
buttonText:'달력',
showOn:'both',
buttonImageOnly: true,
onSelect:function(selectedDate,inst){
//inst는 데이트피커 객체
console.log('선택한 날짜:',selectedDate);
console.log('선택한 날짜:',inst.input.val());
console.log('선택한 날짜:',this.value);
$('#display').html(selectedDate)
}
});
//자스로 달력 이미지를 입력상자 크기에 맞게 스타일 설정(buttonImageOnly: true)
$('.ui-datepicker-trigger').css({height:'30px',verticalAlign:'middle'})
});
</script>
</head>
<body>
<fieldset>
<legend>데이트 피커</legend>
<input type="text" id="datepicker">
<h2>선택한 날짜 아래에 표시하기</h2>
<span id="display" style="color:red;font-size:1.5em"></span>
</fieldset>
</body>
</html>결과)
옵션을 줘서 6월 이전의 달력날짜(31,30..)를 보여주게 하거나, 옵션(minDate를 오늘 날짜로 하면 클릭이 안 되는 옵션 같은 여러 가지 기능을 줄 수 있음)
Plugin폴더
jquery validate주소를 넣어줘야 된다.
jquery-validation-1.19.5.zip
1.35MB
Validator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validator</title>
<style>
.error{
color:red;
padding-left: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!-- 제이쿼리 유효성 검증용 플러그인 -->
<!--
<script src="../js/jquery.validate.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
$(function(){
/*
※$(폼 선택자).validate({rules:{},messages:{}});
rules규칙:
-필수 입력 혹은 필수 선택(체크박스/라디오/선택상자)
하위요소명 : "required"
혹은
2개 이상 규칙 적용시
required:true
-최소 몇자 이상 혹은 몇 개 이상 선택
minlength:최소수
*/
//1]input type="submit"버튼 일때
$('#frm').validate({
rules:{//유효성 규칙 설정
name:'required',
id:{required:true,minlength:4,maxlength:8},
pwd:{required:true,minlength:5},
pwd2:{required:true,equalTo:'#pwd'},
email:{required:true,email:true},
inter:{required:true,minlength:2},
sel:'required',
gender:'required',
file:'required',
self:'required'
},
messages:{
name:'이름을 입력하세요',
id:{required:'아이디를 입력하세요',minlength:'아이디는 최소 4자이상 입니다',maxlength:'아이디는 최대 8자까지 입니다'},
pwd:{required:'비밀번호를 입력하세요',minlength:'비밀번호는 최소 5자 이상입니다'},
pwd2:{required:'비밀번호 확인을 입력하세요',equalTo:'비밀번호가 일치하지 않아요'},
email:{required:'이메일을 입력하세요',email:'이메일 형식이 아닙니다'},
inter:{required:'관심사항을 체크하세요',minlength:'관심사항은 최소 2개이상 체크하세요'},
sel:'학력을 선택하세요',
gender:'성별을 선택하세요',
file:'파일을 첨부하세요',
self:'자기소개를 입력하세요'
}});
//2]input type="submit"버튼이 아닐때
//Step1] $(폼객체 선택자).validate()적용
//Step2] $(폼객체 선택자).valid()호출
// true반환시 $(폼객체 선택자).submit()호출한다
$(':button').click(function(){
if($('#frm').valid()){
$('#frm').submit();
}
});
});
</script>
</head>
<body>
<!--https://jqueryvalidation.org/-->
<fieldset>
<legend>제이쿼리의 플러그인을 사용한 유효성체크</legend>
<span style="color: red; font-size: 1.8em"></span>
<form method="post" action="http://www.nate.com" id="frm">
이름:<input type="text" name="name" /><br />
<label for="id">아이디:</label>
<input type="text" value="" name="id" id="id" /><br />
비밀번호:<input
type="password" name="pwd" id="pwd" /><br /> 비밀번호 확인:<input
type="password" name="pwd2" /><br />
이메일 : <input type="email" name="email"/><br/>
관심분야: <input type="checkbox"
name="inter" value="A" id="pol" />정치
<input type="checkbox"
name="inter" value="B" />경제
<input type="checkbox" name="inter"
value="C" />스포츠
<!--
체크박스나 라디오버튼은 에러 메시지가
첫번째 체크박스 나 첫번째 라디오버튼 다음에
표시됨.
label태그를 이용해서 특정 위치(단,form태그안에서만)에
에러메시지를 뿌려 줄 수 있다.
for속성:name 속성에 지정한 값
class속성:반드시 "error" 문자열
-->
<label for="inter" class="error"></label><br /> 성별: 남자<input
type="radio" name="gender" value="man" /> 여자<input type="radio"
name="gender" value="woman" /> <label for="gender" class="error"></label><br />
<!--
option태그의 value속성에 빈 문자열("")을
설정하면 선택 하지 않은 것으로 간주한다.
-->
<select name="sel">
<option value="">==학력을 선택하세요==</option>
<option value="uni">대학교</option>
<option value="high">고등학교</option>
<option value="middle">중학교</option>
<option value="ele">초등학교</option>
</select><br /> <input type="file" name="file" /><br /> 자기소개<br />
<textarea name="self" cols="50" rows="5"></textarea>
<br />
<input type="button" value="button타입" />
<input type="submit" value="submit타입" />
<input type="reset" value="취소" />
</form>
</fieldset>
</body>
</html>결과)
dist cdn을 넣어서 연동할 수 있다
fullscreen-lightbox-gallery.zip
0.01MB
FullscreenLightboxGallery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullscreenLightboxGallery.html</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="../styles/lightboxed.css" rel="stylesheet" />
<script src="../js/lightboxed.js"></script>
<script>
$(function(){});
</script>
<style>
html,* { font-family: 'Inter'; box-sizing: border-box; }
body { background-color: #fafafa; line-height:1.6;}
.container-lightbox { margin: 70px auto; max-width: 960px; }
.container-lightbox img { width: 300px; }
</style>
</head>
<body>
<!--https://www.jqueryscript.net/lightbox/fullscreen-lightbox-gallery.html -->
<!-- jquery plugin best 2022 로 검색후 lightboxed로 검색 -->
<div class="container">
<!--
<div class="container-lightbox">
-->
<h1>이미지 슬라이드(jQuery Lightboxed Plugin)</h1>
<div class="card-columns">
<div class="card">
<div class="card-body">
<img class="lightboxed img-thumbnail" rel="group1" src="../images/img1.jpg" data-link="../images/img1.jpg" alt="Image Alt" data-caption="슬라이드 1" />
</div>
</div>
<div class="card ">
<div class="card-body">
<img class="lightboxed img-thumbnail" rel="group1" src="../images/img2.jpg" data-link="../images/img2.jpg" alt="Image Alt" data-caption="슬라이드 2" />
</div>
</div>
<div class="card ">
<div class="card-body">
<img class="lightboxed img-thumbnail" rel="group1" src="../images/img3.jpg" data-link="../images/img3.jpg" alt="Image Alt" data-caption="슬라이드 3" />
</div>
</div>
<div class="card ">
<div class="card-body">
<img class="lightboxed img-thumbnail" rel="group1" src="../images/img4.jpg" data-link="../images/img4.jpg" alt="Image Alt" data-caption="슬라이드 4" />
</div>
</div>
<div class="card">
<div class="card-body">
<img class="lightboxed img-thumbnail" rel="group1" src="../images/img5.jpg" data-link="http://www.youtube.com/embed/Rix_3b9ThLI?list=PL8zglt-LDl-iwBHEl3Pw1IhWGp9cfgMrc" data-width="560" data-height="315" data-caption="유트브 동영상"/>
</div>
</div>
<div class="card">
<div class="card-body">
<img class="lightboxed img-thumbnail" rel="group1" src="../images/img5.jpg" data-link="http://www.youtube.com/embed/Rix_3b9ThLI?list=PL8zglt-LDl-iwBHEl3Pw1IhWGp9cfgMrc" data-width="560" data-height="315" data-caption="유트브 동영상"/>
</div>
</div>
<div id="inline" style="display: none;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff;">팬데믹 기간을 겪으며 기업의 HRD(Human Resources Development) 부서는 업무를 재창조하는 수준의 변화를 고민해야 했다. 주요 업무가 오프라인 집합 교육의 기획 및 운영에 국한됐는데, 코로나19로 인해 이런 방식의 교육을 진행할 수 없었기 때문이다</div>
</div>
</div>
<div>
<a href="../images/img1.jpg" class="lightboxed btn btn-warning">이미지 링크</a>
<a href="#inline" class="lightboxed btn btn-secondary">텍스트 보기</a>
</div>
</div>
</body>
</html>결과)
이미지 클릭 시
이미지 링크 버튼 클릭 시
텍스트 버튼 클릭시
