jQuery 학습 요약: 요소의 상대적 위치 지정 및 선택기(지속적으로 업데이트됨)_jquery

① jQuery 요소의 상대적 위치 지정.
jQuery에서는 절대 위치 지정뿐만 아니라 상대 위치 지정에도 선택자를 사용할 수 있습니다. $()에 두 번째 매개 변수가 지정되어 있는 한 두 번째 매개 변수는 상대 요소입니다. 두 번째 매개변수에는 jQuery 객체가 전달되고, 이 객체를 기준으로 상대 선택이 수행됩니다.

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

head>

;
<script> <br>$(function(){ <br>//1~3번째 줄의 배경색을 빨간색(절대 위치)으로 설정합니다. <br>//여기서 gt(0 )를 참고하세요. 원래 시퀀스가 ​​아닌 lt(4)의 새 시퀀스의 시퀀스 번호에서 시작합니다(즉, 원래 시퀀스를 기반으로 추가 필터링) <br>$("#t tr:lt(4):gt(0) . )").css("배경","빨간색"); <br>$("#t tr").click(function(){ <br>//Dom의 이-->$( this) <br>//$("td",$(this))는 이 줄의 tr 아래 검색에 상대적입니다. td <br>$("td",$(this)).css("Background" ," 녹색") <br>}); <br>$("tr[title=ttt ]").css("배경","노란색") <br></ 스크립트> <br></head> <br><div id="div1"> <br><tr> <td>111</td> <td>A</td> <br><tr> <td>333</td>C ;D</tr> <br><tr title="ttt"> <td>555</td>E</tr> ; <br> <tr> <td>666</td>F</tr> <br><tr> <td>777</td> <td> ;G</td></tr> <br><tr><td>888</td><td>H</td>/td><td>I< /td></tr> <br><br/> <br></body> 🎜><br><br> <p>작업 렌더링: </p> <p><img src="http://files.jb51.net/upload/201104/20110426230822794.jpg" alt="jQuery 학습 요약: 요소의 상대적 위치 지정 및 선택기(지속적으로 업데이트됨)_jquery" ></p> <p>②$("div[id]")는 id 속성이 있는 div를 선택합니다. <br>3$("div[<span style="COLOR: #ff00ff">title=test</span>]") title 속성이 "test인 div를 선택합니다. ". <span style="COLOR: #ff00ff">참고: 등호입니다. </span><br>$("div[title<span style="COLOR: #ff00ff">!=</span>test]")제목 속성이 "test"가 아닌 div를 선택하세요<br>4$("input:checked")<span style="COLOR: #ff00ff"> 참고: input과 :checked 사이에는 공백이 없습니다. </span><br>⑤<span style="COLOR: #ff00ff">$("input")과 $(":input")의 차이점 </span><br>$("input") <input> 태그만 얻을 수 있고, <textarea>, <select> 등은 얻을 수 없습니다. <br>$(":input")은 <input> 태그뿐만 아니라 서버에 제출된 <textarea>, <select> <br>비슷한 $(":text")는 모든 한 줄 텍스트 상자를 가져오며 $("input[type=text]")를 사용하여 동일한 기능을 구현할 수도 있습니다. 비슷한 것에는 $(":passowrd"), $(":radio"), $(":checkbox"), $(":submit"), $(":image"), $(":reset" ) 등이 있습니다. , $(":button"), $(":file"), $(":hidden")<br>⑥ 요소의 속성을 읽거나 설정하려면 attr() 메서드를 사용하세요. jQuery, attr을 사용하여 작동합니다. <br>$("#a:first").attr("href","<a href="http://baidu.com/">http://baidu.com</a>");<br> ⑦removeattr 속성 제거, 소스 코드에서 속성 삭제 가능 이것과 속성을 지우는 것의 차이점을 알 수 없습니다. <br>8동적으로 Dom 노드 생성 <br>$(html string)을 사용하여 Dom 노드를 동적으로 생성하고 jQuery 객체를 반환한 다음 추가 및 기타 메소드를 호출하여 생성된 노드를 Dom에 추가합니다. <br>var link=$("<a href='http://www.baidu.com'>Baidu</a>");<br>$("div:first").append( link ); <br>append 메소드는 요소의 끝에 요소를 추가하는 데 사용됩니다(하위 요소를 추가하고 마지막 하위 요소가 됨). <br>prepend 메소드는 요소의 시작 부분에 요소를 추가합니다. <br>after 메소드는 요소 뒤에 요소를 추가합니다(형제 추가) <br>before 메소드는 요소 앞에 요소를 추가합니다(형제 추가) <br> nine을 삭제합니다. node<br>remove()는 선택된 노드를 삭제하는데, 이 메소드가 반환값입니다. 삭제된 노드 객체이며, 삭제된 노드를 계속 사용할 수 있습니다. <br> var list=$("#ulLeft li.test").remove();<br> $("#ulRight").append(list);</select></textarea></p> <p><span style="COLOR: #ff00ff">이벤트 버블링 방지</span>e.stopPropagation();<br><span style="COLOR: #ff00ff">기본 동작 방지</span>: e.preventDefault()는 window.event.returnValue=false와 동일한 효과를 가집니다</p> <script type="text/javascript"> if ($ != jQuery) { $ = jQuery.noConflict(); } var isLogined = false; var cb_blogId = 74236; var cb_entryId = 2028486; var cb_blogApp = "JuneZhang"; var cb_blogUserGuid = "e4ae0e67-3a36-df11-ba8f-001cf0cd104b"; var cb_entryCreatedDate = '2011/4/25 17:46:00'; </script>