입문

자신의 비망록으로 총결하였다.
모든 샘플은 이 페이지에서 시도할 수 있습니다(2014/03 기준).
※ 선택기는 언급되지 않았습니다.

초보자를 위한 정보

javaScript의 한 가지 동작으로 브라우저를 사용하는 개발자 도구 확인

결과를 표시하려면alert();콘솔 아니야.log();편리하다

화면의 값 가져오기

화면의 값을 가져옵니다.
다음 예제에서는 이 페이지의 제목을 가져옵니다.

$('.item-title span').text();

결과
"잊혀진 사람을 위한 jQuery에서 자주 사용하는 함수 역끌기".

화면의 값 가져오기 (항목 입력)

입력 항목에 대해 val () 을 사용합니다.
다음 예제에서는 Qiita의 검색 창에 입력한 값을 가져옵니다.

$('#q').val();

결과(검색 창에 "jQuery"를 입력한 후 구현)
"jQuery"

화면에 값 설정하기

text () 에 매개변수를 전달하여 값을 설정할 수 있습니다.

$('.item-title span').text('タイトルを書き換えました！');

결과

화면에 값 설정 (항목 입력)

val();문서 레지스트리에 항목을 추가합니다.

$('#q').val('jQuery大好き');

결과

속성의attr(속성 이름) 가져오기;

id,name,class와 같은 HTML 요소의 속성을 가져옵니다.
다음 예시에서 이 페이지 제목의class를 가져옵니다.

$('.item-title').attr('class');

결과
"item-title"

배열의 each 문장 사용하기

선택기가 그룹을 되돌릴 때, 하나를 처리할 때마다 자주 사용됩니다.
다음 예시에서 이 페이지의 a 표시를 가져오고 컨트롤러 로그에 href의 내용을 표시합니다.

var array = $('a');
$.each(array, function (i, element) {
  console.log($(element).attr('href'));
});

결과

class 삭제, 추가

입력 오류 항목에 색을 추가하거나 클릭할 때마다 상태가 바뀌는 전환 단추를 만들 수 있습니다.
다음 예제에서는 재고 수량의class를 삭제했습니다.

$('#stock-user-count').removeClass('count stock');

결과(재고 수량의 글꼴이 작아짐)

class를 추가하는 중입니다.

$('#stock-user-count').addClass('count stock');

결과 (복원)

참조 링크

jQuery 일본어 참조