简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jQuery 연구 노트 연구 노트(2)_jquery

WBOY
풀어 주다： 2016-05-16 18:22:01
원래의
1052명이 탐색했습니다.

1. 클래스와 ID를 사용하여 HTML 요소 선택
ID가 "myDivId"인 요소를 선택합니다. ID가 고유하므로

요소가 항상 1개 또는 0개 선택됩니다코드 복사 코드는 다음과 같습니다.

$('#myDivId')

클래스를 "myCssClass"로 선택합니다. 확인
코드 복사 코드는 다음과 같습니다.

$('.myCssClass')

요소 값 가져오기 또는 설정
코드 복사 코드는 다음과 같습니다.

var myValue = $('#myDivId').val() // 요소 값 가져오기
$('#myDivId') .val("hello world" ); // 요소 값 설정

. 및:으로 ID를 선택할 때 백슬래시 두 개를 추가하세요.
코드 복사 코드는 다음과 같습니다.

// 작동하지 않습니다
$("#some:id")
/ / 작동합니다!
$("#some\:id")
// 작동하지 않습니다
$("#some.id")
// 작동합니다
$("# some\.id")

또는 다음 처리를 사용
코드를 복사하세요 코드는 다음과 같습니다:

function jq(myid) {
return '#' myid.replace(/(:|.)/g,'\$1')
}
$( jq('some.id') )

2. 테스트 요소
is() 메소드를 사용하여 특정 클래스가 있는지 테스트합니다
코드 복사 코드는 다음과 같습니다.

if ( $('#myDiv').is('.pretty') )
$('#myDiv').show();

숨기기 여부 테스트
코드 복사 코드는 다음과 같습니다.

if ( $('#myDiv').is(':hidden') )
$('#myDiv').show ()

버전 1.2 이후에는 hasClass 메소드를 사용하여 처리할 수 있습니다.
코드 복사 코드는 다음과 같습니다.

$("div").click(function() {
if ( $(this).hasClass("protected") )
$ (이)
.animate({ 왼쪽: -10 })
.animate({ 왼쪽: 10 })
.animate({ 왼쪽: -10 })
.animate({ 왼쪽: 10 })
.animate({ 왼쪽: 0 });
});

요소가 존재하는지 테스트
코드 복사 코드는 다음과 같습니다.
if ( $(' #myDiv').length )
$('#myDiv'). show();

3. 요소 비활성화 및 허용

코드 복사 코드는 다음과 같습니다. :
// #x 비활성화
$("#x").attr("disabled","disabled" )
// #x 활성화
$( "#x").removeAttr("disabled");

코드:

코드 복사 코드는 다음과 같습니다.


 // 작동하지 않습니다 <br>$(this ).find('li a').eq( 2).text().replace('foo','bar'); <br>// 작동합니다 <br>var $thirdLink = $(this).find ('li a').eq(2); <br>var linkText = $thirdLink.text().replace('foo','bar') <br>$thirdLink.text(linkText) <br>
;

4.체크박스 선택/취소
코드 복사 코드는 다음과 같습니다.

// #x 선택
$("#c").attr("checked", "checked")
// #x 선택 취소
$("#c").removeAttr("checked ");

코드:
코드 복사 코드는 다음과 같습니다.

< ;label> 선택/선택 취소됩니다.




5. Select Opion
의 값과 텍스트를 가져옵니다. 코드 복사 코드는 다음과 같습니다.

$("select#myselect").
$( "#myselect option:selected").text ();

코드:
코드 복사 코드는 다음과 같습니다.