jQuery 학습(둘)

주요 학습 jQuery 객체 획득:
1. jQuery 핵심 함수 --jQuery():
예를 들어 첫 번째 페이지는 다음과 같습니다.

<div id="yzw" onclick="test();">  ，JQuery!</div>

  
구체적 js 쓰기:
  

//       
$(function (){
            alert("      ");
            //     <div.../>      DOM  
            $("div").append("     ");
            //  HTML       DOM  ，     body   
            $("<input type='button' value='  '/> ").appendTo(document.body);
            //     DOM     jQuery  
            $(document.getElementById('yzw')).css("background-color","#fffff").css("border","1px solid balck");
 });

 
여기서 $(function()
    
}); 함수는 페이지를 초기화하는 데 사용되며, 매우 자주 사용된다.
 
2. CSS 액세서리로 DOM 요소에 액세스
구체적인 방법이 너무 많아서 자주 사용하는 실례만 썼다.
페이지 요소:

<ul>
       <li id="java">java</li>
       <li id="javaee" class="test">javaee</li>
       <li id="ajax">ajax</li>
       <li id="xml">xml</li>
       <li id="ejb">ejb</li>
       <li ><span id="workflow">workfolw</span></li>
    </ul>

 
응답 js:
 

           // CSS     DOM  
           $("#java").append("<b>   id java   ");
           //      id   <li.../>  ，         
           $("li[id]").css("background-color","#bbbbff");
           //  class   test   ，        
           $(".test").css("border","3px dotted black");
           //    id   xml,workflow   
           $("#xml,#workflow").append("<b>  id  xml,workflow    </b>");
           //    id  xml,workflow   
           $("ul #workflow").append("<br/><b>  ul   ，id workflow   ");
           //
           $("ul>#ajax").append("<b>ul  ，id ajax    </b>");
           //  id ajax     li  
           $("#ajax~li").css("background-color","#ff5555");

3. 선택기와 부가 한정어를 혼합하여 사용
html 페이지는 이전과 같습니다
js는 다음과 같습니다.
  

//  ul li      
            $("ul>li:first").append("<b> ul        li   </b>");
            //  ul      id   li   
            $("ul>li:not([id])").append("<b> ul    id     </b>");
            $("ul>li:even").append("ul         li   ").css("background-color","yellow");
            $("ul>li:gt(4)").append("<br/><b> ul    ，    4 li   </b>").css("border","1px dashed black");
            //  ul       span   li   
            $("ul>li:has('span')").append("<br/><b> ul    ，   span   li   </b>");
            //  li        span   
            $("li>span:visible").append("<br/><b> ul    ，    span   </b>").css("background-color","#bbbbbb");

 
그리고 일부 특수한 첨부 한정어도 있다.
  

//       1、4、7... li  
            $("li:nth-child(3n+1)").css("border","1px dashed black");
            //
            $("span:only-child").append("<b>            span  </b>");
            //   ：first ：first-child     
            alert($("ul>li:first").html()==$("ul>li:first-child").html());   //  true

 
이상으로 소개합니다.