본문 바로가기
728x90

기타/jQuery

 (18)
[jQuery] 제이쿼리 appendTo, prependTo 사용해 요소 추가하기 요소를 추가하는 appendTo, prependTo 메서드에 대해 알아보도록 하겠습니다. 메서드 설명 .appendTo() 마지막에 요소를 삽입합니다. .prependTo() 처음에 요소를 삽입합니다. 1. appendTo(). append메서드와 달리 추가할 요소가 앞에 들어갑니다. 2 2. prependTo(). prepend메서드와 달리 추가할 요소가 앞에 들어갑니다. 2
[jQuery] 제이쿼리 자식 요소 선택 by find(), children() 제이쿼리에서 자식 요소를 선택하는 두 가지 방법에 대해 알아보도록 하겠습니다. 1.find() find함수는 선택된 요소에서 더 구체적으로 원하는 요소를 찾는 함수입니다. 문법 $(태그, class, id).find(조건) 예시 11111 22222 33333 위의 코드는 div 태그를 선택하고 그 안에서 class가 3인 p태그를 골라 css함수로 배경 색을 빨간색으로 바꾸는 코드입니다. 아래 결과를 보면 제대로 선택한 것을 알 수 있습니다. 2.children() children은 선택한 태그 안에 자식 태그 중 조건에 부합하는 것을 선택하는 함수입니다. 11111 22222 33333 div 태그에서 class가 3인 p태그를 선택해 배경색을 빨간색으로 바꾸는 코드로 find함수와 매개변수가 같습니..
[jQuery]제이쿼리 css 추가 스타일 변경, 추가 제이쿼리는 자바스크립트를 웹에서 좀 더 간편하게 사용할 수 있도록 합니다. 문법은 아주 간단합니다. '$()'로 html 태그를 선택하고 '. 함수 이름'으로 제어합니다. css로 스타일을 추가 변경하는 방법에 대해 알아보도록 하겠습니다. 1.cdn 추가하기. 위의 코드를 head태그에 추가해주세요. 2. 함수 만들기. function colorchange(){ $('p').css('color','red') } $로 p를 선택해 css속성을 추가하는 colorchange라는 이름의 함수를 만듭니다. 3. 완성 코드. 000000000 colorchange 버튼을 누르면 000000000이 빨간색으로 바뀝니다.
[jQuery] 제이쿼리 $ 의미 1.$의미 제이쿼리에서 $은 제이쿼리를 의미합니다. $는 '이제부터 제이쿼리를 사용할게요'라는 의미입니다. $() 괄호 안에 html 태그나 css 선택자를 매개변수로 넣으면 해당 부분을 선택합니다. 그러면 html 요소를 제이쿼리에서 사용할 수 있는 형태로 바꿔줍니다. 그리고 $(). 함수 이름을 하면 원하는 처리를 할 수 있습니다. 2. 제이쿼리의 기본 문법 $(html태그, id, class 등..).동작함수(); $()에서 동작 함수를 동작 함수를 적용할 대상을 정해주고 동작 함수를 실행합니다. document.getElementById(id); element.getElementsByClassName(names); document.querySelector(selectors); 제이쿼리를 사용하면 ..
[jQuery] 제이쿼리 선택자 여소 여러개 선택하기 오늘은 제이쿼리를 사용해 선택자를 여러 개 선택하는 방법에 대해 알아보도록 하겠습니다. a b c d e 위와 같이 ', '를 사용하시면 됩니다.
[jQuery] 제이쿼리 선택자 제이쿼리 선택자를 이용하면 특정 조건을 만족하는 html 코드를 보다 쉽게 가져올 수 있습니다. id, class, 속성 값을 통해 가져오는 방법에 대해 알아보도록 하겠습니다. 제이쿼리를 사용했을 때와 사용하지 않았을 때를 비교하면서 진행하도록 하죠. 1.id 선택자 a 스크립트 태그 안에 있는 첫 번째, 두 번째 줄은 딱 봐도 길죠. 제이쿼리를 사용하면 세 번째 줄과 같이 아주 간단하게 구현할 수 있습니다. $(#id명)을 통해 아주 쉽게 할 수 있죠. 2.class 선택자 a class 역시 매우 쉽게 구현할 수 있습니다. $(. 클래스명)을 사용하면 되죠. 3. 속성 선택자 document.querySelector("[value = 'a']") $("[value = 'a']") [] 안에 어떤 속성..
[jQuery] 제이쿼리 each 함수 제이쿼리에는 for문을 더욱 쉽게 구현할 수 있는 도구인 each가 있습니다. for문은 조건식이 매우 복잡하게 들어가는데 each는 그것을 생략할 수 있기 때문에 훨씬 간결한 코드가 가능합니다. 배열, 객체, html 태그에 적용할 수 있습니다. 각각에 대해 예시를 통해 알아보도록 하죠. 1.array에 적용하기. $.each(array, callback); var a = new Array(1,2,3,4) $.each(a,function(index,value){ console.log(index,value) }); 2.object에 적용하기. $.each(object, callback); var a = { name: 'Lee', gender: 'male' } $.each(a, function (index..
[jQuery] 제이쿼리 요소 삭제(remove, empty) 제이쿼리를 사용해 HTML 요소를 삭제하는 두가지 방법에 대해 알아보도록 하겠습니다. 1.remove() 해당 태그와 그 아래 모든 태그를 삭제합니다. $(태그이름).remove(id나 class명) 1 2 3 1 2 3 id가 a인 태그와 class가 e인 태그가 완전 삭제되었습니다. 2.empty() 해당 태그의 자식태그를 모두 삭제합니다. $(id나 class명).empty() 1 2 3 1 2 3 id가 a인 태그와 class가 e인 태그는 남아있고 자식 태그들이 삭제됩니다.
728x90

티스토리툴바