wdwd
JQuery 중요개념 본문
- val() / text(), html() 차이
- val() - HTML 폼 요소의 value 속성 값을 지정하고 가져옴
- val()는 무조건 "form!!"에 있는 값 받아올 때 사용, 입력할 때도 사용★★★
- 그리고 checkbox와 radio button, <select> 요소의 선택 상태도 가져오거나 지정할 수 있음
- val(value) - form elements에 값을 지정함
- $('input').val('helloworld); //input의 value 값에 helloworld라고 넣음
- text(), html() - 요소의 일반 텍스트나 HTML 내용을 조회하고 지정함
- 전달인자 없이 html() 메서드를 실행하면 일치하는 요소의 첫 번째 요소안의 HTML내용을 반환함
- text(value), html(value) - textString 또는 함수(function(index, text) 이런 형태)로 넣을 수 있음
- 이 역시, Set하기 위해 쓰인다.
- val() - HTML 폼 요소의 value 속성 값을 지정하고 가져옴
- 선택자
- h2태그의 아이디값이 target인 선택자를 지정 -> $('h2#target')
- p태그의 클래스 속성값이 ssafy인 선택자를 지정 -> $('p.ssafy') or $('.ssafy')
- div의 직계자식인 div태그와 span태그를 동시에 선택자로 지정(> : 직계자식) -> $('div>div,span')
- div의 후손인 p태그를 선택자로 지정(띄어쓰기 : 후손) -> $('div p')
- this, item : 이벤트에서 정의되는 자기자신을 가르키는 것
- this 사용법
- $('h1').each(function(index) {
- $(this).addClass('high_light_'+index);
- });
- $('h1').each(function(index) {
- item 사용법
- $('h1').each(function(item) {
- $(item).addClass('high_light_'+index);
- });
- $('h1').each(function(item) {
- this 사용법
- setTimeout, setInterval
- setTimeout : 일정시간"후" 함수를 호출!
- 3초 후에 첫번째 이미지가 body태그 뒤에 붙는 코드
- setTimeout(function() {
- $('body').append($('img:first'));
- }, 3000);
- setInterval : 일정시간"마다" 함수를 호출!
- 2초 간격으로 계속 첫번째 이미지가 마지막에 붙음
- setInterval(function() {
- $('body').append($('img:eq(0)'));
- }, 2000);
- setTimeout : 일정시간"후" 함수를 호출!
- append, appendTo
- append : 태그에 내용이 붙을 때 사용. 나(객체)에 무엇(자료)를 append하는것
- $('body').append($('img:eq(0)'));
- appendTo : 내용에 태그가 붙을 때 사용. 나(자료)를 어떤것(객체)에 append하는 것
- $('img').first().appendTo('body');
- append : 태그에 내용이 붙을 때 사용. 나(객체)에 무엇(자료)를 append하는것
'Web(Front End)' 카테고리의 다른 글
Node.js란? (0) | 2019.12.30 |
---|---|
CSS 스타일 속성(2) (0) | 2019.09.15 |
CSS3 스타일 속성(1) (0) | 2019.09.15 |
CSS3 선택자 (0) | 2019.09.14 |
HTML5 (0) | 2019.09.12 |
Comments