레드아이

1 1-1 1-2 1-3 1-4 1-5 1-5 1-6 1-7 1. eq 필터 셀렉터 $(function(){$('#indexFind > li:eq(3)').css('color', 'red');}); 2. gt 필터 셀렉터 $(function(){$('#indexFind > li:gt(3)').css('color', 'red');}); 3. lt 필터 셀렉터 $(function(){$('#indexFind > li:lt(3)').css('color', 'red');}); 4. has 필터 셀렉터 $(function(){$('#indexFind > li:has(p)').css('color', 'red');}); 5. not 필터 셀렉터 $(function(){$('#indexFind > li:not(.not..

1 1-1 1-2 1-2 1-3 2 2-1 2-2 2-3 2-4 2-5 2-6 1. 속성으로 엘리먼트 찾기Atrribute(속성)dml 이름과 값으로도 엘리먼트를 찾을 수 있다. '[name=value]' 형식으로 사용해주면 된다. 예제에서는 title속성의 attributeFind인 것을 찾아서 빨간색으로 변경하라는 의미이다. $(function(){$('[title=attributeFind]').css('color', 'red');}); 2. first 필터 셀렉터이제부터 나오는 필터들은 현재 형제엘리먼트중 특정 엘리먼트를 선택하기 위하여 쓰인다. first 필터 셀렉터는 형제엘리먼트중 제일 위에 있는 엘리먼트를 사용하기 위하여 사용된다. :first 를 사용한다. 예제에서는 1-1이 선택될 것이다...

JQuery는 자바스크립트의 인기있는 라이브러리 중 하나이다. 현재 국가에서 지정을하여 국가 제품을 만들 때 자바스크립트 라이브러리를 사용하려면 Jquery를 사용해야 한다고 한다. JQuery는 코드보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 여기에서는 각각의 함수들의 예시와 함께 이것을 실행시켰을때 어떻게 결과화면이 나오는지 눈으로 확인을 해보며 함께 공부해보고자한다. 틀린 부분이 있거나 더 좋은 코드를 조언해주실 분들은 댓글 부탁드립니다. HTML코드에서 JQuery를 사용하기 위해서 script태그를 이용한다. $(function(){});은 HTML문서를 다 읽고 후에 실행하겠다 라는 의미이다. 예제들은 이 함수안에서 작성할것..

이번장에서는 Element들을 찾아볼 것이다. Element를 찾기위해서는 id, class를 이용하는방법이 가장 기본적으로 사용되며 이외에 자식, 자손, 형제 element찾기, 순서대로 찾기, 특정 태그를 포함한 element찾기등 다양한 방법이 존재한다. 일단 가장기본적인 id, class이용하기, 자식,자손,형제 element찾기를 시작해보자. 밑은 오른쪽의 코드를 작성하면 어떻게 작동하는지 보기위한 도구이다. 실행과 되돌리기 버튼을 눌러보면서 재밌게 공부해보자~! 01_아이디로_엘리먼트찾기 1 1-1 1-1-1 1-1-2 1-2 1-3 1-3-1 2 2-1 2-1-1 2-1-1-1 2-1-1-2 2-1-1-3 2-1-1-4 2-1-1-5 1. id를 이용하여 엘리먼트찾기$('#idname')id..

ID 가 hidden 인 곳의 html 코드를 읽어들여 ID가 wrapper 인 곳에 똑같이 써넣으시오$(function(){var h = $('#hidden').html();$('#wrapper').html(h);}); append() 특정 위치의 자식들 중 맨 뒤에 특정 내용을 넣으시오$(function(){var target = $('#warpper > ul > li:eq(2) > ul');var ele = '3-5'; target.append(ele);}); prepend() 특정 위치의 자식들중 맨 앞에 특정 내용을 넣으시오$(function(){var target = $('#warpper > ul > li:eq(2) > ul');var ele = $('#warpper').next(); targ..

이번에는 봄 여름 가을 겨울 위의 4개의 이미지를 클릭하면 나머지 이미지가 바뀌는것을 만들어 보려고한다.

method('parameter') -> getmethod('parameter1', 'parameter2') -> set 어트리뷰트 값 가져오기$(function(){var val = $('#nameField').attr('value');alert(val);});혹은 $('#nameField').val(); 도 가능 이것을 추천 어트리뷰트 속성과 값 추가하기$(function(){$('#nameField').attr('value', '별명을 입력하시오');}); 자바스크립트는 method chain 방식으로 자신을 리턴해준다 따라서 $(function(){//method chain$('#nameField').attr('value', '별명을 입력해주시오').attr('name', 'userName');}..

rock-paper-scissors ///// 가위 0 바위 1 보 2  function computerChoice(){ var computerChoice = Math.floor(Math.random()*3) return computerChoice; } function yourChoice(){ var yourChoice = $('#inputYourChoice').val(); if(yourChoice=='가위') return 0; else if(yourChoice=='바위') return 1; else if(yourChoice=='보') return 2; else alert('가위, 바위, 보 ..

children() 아래 엘리먼트들 선택$(function(){$('#wrapper').children().css('color', 'red');}); next() 엘리먼트 바로 다음 형제 엘리먼트 선택, 내 바로 밑에 동생$(function(){$('#wrapper .first').next().css('color', 'red');}); nextAll() 다음에 존재하는 형제 엘리먼트들 모두 선택, 동생 모두$(function(){$('#wrapper > ul > .first').nextAll().css('color', 'red');}); nextUntil() 1번의 형제 엘리먼트 중 5번전까지의 형제 엘리먼트 모두 선택$(function(){$('#wrapper > ul > .first').nextUnt..

html에서 자바스크립트 파일을 추가하는 것이다. C언어의 include와 동일하다. $(document).ready(function(){$('#element').css('color' , 'red');$('.a').css('color', 'blue');}); 소스코드 밑까지 실행이 끝나면 여기로 돌아와 실행을 한다. $(function(){$('#element').css('color' , 'red');});와 같다. element아이디 선택$(function(){$('#element').css('color','red');}); elements 클래스 선택$(function(){$('.elements').css('color', 'red');}); ul아이디를 가지고있는 ul태그의 자식 태크 li 중 ele..