전체 글
-
jQuery - replaceWith()jQuery 2020. 6. 23. 18:13
.replaceWith() - 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p 요소로 바꿉니다. 예제1 - 버튼을 클릭하면 h1요소를 Ipsum 으로 바꾼다. Lorem Replace 예제2 - 버튼을 클릭하면 h1요소를 abc 클래스 값으로 가지는 요소로 바꾼다. Lorem Ipsum Dolo..
-
jQuery - .prop()jQuery 2020. 6. 23. 17:20
.prop() - 지정한 선택자를 가진 첫번재 요소의 속성값을 가져오거나 속성값을 추가한다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript입장에서의 속성(property)이다 문법1 .prop(propertyName) 속성값을 가져온다. 문법2 .prop(propertyName, value) 속성값을 추가한다. 예제1 - a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력한다. Link 예제2 - 제일 위의 체크박스를 체크하거나 체크 해제를 하면 아래의 모든 체크박스가 체크되거나 체크 해제된다. Check ALL Checkbox 1 Checkbox 2
-
jQuery - .parent()jQuery 2020. 6. 23. 17:16
.parent() - 어떤 요소의 부모 요소를 선택한다. 문법 .parents( [selector] ) selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택한다. 예를 들어 $( 'p' ).parent().css( 'color', 'green' ); 는 p의 부모 요소의 색을 녹색으로 만들고, $( 'p' ).parent( 'div' ).css( 'color', 'green' ); 는 p의 부모 요소가 div일 때만 녹색으로 만든다. 예제 - ef를 클래스 값으로 갖는 p 요소의 부모 요소가 cd를 클래스 값으로 갖는 div일 때, 내용을 빨간색으로 만든다. Hello Lorem Ipsum Dolor
-
jQuery - .offset()jQuery 2020. 6. 23. 17:14
.offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킨다. 문법1 .offset() 선택한 요소의 좌표를 가져온다. 예를 들어 var jb = $('h1').offset(); 는 h1요소의 좌표를 변수 jb에 저장한다. 문법2 .offset(coordinates) 선택한 요소를 특정 위치로 이동시킨다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 는 h1요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킨다. 예제1 - h1과 h2 요소의 좌표를 출력한다. Lorem Ipsum 예제2 - h1 요소를 왼쪽에서 100px, 위에서 50px위치로 이동시킨다. Lorem Ipsum
-
jQuery - .load()jQuery 2020. 6. 23. 17:09
.load() - 다른 문서 등에서 내용을 가져와 현재 문서에 나타낸다. 문법 .load( url [, data] [, complete]) 예를 들어 a.html의 p요소를 가져와 div의 요소 안에 넣으려면 다음과 같이 해야 한다. $('div').load('a.html p') 예제 - load-02.html에서 id값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣는다. [load-01.html] [load-02.html] Lorem Ipsum Dolor
-
jQuery - jQuery.inArray()jQuery 2020. 6. 23. 17:03
jQuery.inArray() - 배열에 특정 값이 있는지 알아낼 수 있다. 문법 jQuery.inArray(value, array [, fromIndex]) - value : 검색하고자 하는 값을 입력 - array : 배열의 이름을 입력 - fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정한다. 입력하지 않았을 때의 기본값은 0으로, 첫번째 배열 값부터 검색한다. 예를 들어 jQuery.inArray('as', jbAry) 는 jbAry라는 배열에 as라는 값이 있는지 검색한다. 만약 배열에 as가 없다면 -1을 반환한다. 첫번째 배열 값이 as라면 0을, 두번째 배열 값이 as라면 1을 반환한다. 예제 var jbAry = [ 'a', 'b', 'c', 'd', 'e' ] var..