jQuery 일반 조작 실현 방식

   jQuery               。



jQuery         



$("   ") // html   document.getElementsByTagName("")



$("#ID") //     document.getElementById("")



$("div #ID") //         



$("#ID #ID") //     ID      



 



$("  .class   ") //  class    



$("#ID").val(); // value 



$("#ID").val(""); //  



$("#ID").hide(); //  



$("#ID").show(); //  



$("#ID").text(); //    innerText



$("#ID").text(""); //   innerText=""



$("#ID").html(); //    innerHTML



$("#ID").html(""); //   innerHTML=""



$("#ID").css("  "," ") //  CSS  



$("form#  id").find("#    id").end() //    



$("#ID").load("*.html") //      



  ：



$("form#frmMain").find("#ne").css("border", "1px solid #0f0").end() // end()    



.find("#chenes").css("border-top","3px dotted #00f").end()




$.ajax({ url: "Result.aspx", //       url



type:"get", //      (get post)



dataType:"html", //           (   "xml", "html", "script",  "json")



data: "chen=h", //          ，   get  



timeout:3000, //           



success:function(msg)//          

{

$("#stats").text(msg);

},

error:function(msg) //           

{

$("#stats").text(msg);

}

});



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

$("#description").mouseover(function(){});



//ajax  



$.get( "Result.aspx", //       url

{ chen: "  ",age:"25"}, //          

function(data){ alert("Data Loaded: " + data); } //      

);

});

});



//          



$(#testSelect option:selected').text(); //    

 $("#testSelect").find('option:selected').text();

 $("#testSelect").val();



------



jQuery          



     

ready(fn)



  ：

$(document).ready(function(){

  // Your code here...

})；



  ：        web         。        ，   DOM                       ， 99.99% JavaScript           。



bind(type,[data],fn)



  ：

$("p").bind("click", function(){

  alert( $(this).text() );

});



  ：             （ click）           。         。



toggle(fn,fn)

  ：



$("td").toggle(

  function () {

    $(this).addClass("selected");

  },

  function () {

    $(this).removeClass("selected");

  }

);



  ：             。            ，           ，          ，           。        ，                 。



( click(),focus(),keydown()           ，             。)



     

addClass(class) removeClass(class)



  ：

$(".stripe tr").mouseover(function(){ 

               $(this).addClass("over");}).mouseout(function(){

               $(this).removeClass("over");})

});

     ：

$(".stripe tr").mouseover(function() { $(this).addClass("over") });

$(".stripe tr").mouseout(function() { $(this).removeClass("over") });



  ：             ，           ，                   。



css(name,value)



  ：

$("p").css("color","red");



  ：   ，         ，          。          addClass(class)    。



slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()



  ：



$("#btnShow").bind("click",function(event){ $("#divMsg").show() });

$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });



  ：jQuery                  。       ：show(speed,[callback])               ，                  。



animate(params[,duration[,easing[,callback]]])



  ：           ，       ，         。



    



map(callback)

HTML   :

<p><b>Values: </b></p>

<form>

  <input type="text" name="name" value="John"/>

  <input type="text" name="password" value="password"/>

  <input type="text" name="url" value="http://www.fufuok.com/>

</form>

jQuery   :

$("p").append( $("input").map(function(){

  return $(this).val();

}).get().join(", ") );

  :

[ <p>John, password, http://www.fufuok.com/</p> ]



  ：            （         ）               ，    、    CSS  ，        。     '$.map()'      。



find(expr)



HTML   :



<p><span>Hello</span>, how are you?</p>

jQuery   :



$("p").find("span")

  :



[ <span>Hello</span> ]



  ：               。                       。



    



attr(key,value)

HTML   :

<img/><img/>

jQuery   :

$("img").attr("src","test.jpg");



  ：             。                            。          ，    undefined 。   HTML         。



html()/html(val)

HTML   :

<div><p>Hello</p></div>

jQuery   :

$("div").html();

  :

<p>Hello</p>



  ：          html  ，        text() val()。              。，             。                 。



wrap(html)

HTML   :

<p>Test Paragraph.</p>

jQuery   :

$("p").wrap("<div class='wrap'></div>");

  :

<div class="wrap"><p>Test Paragraph.</p></div>



  ：                       。

                       ，                。           DOM。



empty()

HTML   :

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery   :

$("p").empty();

  :

<p></p>



  ：                。



Ajax  



load(url,[data],[callback])

url (String) :     HTML     。

data (Map) : (  )         key/value   。

callback (Callback) : (  )          。



  ：



$("#feeds").load("feeds.aspx", {limit: 25}, function(){

   alert("The last 25 entries in the feed have been loaded");

});



  ：     HTML          DOM  。   Jquery  Ajax         。



serialize()

HTML   :

<p id="results"><b>Results: </b> </p>

<form>

  <select name="single">

    <option>Single</option>

    <option>Single2</option>

  </select>

  <select name="multiple" multiple="multiple">

    <option selected="selected">Multiple</option>

    <option>Multiple2</option>

    <option selected="selected">Multiple3</option>

  </select><br/>

  <input type="checkbox" name="check" value="check1"/> check1

  <input type="checkbox" name="check" value="check2"

checked="checked"/> check2

  <input type="radio" name="radio" value="radio1"

checked="checked"/> radio1

  <input type="radio" name="radio" value="radio2"/> radio2

</form>

jQuery   :

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );



  ：           。   Ajax   。



  



jQuery.each(obj,callback)



  ：

$.each( [0,1,2], function(i, n){

  alert( "Item #" + i + ": " + n );

});//    

$.each( { name: "John", lang: "JS" }, function(i, n){

  alert( "Name: " + i + ", Value: " + n );//    

});



  ：      ，          。



jQuery.makeArray(obj)

HTML   :

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

jQuery   :

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

  :

Fourth

Third

Second

First



  ：             。                  。



jQuery.trim(str)

  ：         ，               。