mouseenter 이벤트와 mouseleave이벤트 각각 실행mouseenter, mouseleave 이벤트 연결하여 작성하기 click, mouseenter, mouseleave 이벤트 연결하여 작성하기
인자와 index가 동일한 element를 찾는 선택자index가 2인 요소 추출index가 2인 요소에 'selected' style 적용하기
인자보다 index값이 더 큰 element를 찾는 선택자index > 1 인 요소에 'selected' style 적용하기
인자보다 index가 더 작은 element를 찾는 선택자index 값이 2보다 작은 요소( index가 0,1 )에 'selected' style 적용하기
index가 짝수인 요소를 찾는 선택자index가 짝수인 요소( index가 0,2,4 )에 'selected' style 적용하기index가 홀수인 요소를 찾는 선택자index가 홀수인 요소( index가 1,3 )에 'selected' style 적용하기
첫번째 인덱스 요소에 대한 선택자첫번째 요소에 'selected' style 적용하기마지막 인덱스 요소에 대한 선택자마지막 요소에 'selected' style 적용하기
인자값으로 밀리초(ms)로 설정하거나 slow, fast 와 같은 예약어를 전달하여 이팩트 효과의 속도를 설정할 수 있다. 인자값으로 밀리초(ms)로 설정하거나 slow, fast 와 같은 예약어를 전달하여 이팩트 효과의 속도
: 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드: 인자값으로 밀리초(ms)로 설정하거나 slow, fast 와 같은 예약어를 전달하여 이팩트 효과의 속도를 설정할 수 있다.
특정 객체에 대하여 index() 함수의 리턴값을 사용하면 자신이 속한부모 택그 안에서 태그 종류의 구분 없이 자신이 몇 번째 요소인지를알 수 있다.index() 함수는 요소를 0부터 카운트한다.multiArr 배열을 생성하여 3개의 버튼의 각각의 Count 초기값을
속성값 가져오기 \- $(요소).attr("속성이름");속성값 변경/추가 \- $(요소).attr("속성이름", "값");다중처리 \- $(요소).attr({ 속성이름 : 값, 속성이름 : 값, 속성이름 : 값 });
페이지가 로드 되자마자 호출, 실행 페이지가 로드되자마자 random_banner() 메소드를 호출시켜라!$(document).ready(function(){ }); 보다 간단하게 사용할 수 있다!
이미지가 2초마다 랜덤으로 변경되며, 이미지를 클릭하면 연결된 링크로 연결된다.이미지와, 링크를 객체로 만들어 arr 배열을 만듬Math.random()을 사용하여 난수를 뽑는 random()메서드Math.random()은 실수를 반환하기 때문에 정수로 바꾸기 위해서는
랜덤으로 배너 이미지 변경! 이미지가 2초마다 순서대로 변경되며, 이미지를 클릭하면 연결된 링크로 연결된다.이미지와, 링크를 객체로 만들어 arr 배열을 만듬인덱스를 0으로 초기화하고, banner_img()메서드를 실행 한 후,idx변수를 1씩 증가시킨다.if문으로
클릭한 버튼의 이미지 변경 \- 다른 버튼을 클릭하면, 기존 클릭되었던 이미지도 다시 변경되야함 클릭한 버튼에 따라 텍스트 변경
val()함수를 사용하여 선택한 <option>요소의 값을 가져온다.let subject = $('만약 CSS 박스를 선택했을 경우이렇게 선택한 값을 변수에 저장하게 된다.만약 select 박스를 선택하지 않았다면첫번째 value 값이 "" 이기 때문에 유효성검사
id 가 'username'인 text 값 가져오기 \- $(" class가 'thumbnail'인 값 가져오기 \- $(".thumbnail") name이 'userpass'인 값 가져오기 \- $("inputname='userpass'").val();
부모창 위에 열려있는 팝업창(자식창)이 닫히기 전에는 부모창에 접근하지 못하게 하는 형태의 윈도우window.open() 처리로는 modal 윈도우를 구현할 수 없기 때문에,HTML 페이지 안에 빈 <div>를 숨겨놓고, 이벤트가 발생했을 때팝업처럼 사용한다.페이
$('.collapse-title > a') 를 클릭했을 때 이벤트 발생이벤트가 발생 한 a 태그의 href 요소 값을 obj 변수에 저장제목부분이 클릭되면, id가 obj인 내용부분을 slideToggle()로 나타냄 만약 특정 제목을 클릭했을 때, 펼쳐져 있는 다른
하나의 요소를 기준으로 하여 이전, 다음, 상위, 하위, 하위 n번째 요소를 리턴하는 함수들을 통해 HTML 구조를 탐색할 수 있다.
🗝️ 입력값 설정하기 \- 파라미터를 통해 입력값을 설정한다.$( 셀렉터 ).val( "내용" ); 🗝️ 입력값 조회하기 \- 파라미터없이 함수를 호출하면, 현재 설정되어 있는 입력값을 리턴받는다.let value = $( 셀렉터 ).val( ); 🗝️ 입력여부
여러 개의 항목 중에서 선택된 항목을 의미하는 셀렉터인 :checked를 사용하여 선택된 요소에 접근한다.radio 버튼은 여러 개의 항목 중에서 단 하나만 선택할 수 있으므로, :checked를 사용하여 접근하는 요소 역시 단일 요소가 된다. radio 버튼의 선택
여러 개의 항목 중에서 선택된 항목을 의미하는 셀렉터인 :checked를 사용하여 선택된 요소에 접근한다.checkbox는 여러 개의 항목 중에서 복수 선택이 가능한 요소이기 때문에, 접근한 요소는 유사 배열 형태가 된다. \-> 반복문으로 항목 가져와야 함check
만약 <option> 요소의 value 속성이 없을 경우, :selected는 태그 안의 내용을 가져오기 때문에, 값이 필요 없는 항목이더라도 반드시 공백을 지정해야 한다.\---선택하세요--- 는 값을 선택하지 않았을 경우를 나타낸다.이 경우 값이 필요 없는 항
HTML 요소에 대한 반복처리를 수행하는 경우, 배열의 각 요소에 대한index 값을 사용하여 원소에 접근해야 한다.ex) for문으로 각 인덱스 값 접근 $.each() 함수는 HTML 요소의 수 만큼 콜백함수를 호출하면서, 배열의 인덱스와 원소를 파라미터로 전달한다
요소의 입력, 선택 상태가 변경되었음을 감지하는 이벤트텍스트를 입력하는 요소 일 경우 \-> 내용이 변경되고 포커스가 빠져나올 때 이벤트 발생체크박스 or 라디오버튼 \-> 선택상태가 변경 된 즉시 이벤트 발생 드롭다운(셀렉트 박스) \-> 선택상태가 변경 된 즉시
요소에 포커스가 들어갔음을 감지하는 이벤트focus()는 함수로서 사용할 경우 강제로 포커스를 지정하는 기능을 갖지만,이벤트로서 사용할 경우 포커스가 들어갔음을 감지하는 기능을 한다.포커스가 빠져나왔음을 감지한다.두 개의 텍스트 박스 안에 포커스가 들어갈 경우 감지하는
값을 갖는 속성설정 값 조회 : attr(key)값 설정 지정 : attr(key, value)값을 갖지 않는 속성설정 값 조회 : prop(key)값 설정 기능 : prop(key , boolean)disabled, checked, selected$(셀렉터).prop
disabled 속성을 가진 요소를 사용할 수 없으며, 클릭도 할 수 없다.form 태그로 전송될 때도 disabled 요소는 전송되지 않는다. 입력하기 checkbox 가 체크되어 있다면, 텍스트 상자 요소의 입력하기 checkbox 가 체크되어 있지 않다면, 텍스
전체선택 체크박스를 클릭하면, 클래스가 hobby인 체크박스들의checked 속성을 true로 설정한다.전체선택 체크박스의 체크여부가 false라면, 클래스가 hobby인 체크박스들의 checked 속성을 false로 설정한다.
특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 '형식언어'이다.정규표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 '문자열의 검색과 치환'을 위해 지원하고 있다.자바스크립트는 정규표현식을 슬래시( / )로 감싸서 표현legex 변수는 객체 형태가 되고, 내장