매일 JQuery 배우기(1) - 선택기

JQuery 라이브러리에서 $는 JQuery의 약자 형식입니다. 예를 들어 $("#foo") 와 jQuery ("#foo") 는 등가입니다.

$(document).ready(function(){
//...
});

      :
$(function(){

});

이 코드는 전통 JS의 window와 같다.onload 방법.
DOM 대상은 JQquery 대상과 다르기 때문에 매 DOM 대상은 하나의 나무로 표시할 수 있고 JQuery 대상은 DOM 대상을 포장한 후에 생기는 대상이다.JQuery 객체에서 DOM 객체의 어떤 방법도 사용할 수 없습니다.
[index] 또는 get(index)을 사용하여 JQuery 객체를 DOM 객체로 변환할 수 있습니다. 예를 들어,

var a = $("#a") //JQuery  
var b = a[0] //DOM  
var c = a.get(0)//DOM  

$()를 사용하여 DOM 객체 패키지를 JQuery 객체로 변환할 수도 있습니다.

var a = document.getElementById("a")//DOM  
var b = $(a)//JQuery  

JQuery의 선택기는 CSS 스타일을 그대로 따릅니다.JQuery 선택기를 사용하면 브라우저가 이 선택기를 지원하는지 걱정하지 않고 특정 DOM 요소를 간편하고 신속하게 찾아낸 다음에 행동을 추가할 수 있습니다.
기본 선택기: 요소 id,class, 탭 이름 등을 통해 DOM 요소를 찾습니다.

$("#test") //  id test   
$(".test") //    class test   
$("p") //    <p>  
$("div,span,p.test")//    <div>,<span> class test <p>     

차원 선택기: DOM 요소 간의 차원 관계를 통해 특정한 원소를 얻는다. 예를 들어 후대 원소, 하위 원소, 인접 원소와 동년배 원소이다.

1.$("div span") //  <div>      <span>     
2.$("div > span") //  <div>       <span>    

  :
<div>
    <span class="1">
        <span class="2">123<span>
    </span>
</div>
$("div > span")    class 1 <span>  ， $("div span")      <span>  

3.$(".div + span")  class div        <span> //        
4.$(".div ~ span")  class div          <span>

계층 선택기 중 첫 번째와 두 번째 선택기는 비교적 자주 사용하지만, 다음 두 가지는 JQuery에서도 더욱 간단한 방법으로 대체할 수 있기 때문에 비교적 적게 사용한다.
$(".div + span") 대신 next () 방법을 사용할 수 있습니다.

$(".div").next("span")

$대신 nextAll 방법을 사용할 수 있습니다(".div ~ span")

$(".div").nextAll("span")

siblings 방법은 위치를 막론하고 모든 동년배 요소와 일치합니다

$(".div").siblings("span")

필터 선택기: 필터 선택기는 주로 특정한 필터 규칙을 통해 필요한 DOM 요소를 선별하는데 선택기는 모두':'으로 시작한다. 서로 다른 필터 규칙에 따라 필터 선택기는 기본 필터, 내용 필터, 가시성 필터, 속성 필터, 하위 요소 필터와 폼 대상 속성 필터로 나눌 수 있다.1. 기본 필터:

$("div:first") //     <div>  
$("div:last") //      <div>  
$("div:not(:first)") //      <div>     <div>  
$("div:even") //        <div>  ，   0  
$("div:odd") //        <div>  ，   0  
$("div:eq(1)") //     1 <div>  
$("div:gt(1)") //      1 <div>  
$("div:lt(1)") //      1 <div>  
$(":header") //        <h1-6>
$("div:animated") //          <div>  
$(":focus") //           

2. 컨텐츠 필터:

$("div:contains('jquery')")//      jquery <div>  
$("div:has(selector)")//          <div>  
$("div:empty")//        (      ) <div>  
$("div:parent")//             <div>  

3. 가시성 필터:

$("div:hidden")//      <div>  
$("div:visible")//     <div>  

4. 속성 필터 선택기:

$("div[id]") //      id <div>  
$("div[title=test]") //      title   test <div>  
$("div[title!=test]") //      title    test <div>  
$("div[title^=test]") //      title  test   <div>  
$("div[title$=test]") //      title  test   <div>  
$("div[title*=test]") //      title   test <div>  
$("div[title|="test"]") //      title   test  test        -( test-en) <div>  
$("div[title~=test]") //      title       test( en test) <div>  
$("div[id][title=test]") //      id  title   test <div>  

5. 하위 요소 필터 선택기:

//eq()       ， nth-child()           ，  nth-child()     1   
$("div.one :nth-child(2)") //  class one <div>   ，    2   
$("div.one :nth-child(even)") //  class one <div>   ，         
$("div.one :nth-child(odd)") //  class one <div>   ，         
$("div.one :nth-child(3n+1)") //  class one <div>   ，    (3n+1)   ，n 1  
$("div.one :first-child") //  class one <div>         
$("div.one :last-child") //  class one <div>         
$("div.one :only-child") //  class one <div>   ，          (       )

6. 양식 객체 속성 필터 선택기:

$("#form1:enabled") //  id "form1"           
$("#form1:disabled") //  id "form1"            
$("#input:checked") //        <input>  
$("#select option:selected") //            

폼 필터: 이 선택기를 사용하면 폼의 특정한 요소나 유형의 요소를 쉽게 얻을 수 있습니다

$(":input") //    <input>、<textarea>、<select>、<button>  
$(":text") //         
$(":password") //       
$(":radio") //       
$(":checkbox") //       
$(":submit") //        
$(":image") //        
$(":reset") //        
$(":button") //      
$(":file") //       
$(":hidden") //         

선택기의 주의사항: 1."선택기에""."",""#"", 이(가) 있습니다."("또는"] "와 같은 특수 문자를 사용할 경우 이스케이프""\"

<div id="id#b">bb</div>
<div id="id[1]">cc</div>

  :
$("#id\\#b")
$("#id\\[1\\]")

2. 선택기의 빈칸 문제

$(".test:hidden")//     class hidden   
$(".test :hidden")//  class test