6개월 대장정/JQUERY 개념 (5) 썸네일형 리스트형 46일차 - [JQ] HTML(CSS Classes), Traversing 안녕하세요. pitang입니다. jQuery HTML의 CSS Classes와 Traversing을 알아보겠습니다. jQuery - HTML(CSS Classes) jQuery에는 CSS 조작을 위한 여러 가지 방법이 있다. addClass() - 하나 이상의 클래스를 선택한 요소에 추가 removeClass() - 선택한 요소에서 하나 이상의 클래스를 제거 toggleClaass() - 선택한 요소에서 클래스 추가/제거 간에 전환 css() - 스타일 특성을 설정하거나 반환 예시를 살펴보겠다. addClass() ex1) removeClass() ex1) toggleClass() ex1) -> 두 번째, 세 번째, 네 번째 h1 요소를 클릭해서 .dark css요소가 추가된 것을 볼 수 있다. 다시 클.. 46일차 - [JQ] HTML(add, remove) 안녕하세요. pitang입니다. jQuery HTML의 Add와 Remove를 알아보겠습니다. jQuery - HTML(Add) HTML content를 추가하는 메서드 네 가지가 있다. append() - 선택한 요소의 끝에 내용 삽입 prepend() - 선택한 요소의 시작 부분에 내용 삽입 after() - 선택한 요소 뒤에 내용 삽입 before() - 선택한 요소 앞에 내용 삽입 예시를 살펴보면 더욱이 이해가 갈 것이다. append() ex1) ex2) ex3) prepend() ex1) ex2) after() ex1) -> after, append, li.after 버튼을 클릭한 순으로 이미지가 나열되어 있다. jQuery - HTML(remove) HTML elements, content를.. 45일차 - [JQ] HTML(get, set) 안녕하세요. pitang입니다. 45일차 저번 게시글에 이어! jQuery HTML 중 get, set에 대해 알아보겠습니다. jQuery-HTML(get) get은 쉽게 내용을 가져오는 것이다. html() - 선택한 요소의 내용을 설정하거나 반환한다. text() - 선택한 요소의 텍스트 내용을 설정하거나 반환한다. val() - 폼 필드 값을 설정하거나 반환한다. ex1) html() ex2) text() ex3) val() jQuery 라이브러리를 사용해서 문서 객체 속성을 조작할 때는 attr() 메서드를 사용한다. attr() - 매개변수를 넣는 방법에 따라 속성을 지정하거나 추출할 수 있다. 문서 객체의 속성을 조작한다. attr() 매서드에 매개변수를 하나 입력하면 해당 속성을 추출한다. .. 45일차 - [JQ] effect 안녕하세요. pitang입니다. 오늘은 jQuery의 effect와 html의 get-set에 대해 알아보겠습니다. jQuery-effect jQuery라이브러리는 문서 객체를 보이거나 보이지 않게 만드는 간단한 효과 메서드를 제공한다. 간단한 효과 메서드에는 속도를 매개변수로 입력할 수 있고, 입력하지 않으면 기본 값인 500ms가 적용된다. hide() / show() - 숨기기 / 표시 toggle() - 표시된 요소가 숨겨지고 숨겨진 요소가 표시 ex1) hide() ex2) show() ex3) toggle() ex4) hide() show() toggle() -> 효과를 사진으로 보여주긴 어렵지만, 코드를 작성해 출력해보면 효과가 적용된 것을 볼 수 있다. fadeIn() - fade 되면서 .. 44일차 - [JQ] 기초문법, event 안녕하세요. pitang입니다. 저번 게시물로 자바스크립트를 마무리하고 제이쿼리 jQuery를 알아보겠습니다. jQuery의 기초와 event들을 먼저 알아보도록 하겠습니다. JQUERY 기초 jQuery 라이브러리는 모든 웹 브라우저에서 동작하는 클라이언트용 자바스크립트 라이브러리이다. jQuery는 무료로 사용 가능한 오픈 소스 라이브러리이며, 사용 목적은 다음과 같다. - 쉬운 문서 객체 모델과 관련한 처리 구현 - 쉽고 일관된 이벤트 연결 구현 - 쉬운 시각적 효과 구현 - 쉬운 Ajax 응용 프로그램 개발 ex1) - 아래의 외부 js 파일을 html 파일에서 사용하는 방법은 다음과 같다. CDN은 jQuery를 비롯해 구글, 마이크로소프트 등에서도 제공한다. CDN은 파일을 여러 서버에 분산시.. 이전 1 다음
