YJ의 새벽
jQuery ( 메소드와 이벤트 ) 본문
-- html() : 요소에 작성된 내용을 얻어옴 (태그포함)
- html("내용") : 요소에 내용 출력 (태그인식 O)
== innerHTML
-- text() : 요소에 작성된 내용을 얻어옴 (태그 미포함)
- text("내용") : 요소에 내용 출력 (태그인식 X )
== innerText
-- val() : value 속성값을 얻어옴.
- val("내용") : value 속성값을 지정
<div id="area">
<p class="cls1">기존에 작성되어있는 요소</p>
</div>
<button type="button" id="btn1">html() 메소드</button> $("#btn1").on("click",function(){
// 아이디가 area 인 요소의 내용을 모두 삭제
$("#area").html("");
//아이디가 area 인 요소에 내용 출력 (태그포함)
$("#area").html("<p class='cls1'>html() 메서드로 작성된 내용</p>");
});
기존에 작성되어있는 요소
- 객체 ( 요소 ) 삽입 메서드
-- 선택자 요소 (A) 를 기준으로 삽입 메서드 매개변수에 생성된 요소 (B) 또는 함수의 리턴값을 추가
-- $(A).append(B) : A요소 내 뒷부분에 B를 추가 (자식)
-- $(A).prepend(B) : A요소 내 앞부분에 B를 추가 (자식)
-- $(A).after(B) : A의 요소 뒷 부분에 B를 추가 ( 형제 )
-- $(A).before(B) : A의 요소 앞 부분에 B를 추가 ( 형제 )
--생성된 요소 (B) 를 매개변수로 지정한 선택자 (A) 요소에 추가 == 위 생성구문과 순서가 반대
-- $(B).appendTo(A) : B를 A의 요소 내 뒷부분에 추가 (자식)
-- $(B).prependTo(A) : B를 A의 요소 내 앞부분에 추가 (자식)
-- $(B).insertAfter(A) : B를 A의 요소 뒤에 추가 (형제)
-- $(B).insertBefore(A) : B를 A의 요소 앞에 추가 (형제)
<div id="area2">
<ul id="list2"></ul> <!-- 기준 -->
</div> $(function(){
let count = 1;
$("#list2").append("<li>리스트"+ count++ +"</li>"); // append() 마지막자식요소로 추가
$("#list2").append("<li>리스트"+ count++ +"</li>");
$("#list2").append("<li>리스트"+ count++ +"</li>");
$("#list2").prepend("<li>리스트"+ count++ +"</li>"); // prepend() 첫번째자식요소로 추가
$("#list2").prepend("<li>리스트"+ count++ +"</li>");
$("#list2").prepend("<li>리스트"+ count++ +"</li>");
for( let i =0; i<3 ; i++){
const el= "<p>새로 추가된 요소" +i +"</p>";
$("#list2").before(el); // before() 바로이전 형제요소추가
$("#list2").after(el); // after() 바로다음 형제요소추가
}
});
-- remove () : 요소 잘라내기 , 관련이벤트 삭제
-- detach () : 요소 잘라내기, 관련이벤트도 같이 잘라냄
<button type="button" id="btn2-1">empty()</button>
<button type="button" id="btn2-2">remove()</button>
<button type="button" id="btn2-3">detach()</button>
<div id="area3">
<div class="item" id="div3">안녕하세요</div>
<div class="item" id="div3">안녕하세요</div>
</div>
<hr>
<div id="area4">
<div class="item" id="div3">안녕하세요</div>
</div> // id가 div3 인 요소에 마우스 들어왔다 나갔다 할 때 동작
$("#div3").hover( function(){ // 마우스들어갈때
$(this).addClass("lime");
} , function(){ // 마우스나갈때
$(this).removeClass("lime");
} );
//empty() 버튼 자식요소를 모두 제거
$("#btn2-1").on("click",function(){
$("#area3").empty();
});
//remove() 버튼 요소잘라내기, 관련이벤트 삭제
$("#btn2-2").on("click",function(){
const el = $("#div3").remove();
$("#area4").append(el);
});
//detach() 버튼 요소잘라내기, 관련이벤트도 같이
$("#btn2-3").on("click",function(){
const el = $("#div3").detach();
$("#area4").append(el);
});
EX ))))
<h1 class="area"></h1>
<button type="button" id="stop">정지</button> let count = 0; // 숫자가 0~9 까지 증가하는것을 세기위한변수.
let interval ; // setInterval 을 저장할 변수
// read() 함수 : 페이지 로딩이 끝난 후 수행되는 함수
$(function(){
// 반복수행할 기능, 지연시간 (ms)
interval = setInterval(function(){
if( count < 10 ){
//0 ~ 9 까지 출력한 span 태그
const span = "<span class='text1'>"+ count++ +"</span>";
$(".area").append(span);
}else{ // count가 초과인경우
// 클래스가 area인 요손 내부 비우기
$(".area").empty();
count = 0;
}
},300);
// stop 버튼 클릭시
$("#stop").on("click",function(){
clearInterval(interval);
});
// 클래스가 text1 인 요소를 클릭했을때 콘솔에 내용 출력
$(document).on("click",".text1",function(){
console.log( $(this).text() );
});
});
**************************************************
--- HTML 문서는 위에서 아래로 해석.
--- on() , addEventListener() 는 요소에 이벤트 발생했을때 동작(기능)을 추가하는 메서드.
--- 기존에 on () , addEventListener() 를 이용하여 이벤트 동작을 추가할때는
이미 화면에 로딩이 완료된 상태인 요소에 추가를 했었음.
-- 정적요소 : HTML 문서 로딩 전부터 이미 작성되어있는 요소
-- > 기존방법 on("click",function(){} ) 사용가능
-- 동적요소 : 자바스크립트 또는 제이쿼리에 의해서 HTML 문서로딩 이후 추가되는요소
--> 기존방법 불가
--> $(document) . on ("이벤트", "선택자" , function() {} ) ;
- input 태그 관련 이벤트
-- focus : input 태그에 포커스가 맞춰졌을때. ex ) text인 경우 커서가 깜빡거릴때
-- blur : 포커스가 해제 되었을때
-- change : input 태그의 값이 변했을때
- checkbox , radio , select (마우스 선택요소)
-> 값이 변했을때 change 이벤트 발생
- test 관련요소 ( 키보드로 값을 변경하는 요소 )
-> 포커스가 해제 되었을때 이전값과 다를경우 change 이벤트 발생.
-- select : 선택한 요소 입력 영역값에 블럭이 설정된 경우 (마우스드래그했을때 )
-- input : 입력과 관련된 모든 이벤트
<h3> input 태그 관련 이벤트 </h3>
focus / blur : <input type="text" id="focus-blur"> <br>
change 1 : <input type="checkbox" id="change1"> <br>
change 2 : <input type="text" id="change2"> <br>
select : <input type="text" id="select"> <br> // 아이디가 focus-blur 요소에 초점이 맞춰진경우 배경색 pink 설정
$("#focus-blur").on("focus",function(){
$(this).css("backgroundColor","pink");
});
// 아이디가 focus-blur 요소에 초점이 해제된경우 배경색 원래대로
$("#focus-blur").on("blur",function(){
$(this).css("backgroundColor","");
});
// 아이디가 change1 인 요소가 체크/해제 될때마다
// 콘솔에 'checkbox 값이 변경되었음' 출력
$("#change1").on("change",function(){
console.log("checkbox 값이 변경되었음");
})
// 아이디가 change2 인 요소의 입력값이 변한상태로 포커스 해제될때마다
// 콘솔에 '입력값이 변경되었음' 출력
$("#change2").on("change",function(){
console.log("checkbox 값이 변경되었음"); // 엔터눌러도 change 이벤트발생
})
// 아이디가 select인 요소의 입력값에 블럭이 잡힌경우
// 콘솔에 ' 입력값에 블럭이 잡힘' 출력
$("#select").on("select",function(){
console.log("입력값에 블럭이 잡힘");
})
input 태그 관련 이벤트
focus / blur :change 1 :
change 2 :
select :
- EX ))) 동적으로 글자 수 세기
<h3>동적으로 글자 수 세기</h3>
<div>
<p> <span id="counter">0</span>/150</p>
<textarea id="input-content" rows="5" cols="50" style="resize:none;"></textarea>
</div> $("#input-content").on("input",function(){
// #counter 의 글자색 변경하기
// 글자수가 0~130 이면 글자색 검은색
// 131~149 주황색
// 150 빨강
if( $(this).val().length <= 130 ) { // 130자 이상
$("#counter").css("color","black");
}else if ($(this).val().length <= 149 ) { // 149자 이상
$("#counter").css("color","orange");
}else{ // 150자 이상
$("#counter").css("color","red");
// 150글자 이상 작성 불가능하게 만들기
// 1) textarea 에 작성된 값( 문자열) 을 변수에 저장
const str = $(this).val();
// 2) substr 을 이용해서 글자를 150글자 까지만 잘라내기
// 문자열.substr(시작인덱스,종료인덱스)
// --> 문자열을 시작인덱스 이상부터, 종료 미만까지 잘라내어 반환
// str.substr(0,150);
// 3) 150 글자만 잘라내어 testarea 의 값으로 셋팅하기.
$(this).val( str.substr(0,150) );
}
$("#counter").text ( $(this).val().length);
// $(this) : 입력이벤트가 발생한 현재요소 (textarea)
// val () : textarea 에 입력된 값
// length : 문자열의 길이
// test("문자열") : 요소의 내용을 출력할 문자열
});동적으로 글자 수 세기
0/150
'WebFront_ > jQuery' 카테고리의 다른 글
| jQuery ( effect 메소드 ) (0) | 2023.03.06 |
|---|---|
| jQuery 박스색 바꾸기 예제 (0) | 2023.03.03 |
| jQuery ( 순회(탐색) 메서드 ) (0) | 2023.03.03 |
| jQuery ( 선택자 ) (0) | 2023.03.03 |
| jQuery 란? ( onload(), read() ) (0) | 2023.03.03 |
