본문 바로가기

분류 전체보기

(153)

[제이쿼리] - ★★★객체 편집 메서드 / 선택한 요소 앞 뒤에 요소를 생성/ 새 요소 추가/ 새 요소로 바꾸기 / 부모요소 제거하고 새 요소로 감싸기 / before, insertBefore, after, insertAfter, append, appendTo, prepend, prependTo, replaceAll, replaceWith, unwrap, wrap, wrapAll, wrapInner 객체 편집 메서드 ★★★ 선택한 요소를 복제하거나 새 요소를 생성하는 메서드와 새로 생성한 요소를 의도한 위치에 삽입하고 선택한 요소를 삭제하는 메서드들로 이루어져 있다. 1. 선택한 요소 앞 뒤에 요소를 생성하기 before() / insertBefore() / after() / insertAfter() - before() / insertBefore() : 선택한 요소의 이전 위치에 새 요소를 생성. 둘 다 기능은 똑같으니깐 편한 기본형으로 골라 사용하면 된다. [기본형]- $('요소 선택').before('새 요소')- $('새 요소').insertBefore('요소 선택') - after() / insertAfter() : 선택한 요소의 다음 위치에 새 요소를 생성. [기본형..

[제이쿼리] - 스크롤바 위치 메서드 scrollTop, scrollLeft/ 스크롤바 원하는 위치로 이동시키기 스크롤바 위치 메서드 - scrollTop메서드 : 브라우저의 스크롤바가 수직으로 이동한 위치값을 불러오거나 변경할 때 사용한다. [기본형]$(window).scrollTop();: 스크롤바가 수직으로 이동한 위치값을 반환$(window).scrollTop('새 값');: 가로 안에 새 값이 들어오면 해당 위치로 스크롤을 이동시킨다. - scrollLeft메서드 : 브라우저의 스크롤바가 수평으로 이동한 위치값을 불러오거나 변경할 때 사용한다. [기본형]$(window).scrollLeft();: 스크롤바가 수평으로 이동한 위치값을 반환$(window).scrollLeft('새 값');: 가로 안에 새 값이 들어오면 해당 위치로 스크롤을 이동시킨다. body> div id="w..

[제이쿼리] - 수치 조작 매서드 / 요소 위치 메서드 position , offset 수치 조작 메서드 수치 조작 메서드는 요소의 속성을 조작할 때 사용하는 메서드로 요소의 넓이 높이나 여백 영역을 조작하거나 위치를 바꿀 때 사용한다. [기본형] 1. $('요소선택').width() 또는 $('요소선택').width(숫자) : 선택한 요소의 순수한 컨텐츠 영역(패딩, 보더, 마진을 제외한 영역)의 넓이값을 반환 또는 값을 바꾼다. 값이 무엇인지 알고 싶을 땐 앞쪽 기본형을 사용2. $('요소선택').height() 또는 $('요소선택').height(숫자) : 선택한 요소의 순수한 컨텐츠 영역(패딩, 보더, 마진을 제외한 영역)의 높이값을 반환 또는 값을 바꾼다. 3. $('요소선택').innerWidth() 또는 $('요소선택').innerWidth(숫자) : padding 영역까지..

[제이쿼리] - ★★★객체 조작 메서드 / 속성 조작 메서드 html / text / attr / addClass / val / prop / 문자 추가하기, 속성 변경하기, 벨류값 변경하기, 클래스 생성하고 삭제하기 객체 조작 메서드★★★ 객체 조작 메서드는 객체를 생성, 삭제, 복제, 속성 변환하는 메서드이다. 객체 조작 매서드는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눠진다. : 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드 요소의 넓이, 높이나 위치 등을 조작할 때 사용한다. : 객체를 생성하거나 삭제 또는 복제할 때 사용한다. 속성 조작 메서드★★★ 요소의 속성을 조작하는 메서드이다. 1. html( ) / text( ) 메서드 - html() : 선택한 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소를 바꿀 때 사용한다. 자식을 조작한다. (자바스크립트의 innerHTML innerText같은 애들)[기본형]1. $('요소선택').html();..

[제이쿼리] - 컨텐츠 탐색 선택자 contains/ contents/ has / not / end / find / filter / is 컨텐츠 탐색 선택자 :요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자이다. contains() / contents() / has() / not() / end()선택자 1. contains() : 선택한 요소 중 지정한 텍스트를 포함하는 요소만 선택한다. [기본형]$('요소선택:contains(텍스트)') 2. contents() : 선택한 요소의 하위 요소 중 자손의 텍스트와 태그 노드를 선택한다.[기본형]$('요소선택').contents() 3. has() : 선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다. [기본형]$("요소선택:has(요소명)") 또는 $('요소선택').has() 4. not() : 선택한 요소 중 지정한 태그만 제외하고 ..

[제이쿼리] - ★속성 탐색 선택자 / 속성과 값에 따른 선택자 / 속성 상태에 따른 선택자 속성 탐색 선택자 ★ 선택한 요소를 기준으로 일치하는 속성의 포함여부를 따져 요소를 선택하는 선택자이다.예를 들어 img태그 중 경로가 ./img/~~jpg와 일치하는 요소가 있는 지 찾을 때 사용한다.form요소에 많이 사용한다. value값을 찾거나 input의 type을 찾을 때 사용. css, 자바스크립트, 제이쿼리에도 다 있는 문법이다.속성과 값에 따른 선택자 :선택한 요소 중 지정한 속성과 일치하는 속성이 있는지, 없는지 포함여부를 따져 요소를 선택한다. [기본형] 1. $('요소선택[속성명]') : 선택한 요소 중 지정한 속성명이 있는 요소만 선택한다. (css에서 input [ type ]이렇게 썼던 것) 2. $('요소선택[속성명 = 값]') 선택한 요소 중 지정한 속성명과 값이 전부 ..

[제이쿼리] - 배열 관련 매서드 > $.inArray / $.isArray / $.merge / $.index 배열관련 매서드 $.inArray() / $.isArray() / $.merge() 매서드 (그렇게까지 쓰지않는다. 배열 합쳐야할 때 merge가끔 사용한다.) 1. $.inArray()매서드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스 번호를 반환한다. 2. $.isArray()매서드는 지정한 데이터가 배열 객체면 true를, 배열이 아니면 false를 반환한다. 3. $.merge()매서드는 두 배열 객체를 하나의 객체로 묶는다. (자바스크립트에도 있다. $빼고 뒤에 변수명1, 변수명2 쓰면 된다.) 데이터를 반환해주기 때문에 그 데이터를 받아줄 변수그릇이 필요하다[기본형]1. $.inArray(data, Array, start index) ->start index..

[제이쿼리] -배열 관련 매서드 > ★each , $.each()매서드 / ★$.map(), $.grep()메서드 제이쿼리 배열 관련 매서드 자바스크립트와 제이쿼리에는 배열 안을 탐색하는 다양한 메서드들이 있다. 1. each / $.each()매서드 ★ 선택자로 선택한 요소(배열에 담긴 요소들)을 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다. (요소들의 갯수만큼 반복하며 가져온다.)each매서드는 인수로 함수를 받는다. 함수 안에는 매개변수가 들어가는데, * 이때 첫번째 매개변수에는 배열의 인덱스 번호를 받아오고, 두번째 매개변수에는 인덱스 번호가 참조하고 있는 내용을 받아온다.*each는 배열 자체를 변환시킨다. 기존 배열이 유지되어야한다면 each를 사용하면 안된다. [기본형]1. $('요소선택').each(function(매개변수1, 매개변수2...){ 자바스크립트 코드}); 2. $.each($('..

[제이쿼리] - eq, lt, gt 탐색 선택자 / first-of-type, last-of-type / nth-child, nth-last-of-type / only-child / slice 선택자 / css 객체로 적용하는 법 태그를 선택하면 배열처럼 담기게 된다. 이때 아래의 것들을 사용한다. eq(index), lt(index), gt(index) 탐색 선택자 1. ★ eq(index)탐색자 : 선택한 요소 중 지정한 인덱스가 참조하고 있는 요소만 선택한다.2. lt(index)탐색자 : 선택한 요소 중 지정한 인덱스보다 작은(less Than)인덱스의 요소만 선택한다.3. gt(index)탐색자 : 선택한 요소 중 지정한 인덱스보다 큰(Greater Than)인덱스의 요소만 선택한다. [기본형]1. $('요소선택:eq(index)') 또는 $('요소선택').eq(index)2. $('요소선택:lt(index)')3. $('요소선택:gt(index)')eq기본값에서0 매서드 형태는 인수값을 넘기거나 함수를 넣을 수 있다. ..

[제이쿼리] - ★ 탐색 선택자 / 위치 탐색 선택자 (first , last , even , odd ) ★ 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색하여 더 정확하게 선택할 수 있다. 대표적인 탐색 선택자는 배열의 index를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다. 이 외에도 컨텐츠의 포함 여부로 다시 선택할 수 있는 '컨텐츠 탐색 선택자'와 '필터링 선택자'도 있다. 위치 탐색 선택자 : 기본 선택자로 태그 요소를 선택하면 이 요소들은 배열에 담긴다.☆ 이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다. 1. first / last 선택자 : first 선택자는 선택된 요소 중 첫 번째 요소만 선택하고, last 선택자는 요소..

이전 1 2 3 4 5 6 ··· 16 다음

티스토리툴바