JQuery 간단한 시작

1. 선택기

1、Jquery        



$(this)         

$("p")       <p>  

$("input")       input  

$(".intro")        class=“intro”    

$("p.intro")        class="intro"  <p>  

$("#intro")     id="intro"       

$("ul > li") ul    li  

$("ul li:first")        <ul>      <li>   

$("[href$='.jpg']")          ".jpg"     href      

$("div#intro .head")    id="intro"   <div>        class="head"    

$(li[a:contains('Register')]")         Register <a>  

$("input[@name=bar]")     name bar <input>  

$("input[@type=radio][@checked]")    type radio <input>  

$(“li”).not(“ul”)     li     ul       

$("span[@id]")       id   <span>  

$("[@id=span1]")     id span1     

2. 자주 사용하는 이벤트

2、Jquery      



$(selector).click()	          

$(selector).dblclick()	          

$(selector).focus()	            

$(selector).mouseover()	            

$(selector).css();	      CSS  

$(selector). hide();	          

$(selector). show('slow');	          

5. 텍스트 선택
 
획득 내용 - text(), html() 및 val()
DOM 작업에 사용되는 세 가지 간단하고 실용적인 jQuery 방법:

text() - 선택한 요소의 텍스트 내용을 설정하거나 반환

html() - 선택한 요소의 내용을 설정하거나 되돌려줍니다(HTML 태그 포함)

val() - 폼 필드의 값을 설정하거나 되돌려줍니다

다음 예제에서는 jQuery text() 및 html() 방법을 사용하여 컨텐트를 얻는 방법을 보여 줍니다.
인스턴스

$("#btn1").click(function(){

  alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

  alert("HTML: " + $("#test").html());

});

$("#btn1").click(function(){

  $("#test1").text("Hello world!");

});

$("#btn2").click(function(){

  $("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

  $("#test3").val("Dolly Duck");

});

4、select 선택
 
예를 들어
$("#touid  option:selected").text("장금");//text 설정
$("#touid  option:selected").text();//text 값을 가져옵니다.
$("#touid  option:selected").val();//text 값을 가져옵니다.
$("#touid  option:selected").val(id);//text 값을 가져옵니다.
 
$("#tid").find("option[text='"+slr+"']").attr("selected",true);//select text 값을 slr로 설정하여 선택
$("#pcs").val(dpt_code);//select vale 값을 dpt 로 설정code가 선택됨
 
 
 
예를 들어
1,value를 pxx로 설정하는 항목 선택
     $(".selector").val("pxx");
2. text를 pxx로 설정하는 항목 선택
　 $("#touid  option:selected").text("장보금");
    $(".selector").find("option[text='pxx']").attr("selected",true);
여기에 중괄호의 용법이 하나 있는데, 중괄호 안의 등호의 앞쪽은 속성 이름이고, 인용부호를 붙일 필요가 없다.중괄호의 운용은 논리를 간단하게 할 수 있는 경우가 많다.
3. 현재 선택한 항목의value 가져오기
    $(".selector").val();
4、현재 선택한 항목의text 가져오기
    $(".selector").find("option:selected").text();
　 jQuery("#select1  option:selected").text();
여기에 사칭을 사용했는데, 그것의 사용법을 파악하고 일거수일투족으로 하면 코드를 간결하게 만들 수 있다. 
많은 경우에 select의 등급 연결을 사용합니다. 즉, 두 번째 select의 값은 첫 번째 select가 선택한 값에 따라 달라집니다.이것은 jquery에서 매우 간단하다.
예: $(".selector1").change(function(){
//두 번째 비우기
      $(".selector2").empty();
//실제 응용에서 이곳의 옵션은 일반적으로 순환으로 여러 개를 생성한다
      var option = $("").val(1).text("pxx");
      $(".selector2").append(option);
});
5. getJSON 동기식 비동기식 기본 비동기식

    $.ajaxSettings.async = false; //  

    $.getJSON('__MODULE__/Tool/code/'+id,function(data){

        var sel = $('#cid').get(0);

        sel.options.length=1;

        $.each(data,function(i,o){

            sel.options.add(new Option(o.fullname, o.id));

            

        });

    });
$("#cid").find("option[text='"+slr+"']").attr("selected",true);// text