wdwd

JQuery 중요개념 본문

Web(Front End)

JQuery 중요개념

sang0 2019. 9. 24. 23:59
  1. 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하기 위해 쓰인다.
  2. 선택자
    • h2태그의 아이디값이 target인 선택자를 지정 -> $('h2#target')
    • p태그의 클래스 속성값이 ssafy인 선택자를 지정 -> $('p.ssafy')  or  $('.ssafy')
    • div의 직계자식인 div태그와 span태그를 동시에 선택자로 지정(> : 직계자식) -> $('div>div,span')
    • div의 후손인 p태그를 선택자로 지정(띄어쓰기 : 후손) -> $('div p')
  3. this, item : 이벤트에서 정의되는 자기자신을 가르키는 것 
    • this 사용법
      • $('h1').each(function(index) {
        • $(this).addClass('high_light_'+index);
      • }); 
    • item 사용법
      • $('h1').each(function(item) {
        • $(item).addClass('high_light_'+index);
      • });
  4. setTimeout, setInterval
    • setTimeout : 일정시간"후" 함수를 호출!
      • 3초 후에 첫번째 이미지가 body태그 뒤에 붙는 코드
      • setTimeout(function() {
        • $('body').append($('img:first'));
      • }, 3000);
    • setInterval : 일정시간"마다" 함수를 호출!
      • 2초 간격으로 계속 첫번째 이미지가 마지막에 붙음
      • setInterval(function() {
        • $('body').append($('img:eq(0)'));
      • }, 2000);
  5. append, appendTo
    • append : 태그에 내용이 붙을 때 사용. 나(객체)에 무엇(자료)를 append하는것
      • $('body').append($('img:eq(0)'));
    • appendTo : 내용에 태그가 붙을 때 사용. 나(자료)를 어떤것(객체)에 append하는 것
      • $('img').first().appendTo('body');

'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