php로는 이동페이지에 바로 값을 사용하기엔 좋은데... 클릭이벤트를 실행할수가 없어 반드시 자바스크립트가 사용되야하더라...
<html>
<body>
<input type="text" name="txt" id="txt" value="abcd">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="htm" style="background: red">ㅎㅇㅎㅇ</div>
<div class="txt">ㅎㅇㅎㅇ</div>
<input type="text" name="val" id="val" value="HiHi">
<div id="add_div"></div>
</body>
</html>대충 만들어놓은 HTML
$(document).ready(function () { // HTML이 노출된 이후에 실행된다.
// click, change 등 html이 노출된이후 이벤트 설정이 필요한 경우에 쓰이는데... 맨날 걍써놈..
console.log($('#txt').val('저는 1번째 줄인 val() 입니다.')); // id 선택 방법
console.log($('.test')); // div 3개가 선택된다. -> class 선택 방법
// val 개인적으로 제일 많이 사용함 태그 안의 value값을 가져오거나 설정할때 사용 input값 가져올때 유용
console.log($('#val').val()); // HiHi
$('#val').val('ByeBye'); // 값이 ByeBye로 변경된다.
간단한것만 적어서 가져왔다.
$(document).ready(function() {
항상 적어놔야한다. 뭔가 이벤트를 작성하고 싶다면 이안에 작성하면 된다. html이 모두 준비된 후 작업에 들어간다.
예를들어 버튼을 클릭할시 알림창에 '안녕하세요'가 표출되도록 코딩을 했고 저안에 적었다면 그 버튼은 일단생성되고 난 후에 html이 모두 로딩된 후 버튼의 위에 클릭이벤트가 생성된다.
뺴빼로 막대가 다 만들어지고 난 후 초콜렛을 씌우는 과정이라고 생각하면 될거같다.
$('#txt').val('내용') 또는 '' 를 입력시 input안의 내용이 초기화된 후 해당내용으로 변경된다.
$('#txt').val() 로 사용 시 input안의 value값만 가져오기에 abcd를 가져오게된다.
클래스로 선택할시 모든 값이 선택된다. 자바스크립트와 거의 같지만 쓰다보면 명령어들이 좀 더 간결해서 좋다.
// ATTR - ATTR은 속성값을 가져오거나 설정할 수 있다.
$('.test').attr('test','tester'); // test라는 모든 div 의 test값이 tester이 된다.
$('#txt').attr('abcd','gdgd');
console.log($('#txt').attr('abcd')); // 방금 설정한 'gdgd'이 출력된다. (따로 개인적으로 값이 필요한 경우 사용할 수 있음.)ATTR / 속성의 값을 가져올 수 있다.
그냥 값을 가져올 수 있다. class값은 물론이고 그냥 내가 임의로 만든 값도 가져올 수 있어서 값을 심어놓을때 자주 사용..
예를 들어 달력같은걸 만들때 attr('full_day','2022-12-05') 를 입력해놓고 full_day를 가져오면 편안하게 값을 사용할 수 있다.
// append 태그의 제일 마지막 부분에 내용을 추가할 수 있음.
var add_html = "<div>오늘도 고생하세요(추가된 div)</div>"
$('#add_div').append(add_html)
// HTML 태그의 모든 내용을 다 덮어버린다. append는 마지막 위치에 추가해줌
$('.htm').html('덮어쓰기');
// TEXT 택스트의 내용을 가져오거나 수정할 때 사용할 수 있다. (html이 인식안될때가 있는데 그때 사용할 수 있다.)
$('.txt').text('덮어쓰기다.');
console.log($('.txt').text()); // 위의 내용이 콘솔로 표시된다.
append태그다. 그냥 태그의 제일 마지막 부분에 삽입된다. 원레 있던 값에서 추가되기에 계에속 추가될 수 있다. html태그를 그대로 넣을 수 있어서 이것저것 넣어줄때 편하다.
html, text -> 모든 값을 다 덮어버림..... 그냥 글이 적고싶거나 하면 사용하면 된다.
// width, height 설명 그대로 width와 hight값을 가져오거나 설정한다.
console.log($('#val').width()); // 169
$('#val').width('200px');
console.log($('#val').width()); // 200
// height도 동일하다.몇번 사용해보진 못했지만 width,height 값을 가져오거나 설정할 수 있다. 근데 보통 스타일로 넣지않나 ?..
자바스크립트로 막넣으면 디자이너님한테 혼나니까 조심하도록.
// css 말그대로 css를 수정하거나 가져올 수 있다.
console.log($('.htm').css('background')) //rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
// 하지만 가져오느라 사용하는 경우는... 잘없다.
$('.htm').css('color', 'white');css를 수정하거나 가져올 수 있지만... 사실 컬러값을 가져와서 사용하는 경우는 좀 드물다 .. 가져올 수 있다는것만 알아두자
// show, hide hide로 숨길 수 있고 다시 보여줄때 show를 사용한다. css를 확인하면 display:none과 동일
$('.txt').hide();
$('.txt').show();
// click 기본적으로 자바스크립트의 이벤트리스너와 같은데... 대체적으로 적기가 너무편함
$('.txt').click(A);
//클릭시 밑의 A가 실행된다. 물론 다른것들도 가능
//change .. 너무 간단하니 조금 섞어서 사용
$('#val').change( function B() {
alert('값이 변경됨');
})
})
function A() {
alert('클릭');
}show, hide .. css로 직접보면 display:none와 똑같으니 뭘 사용하든 자유다
click. 자바스크립트의 이벤트리스터인데 간단하게 함수를 불러올 수 있다. 클릭하자마자 바로 팟!
change - 말그대로 값이 바뀌면 실행되는 함순데 아주 간단하게 실행이 가능하다.
자바스크립트는 기본적으로 어느정도 알아야하니 모두 힘을내도록 하자...
'개인 공부' 카테고리의 다른 글
| [JQuery] 프리뷰 이미지 만들기(미리보기) (0) | 2022.12.13 |
|---|---|
| [php] 사이 날짜 구하기 (시작날짜 ~ 끝 날짜) (0) | 2022.12.07 |
| [php] 기본적인 함수 사용(strlen, number_fomat,substr) (0) | 2022.11.30 |
| [php] 기본적인 함수 사용_2 (timestamp,strotitome,date) (0) | 2022.11.22 |
| [php] 기본적인 함수 사용(explod,implod,isset,in_array) (0) | 2022.11.21 |
