jQUery 속성 선택기에 대한 이해를 돕기 위한 jQuery 속성 선택기의 작은 예: 코드 복사 코드는 다음과 같습니다. <머리> <br>a{ <br>여백-오른쪽:20px; <br>} <br>ol{ <br>위치:상대적; <br>너비:600px; <br>왼쪽 여백:400px; <br>} <br>dt{ <br>여백:10px; <br>높이:100px; <br>배경색:#EAEAEA; <br>테두리:3px 점선 주황색; <br>} <br>.showMessage{ <br>너비:380px; <br>플로트:왼쪽; <br>배경색:#D8D8D8; <br>테두리:1px 빨간색 점선; <br>} <br> <br>$(document).ready(function(){ <br>var subject = ""; <br>var explain = ""; <br><br>//name|="value" <br>$ ("#attri1").bind("click",function(){ <br>var topValue=$("#attri1").offset().top; <br>subject = "속성에 접두사 선택기가 포함됨 [name| ="value"]"; <br>describe = "주어진 문자열과 같거나 해당 문자열과 하이픈(-)으로 시작하는 값을 가진 지정된 속성을 갖는 요소를 선택합니다."; <br>$(" a[hreflang|='en']").css("border","3px 점선 녹색"); <br>showMessage(subject,describe,topValue); <br>}); <br><br>/ /name*="value" <br>$("#attri2").bind("click",function(){ <br>var topValue=$("#attri2").offset().top; <br>subject = "속성은 선택기 [name*="value"]를 포함합니다."; <br>describe = "주어진 하위 문자열을 포함하는 값을 가진 지정된 속성을 가진 요소를 선택합니다."; *='man']" ).val( "남자가 들어있어요!" ); <br>showMessage(subject,describe,topValue); <br>}); <br><br>//name~=" value" <br>$("#attri3").bind("click",function(){ <br>var topValue=$("#attri3").offset().top; <br>subject = "속성에 단어 선택기 [name~="value"]가 포함되어 있음"; <br>describe = "공백으로 구분된 주어진 단어를 포함하는 값을 가진 지정된 속성을 가진 요소를 선택합니다."; <br>$( "input[name~='man']" ).val( "남자님이 들어있어요!" ); <br>showMessage(제목,설명,topValue); <br>}); <br><br>//name$="value" <br>$("#attri4").bind("click",function(){ <br>var topValue=$("#attri4").offset ().top; <br>subject = "선택기 [name$="value"]로 끝나는 속성"; <br>describe = "지정된 문자열로 정확히 끝나는 값을 가진 지정된 속성을 가진 요소를 선택합니다. 대소문자를 구분합니다."; <br>$( "input[name$='letter']" ).val( "a letter" ); <br>showMessage(subject,describe,topValue); <br>}); <br><br>//name="value" <br>$("#attri5").bind("click",function(){ <br>var topValue=$("#attri5").offset( ).top; <br>subject = "속성 선택기 [name="value"]" <br>describe = "특정 값과 정확히 동일한 값을 가진 지정된 속성을 가진 요소를 선택합니다."; $( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" ) <br>showMessage(subject,describe,topValue) <br>}); <br><br>//name$="value" <br>$("#attri6").bind("click",function(){ <br>var topValue=$("#attri6").offset ().top; <br>subject = "속성이 선택기와 같지 않음 [name!="value"]" <br>describe = "지정된 속성이 없거나 지정된 속성이 있지만 특정 값이 아닙니다."; <br>$( "input[name!='newsletter']" ).next().append( "<b>; 뉴스레터 아님</b>" ); <br> showMessage(제목,설명,topValue) <br>}); <br><br>//name$="value" <br>$("#attri7").bind("click",function(){ <br>var topValue=$("#attri7").offset ().top; <br>subject = "선택기 [name^="value"]로 시작하는 속성"; <br>describe = "지정된 문자열로 정확히 시작하는 값을 가진 지정된 속성을 가진 요소를 선택합니다."; <br>$( "input[name^='news']" ).val( "뉴스는 여기!" ) <br>showMessage(subject,describe,topValue) <br>}); <br><br>//name$="value" <br>$("#attri8").bind("click",function(){ <br>var topValue=$("#attri8").offset ().top; <br>subject = "속성 선택기 [이름] 있음"; <br>describe = "임의의 값을 가진 지정된 속성을 가진 요소를 선택합니다.<br><b><font color= "red">id 요소</font></b>가 있는 div를 클릭할 수 있습니다."; <br>$( "div[id]" ).one( "click", function() { <br>var idString = $( this ).text() " = " $( this ).attr( "id" ) <br>$( this ).text( idString ) <br>showMessage (제목,설명,topValue) <br>}); <br><br>//name$="value" <br>$("#attri9").bind("click",function(){ <br>var topValue=$("#attri9").offset ().top; <br>subject = "다중 속성 선택기 [name="value"][name2="value2"]"; <br>describe = "지정된 모든 속성 필터와 일치하는 요소입니다."; 🎜>$( "input[id][name$='man']" ).val( "이 하나만" ) <br>showMessage(subject,describe,topValue) <br>}); <br><br><br>}); <br><br>function showMessage(subject,describe,topValue){ <br>$("#showMessage").html("<font color="red"><b>" subject "</ b></font><br>" 설명) <br>.addClass("showMessage").css("margin-top",topValue).hide().show(1000); <br>} <br><br> <본문> en en- 영어 <이름 입력="뉴스레터"> <라벨> 이름? <라벨> 값? <라벨> 값? 이름은 뉴스레터입니다. 이름 없음 name은 허용됩니다 <이름 입력="뉴스레터"> ID 없음 id가 있는 ID가 있습니다 아니요
