jquery lesson1 (학습 54일차 TIL)
210830 오늘은 자바스크립트 라이브러리의 일종인 jquery에 대해 학습했다. 제이쿼리는 계속해서 쇠퇴하고 있지만, 아직도 시장 점유율을 어느 정도는 차지하고 있으므로 배우지 않고는 넘어갈 수 없는 계륵같은 상황이라고 할 수 있겠다.
Jquery Method Basic
/* 제이쿼리 기본 문법 */
$(document).ready(function(){
$('.obj5').parent().css('border', 'dashed 2px #0f0');
$('.obj3').children('.theObj1').css('color', 'red');
// 매우 직관적이고 쉬운 문법
$('#wrap h3').css().css()
// 체이닝 기법, 하나의 선택자에 같은 메서드를 여러 차례 이어서 작성할 수 있음.
$(':text').css({'background':'#ccc', 'border':'solid 1px #000'});
// 폼의 입력 요소를 선택할 때 (:종류) 형식의 선택자 사용
});
/* document 생략 가능 */
$(function(){
$('#list1 li:odd').css('background', 'yellow');
// index번호로 홀 수 선택 0부터 시작. 짝수는 :even
// :first, last
$('#list1 li').eq(1).css('font-style', 'italic');
$('#list1 li:lt(3)').css('border', 'dotted 2px aqua');
// index 3 미만 요소들
$('#list1 li:gt(3)').css('border', 'dotted 2px green');
// index 3 이상 요소들
$('#list2 li:contains("리스트11")').css('background', 'aqua')
$('#list2 li:has("span")').css('color', 'gray')
$('#list2 li').find('a').css('background', 'red');
$('#list2 li').not('.theObj').css('font-size', '14px');
$('#list2 li').filter('.theObj').css('font-size', '24px');
/* html 조작 */
$('h2.theTitle').html('<a href="#">요소 객체 조작</a>');
// 하위 요소를 삽입한다. 내용을 새로 변경
$('.obj1').text('리스트2');
// 텍스트를 새 텍스트로 변경
$('#list3').append('<li>리스트6</li>');
// 마지막 위치에 요소 추가
$('#list3').prepend('<li>리스트1</li>');
// 처음 위치에 요소 추가
$('<li>이전 추가</li>').insertBefore($('#list3 li').eq(4));
// 새요소를 선택요소의 앞에 추가
$('<li>이후 추가</li>').insertAfter($('#list3 li').eq(5));
// 새요소를 선택요소의 뒤에 추가
$('.obj1').clone().appendTo('#list3');
// 복제 후 맨 마지막에 추가
$('#list3 li').eq(0).remove();
$('#list3 li').eq(0).attr('class'); // class 값 반환
$('#list3 li').eq(0).attr('class', 'obj2');
// 클래스명이 obj2로 변경됨. attr('속성명', '속성값');
// {'':'', '':''} 어러개의 속성과 값을 바꿀 수도 있다.
$('#list3 li').eq(0).toggleClass('obj3');
// class 추가 or 삭제
});
Author And Source
이 문제에 관하여(jquery lesson1 (학습 54일차 TIL)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@inusneo/jquery-lesson1-학습-54일차-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)