집 > 기사 > 웹 프론트엔드 > jQuery 연구 노트 연구 노트(2)_jquery

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

WBOY원래의: 2016-05-16 18:22:011054검색

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 (); 

코드:

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