Jquery 常见问题

Jquery  FAQ(常见问题)

1 How do I ... ?

  1.1 How do I selectan item using class or ID?

  $(‘#divId’)

  This code select an element with an ID named “divId”, sinceIDs are unique, the expression can get zero or one element

   

  $(‘.myCssClass’)

  This code select an element which is applied myCssClassstyle, since many elements can apply the css style, the expression can getmultiple elements.

 

var myDivElement = $(‘#divId’);

This code assigns the Jquery object tothe Javascript variable

 

var myValue = $(‘#divId’).val(); // get the value of a forminput

$(‘#divId’).val(“hello world!”); // set the value of a forminput

   

  1.2 How do I selectelements when I already have a DOM element?

  var myDomElement = document.getElementById(‘foo’); // 一个普通的Dom元素

  $(myDomElement).find(‘a’); // find all anchors inside theDom element

   

  1.3 How do I testwhether an element has a particular class?

hasClass

$(“div”).click(function(){

    If($(this).hasClass(“protected”)){

    $(this)

        .animate({left:-10})

        .animate({left:10})

       .animate({left:-10})

    .animate({left:10})

    .animate({left:0});

}

});

 

is() method

if($(‘#myDiv’).is(‘.pretty.awesome’)){

    $(‘#myDiv’).show();

}

if($(‘#myDiv’).is(‘:hidden’)){

    $(‘#myDiv’).show();

}

 

  1.4 How do I testwhether an element exists?

  $(‘#myDiv’).show();

   

  1.5 How do Idetermine the state of a toggled element?

  var isVisible = $(‘#myDiv’).is(‘:visible’);

  var isHidden = $(‘#myDiv’).is(‘:hidden’);

  $(‘#myDiv:visible’).animate({left:’+=200px’},’slows’);

   

  1.6 How do I selectan element by an ID that has characters used in CSS notation?

冒号和点号在Jquery选择器中是有问题的，因为它们分别指示着pseudo-class和class. 为了能让Jquery正确的处理这些字符而不是当成CSS的标记，必须放置两个斜杠

$(“#some:id”)       // does not work

$(“#some\\:id”)     // works

$(“#some.id”)       // does not work

$(“#some\\.id”)     // works

使用正则处理：

function jq(myid) {

  return '#' + myid.replace(/(:|\.)/g,'\\$1');

 }

$( jq('some.id') )

   

  1.7 How do Idisable/enable a form element?

  设置 disabled 属性

// Disable #x

 $('#x').attr('disabled', true);

 // Enable #x

 $('#x').attr('disabled', false);

 

添加或者删除disabled属性:

 // Disable #x

 $("#x").attr('disabled','disabled');

 // Enable #x

 $("#x").removeAttr('disabled');

        Demo

<select id="x" style="width:200px;">

  <option>one</option>

  <option>two</option>

 </select>

 <input type="button"value="Disable"οnclick="$('#x').attr('disabled','disabled')"/>

 <input type="button"value="Enable"οnclick="$('#x').removeAttr('disabled')"/>

 

  1.8 How do Icheck/uncheck a checkbox input or radio button?

设置’checked’ 属性

 // Check #x

 $('#x').attr('checked', true);

 // Uncheck #x

 $('#x').attr('checked', false);

添加或者删除'checked' 属性:

 // Check #x

 $("#x").attr('checked', 'checked');

 // Uncheck #x

 $("#x").removeAttr('checked');

Demo

 <label><input type="checkbox"id="c"/> I'll be checked/unchecked.</label>

 <input type="button"value="Check"οnclick='$("#c").attr("checked","checked")'/>

 <input type="button"value="Uncheck" οnclick='$("#c").removeAttr("checked")'/>

   

  1.9 How do I getthe text value of a selected option?

获取值

$("#myselect").val(); //=> 1

<select id="myselect">

  <option value="1">Mr</option>

  <option value="2">Mrs</option>

  <option value="3">Ms</option>

  <option value="4">Dr</option>

  <option value="5">Prof</option>

 </select>

获取文本

$("#myselect option:selected").text();// => "Mr"

Demo

<select id="myselect">

  <option value="1">Mr</option>

  <option value="2">Mrs</option>

  <option value="3">Ms</option>

  <option value="4">Dr</option>

  <option value="5">Prof</option>

 </select>

 <input type="button"value="Get Value"οnclick="alert($('#myselect').val())"/>

 <input type="button"value="Get Text Value" οnclick="alert($('#myselectoption:selected').text())"/>

   

  1.10 How do Ireplace text from the 3rd element of a list of 10 items?

  eq() 函数

 var $thirdLink = $(this).find('li a').eq(2);

 var linkText = $thirdLink.text().replace('foo','bar');

 $thirdLink.text(linkText);

  Demo(设置第三个div背景色为蓝色)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title>Eq function</title>

      <style type="text/css">

          div

          {

              width: 60px;

              height: 60px;

              margin: 10px;

              float: left;

              border: 2px solid blue;

          }

          .blue

          {

              background: blue;

          }

      </style>

      <script src="js/jquery-1.6.4.js" type="text/javascript"></script>

      <script language="javascript" type="text/javascript">

          $(document).ready(function () {

              $("body").find("div").eq(2).addClass("blue");

          });

      </script>

  </head>

  <body>

      <div>

      </div>

      <div>

      </div>

      <div>

      </div>

      <div>

      </div>

      <div>

      </div>

      <div>

      </div>

  </body>

  </html>

 

  1.11 How do Icompress my code?

 Use Google ClosureCompiler

  

  1.12How do I getand use the server response from an AJAX request?

  使用 $.ajax(url,[settings])

   

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

      <title>Ajax function</title>

      <style type="text/css">

          div

          {

              width: 60px;

              height: 60px;

              margin: 10px;

              float: left;

              border: 2px solid blue;

          }

          .blue

          {

              background: blue;

          }

      </style>

      <script src="js/jquery-1.6.4.js" type="text/javascript"></script>

      <script language="javascript" type="text/javascript">

          $(document).ready(function () {

              $.ajax({

                  type: "get",        

   

                  url: "SpecialEffects.htm",

  

                  beforeSend: function (XMLHttpRequest) {

                      // showLoading();

                      $("body").find("div").eq(2).addClass("blue");

                  },

   

                  success: function (data, textStatus) {

                      //alert(data.toString());

                  },

   

                  complete: function (XMLHttpRequest, textStatus) {

                      // hide loading

                      // alert(XMLHttpRequest.responseText.toString());

                      $("body").find("div").eq(2).removeClass("blue");

                      $("body").find("div").eq(3).addClass("blue");

                  },

   

                  error: function () {

                      alert("error");

                  }

   

              });

   

  //            $.ajax({

  //                url: ,

  //                success: function (data) {

  //                    alert(data);

  //                }

  //            });

          });

   

      </script>

  </head>

  <body>

      <div>

      </div>

      <div>

      </div>

      <div>

      </div>

      <div>

      </div>

      <div>

  </div>

     <div>

      </div>

  </body>

  </html>

  1.13 How do I pull a native DOM element from a jQuery object?

 $(‘#foo’)[0]; // 等价于document.getElementById(‘foo’)

 $(‘#foo’).get(0);