23.04.21 금 30일차
jQuery
- 이벤트 메소드
clone 메소드를 사용하면 쉽게 문서를 복제 할 수 있다.
기본 태그 입력시 여러개의 값을 복사
ID를 지정하여 입력 시 1개씩 복사되는 것을 볼 수 있다* 코드
--헤더
<script>
$(function(){
// 시간 경과시 반복
setInterval(function() {
// DIV에 h1값을 여러개씩 추가
$('div').append($('h1').clone());
// DIV에 h1값을 한개씩 추가
$('div').append($('#h1').clone());
},3000);
})
</script>
--바디
<body>
<h1 id="h1"> 복사하기 </h1>
<hr/> <div id="div1"></div><hr/>
</body>
on 메소드
* 기본 형식 코드
-- 헤더
<script>
$(function(){
// on - 사용하겠습니다.
$('h1').on('click', function(){
alert('확인!'); // 확인!
});
});
</script>
-- 바디
<body>
<h1> 이벤트1 </h1>
<h1> 이벤트2 </h1>
</body>on 메소드
* 활용 코드(클릭시 문자 증가)
<script>
$(function(){
// on - 사용하겠습니다.
// h1에 대해 클릭(이벤트)시 +를 추가시킨다.
$('h1').on('click', function(){
//this - 자기자신(h1)
// this 대신 태그값을 넣을 시 여러개의 태그가 동시 실행
//자기함수(return 값으로 자기자신에게 값을 주는함수)
$(this).html(function(index, html){
// 각 값 확인 방법(알림을 이용해 값 확인)
alert(index); // 0
alert(html); // 이벤트';
return html + '+';
});
});
});
</script>
-- 바디
<body>
<h1 id="h1"> 이벤트 </h1>
</body>
on 메소드
* 방법 1
-- 헤더
<script>
$(function(){
// on - 사용하겠습니다.
$('h1').on('click', function(){
k = $(this).html();
alert(k + '확인!'); // 이벤트1 + 확인!
$('#memo').val(k);
});
});
</script>
* 방법 2
--헤더
<script>
$(function(){
// on - 사용하겠습니다.
$('h1').on('click', function(){
k = $(this).html();
$('#memo').attr('value', k);
});
});
</script>
--바디
<body>
<h1> 이벤트1 </h1>
<h1> 이벤트2 </h1>
<form>
<input type="text" name="memo" id="memo" value="">
</form>
</body>- 마우스 커서 접촉 시 배경색 변경
* 코드
-- 스타일
<style>
.reverse{
background : black;
color : white;
}
</style>
--헤더
<script>
$(function(){
$('h1').on({
// 마우스 커서 접촉시
mouseenter: function(){
$(this).addClass('reverse');
},
// 마우스 커서 미접촉 시
mouseleave: function() {
$(this).removeClass('reverse');
// 이벤트 중지(1번만 실행)
$(this).off();
}
})
});
</script>
--바디
<body>
<h1> 이벤트1 </h1>
<h1> 이벤트2 </h1>
<h1> 이벤트3 </h1>
</body>trigger
* 코드
--헤더
<script>
$(function(){
// h1 태그를 클릭시 h1 태그값에 @ 추가
$('h1').click(function(){
$(this).html(function(index, html){
return html + '@';
})
})
// h1 태그를 클릭하면 태그값 마지막에 값 추가
setinterval(function(){
$('h1').last().trigger('click');
},1000);
});
</script>
-- 바디
<body>
<h1> Start : </h1>
<h1> Start : </h1>
</body>
stopPropagation - 이벤트 전달을 제거
preventDefalut - 기본 이벤트 제거
* 코드
-- 스타일
<style>
* { margin:5px; padding:5px; border:3px solid black; }
</style>
-- 헤더
<script>
$(function(){
// a태그 클릭시 event1동작(배경색상을 파란색으로 바꿈)
$('a').click(function(event1){
$(this).css('background-color', 'blue');
//자식에서 부모 요소의 이벤트 전달을 막아준다.
event1.stopPropagation();
// 브라우저 이벤트를 막아준다(링크이동X)
// ex) submit
event1.preventDefault();
})
// h1 태그 클릭시 event1동작(배경색상을 빨간색으로 바꿈)
$('h1').click(function(event1){
$(this).css('background-color', 'red');
})
});
</script>
-- 바디
<body>
// h1 태그가 부모, a 태그가 자식
<h1> <a href=""> Media(blue) </a> red </h1>
<h1> <a href="http://www.naver.com"> Media(blue) </a> red </h1>
</body>박스영역 테두리 영역에서 마우스커서가
안쪽 바깥쪽 이동시 텍스트 출력되는 코드
* 코드
--스타일
<style>
.outer{
width: 200px;
height:200px;
background:orange;
padding:50px;
margin: 10px;
}
.inner{
width: 100%;
height:100%;
background:red;
}
</style>
--헤드
<script>
$(function(){
// 마우스 커서 테두리 영역 바깥 박스 > 안쪽 박스
$('.inner').mouseover(function(){
$('body').append('<h3>마우스가 안으로 들어 왔습니다.</h3>');
});
// 마우스 커서 테두리 영역 안쪽 박스 > 바깥 박스
$('.inner').mouseout(function(){
$('body').append('<h3>마우스가 나갔습니다.</h3>');
});
});
</script>
-바디
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
글자수 입력 카운트 + 글자수 10자 제한 코드
* 코드
--헤더
<script>
$(function(){
// 글자수 입력 카운트
$('textarea').keyup(function(){
var inputLength = $(this).val().length;
var remain = 10 - inputLength;
// 문서 객체에 출력합니다.
$('h1').html(remain);
// 글자가 10이상일 때 글자 빨간색 적용
if(remain < 0){
$('h1').css('color','red');
// 10자 이상 글자 입력시 10자로 초기화
t1 = $(this).val().substring(0,10)
$('textarea').val(t1);
}else{
$('h1').css('color','black');
}
});
});
</script>
--바디
<body>
<div>
<p>내 생각을 작성해보자.</p>
<h1> 10자 </h1></div>
</div>
<textarea cols="70" rows="5" id="textarea"></textarea>
</body>
복사 확인 추가
* 코드
-- 헤드
function ckCopy(){
alert('Copy 확인!');
event.preventDefault();
}
-- 바디
방법 1 바디태그에 직접 리턴 제어
<body oncopy="return false" onpaste="return false" oncut="return false">
방법 2 입력태그에 함수부여하여 선언
<textarea cols="70" rows="5" id="textarea" oncopy="ckCopy()">
</textarea>
</body>테이블 입력 값이 전송결과 값으로 보여지는 코드
* 코드
-- 헤더
<script>
$(function(){
$('#bt').on("click",function(){
alert("버튼확인");
name = $('#name').val();
age = $('#age').val();
email = $('#email').val();
textarea = $('#textarea').val()
str = "이름 : "+ name + "<br>";
str = str + "생각 : "+ age + "<br>";
str = str + "메일 : "+ email + "<br>";
str = str + "생각 : "+ textarea + "<br>";
$('#div1').html(str) ;
})
})
</script>
-- 바디
<body>
<form>
<table border="1">
<tr >
<td>이름</td>
<td><input type=text id="name"></td>
</tr>
<tr >
<td>나이</td>
<td><input type=text name=age id="age"></td>
</tr>
<tr >
<td>메일</td>
<td><input type=emai id="email"></td>
</tr>
<tr>
<td>생각</td>
<td>
<div><p>내 생각을 작성해보자.</p></div>
<textarea id="textarea" cols="70" rows="5"
oncopy="ckCopy()" onpaste="ckPaste()"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="저장하기" id="bt" >
</td>
</tr>
</table>
<hr>
전송결과 :
<div id="div1"></div>
</form>
</body>submit 동작 시 테이블 값이 포함된 알림 발생
-- 헤드
<script>
$(function(){
$('#f_o').submit(function(){
name = $('#name').val();
pswd = $('#pwd').val();
alert(name + '.' + pswd);
event.preventDefault();
})
})
</script>
-- 바디
<body>
<form id="f_o">
<table border="1">
<tr >
<td>이름</td>
<td><input type=text id="name"></td>
</tr>
<tr >
<td>암호</td>
<td><input type=password id="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="제출">
</td>
</tr>
</table>
</form>
</body>버튼 입력 방법 목록(기본 알림창)
-- 헤더
<script>
//알림창 발생
$(function(){
// .on
$('#bt1').on('click', function(){
alert("버튼 1번입니다.");
})
// click()
$('#bt2').click (function(){
alert("버튼 2번입니다.");
})
// 화살표 표기법
$('#bt3').click(() =>{
alert("버튼 3번입니다");
});
})
// 함수사용
function bt4_ck(){
alert("버튼 4번입니다");
};
</script>
-- 바디
<form>
<input type="button" value="버튼1" id="bt1">
<input type="button" value="버튼2" id="bt2">
<input type="button" value="버튼3" id="bt3">
<input type="button" value="버튼4" id="bt4" onclick="bt4_ck()">
<!-- 버튼에 직접 알림창 사용 -->
<input type="button" value="버튼5" id="bt5" onclick="alert('버튼 5번입니다.')">
</form>
</body>
버튼 입력 방법 목록(알림창에 값 부여)
* 코드
-- 헤더
<script>
// 알림창 값을 부여받아 버튼 알림 동작
$(function(){
// .on
$('#bt6').on('click', function(){
k = $('#bt6').val();
k = $(this).val();
alert(k + "번입니다.");
})
// click()
$('#bt7').click (function(){
k = document.getElementById('bt7').value;
alert( k + "번입니다.");
})
// 화살표 표기법
$('#bt8').click(() =>{
k = document.getElementsByName('bt8_n')[0].value;
alert(k +"번입니다.");
});
})
function bt9_ck(){
k = $('#bt9').attr('value');
alert(k+"번입니다.");
}
</script>
--바디
<body>
<form>
<!-- 알림 값 불러오기-->
<input type="button" value="버튼6" id="bt6">
<input type="button" value="버튼7" id="bt7">
<input type="button" value="버튼8" id="bt8" name="bt8_n">
<input type="button" value="버튼9" id="bt9" onclick="bt9_ck()">
</form>
</body>- 느낀점
오늘은 마우스로 활용하는 Click 에대해서 배웠다.
마우스 클릭시 문장이 추가되는 내용의 코드와
마우스를 접촉했을 때 배경 색상이 바뀌는 내용을 배웠는데
신기하고 재밌었다.
우리가 사용하는 PC에서 사용할때 자주 보이는 부분을 만들어보니
흥미가 더 생기는 것 같다.
버튼 클릭시 알림발생 방법을 알게되었고,
여러 방법으로 알림창을 만들 수 있는걸 알았다.
어렵지만 차근차근 열심히 공부해야겠다.
Back-end Developer Preparation Students
0개의 댓글
