jquery学习第四番 常问的问题

1，如何使用选择器

 

 $('#myDivId')            id选择器

 $('.myCssClass')        class选择器
$('div')                        标签选择器
var myDivElement = $('#myDivId');       //一个jquery的object
 var myValue = $('#myDivId').val();    // get the value of a form input
 
 $('#myDivId').val("hello world");     // set the value of a form input
How do I test whether an element has a particular class?
 第一种方式
$("div").click(function(){
   if ( $(this).hasClass("protected") )
     $(this)
       .animate({ left: -10 })
       .animate({ left: 10 })
       .animate({ left: -10 })
       .animate({ left: 10 })
       .animate({ left: 0 });
 });
第二种方式
 if ( $('#myDiv').is('.pretty.awesome') )
   $('#myDiv').show();
测试一个元素是否被hidden，使用  :hidden  当然还有 :visible
 if ( $('#myDiv').is(':hidden') )
   $('#myDiv').show();

How do I test whether an element exists

 if ( $('#myDiv').length )
   $('#myDiv').show();
当然你也可以直接 $('#myDiv').show();而不会有任何问题。



How do I determine the state of a toggled element?

 var isVisible = $('#myDiv').is(':visible');
 var isHidden = $('#myDiv').is(':hidden');
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');





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

 // Does not work
 $("#some:id")
 
 // Works!
 $("#some//:id")

 // Does not work
 $("#some.id")
 
 // Works!
 $("#some//.id")
The following function takes care of escaping these characters and places a "#" at the beginning of the ID string:
 function jq(myid) { 
   return '#' + myid.replace(/(:|/.)/g,'//$1');
 }


The function can be used like so:
 $( jq('some.id') )




How do I disable/enable a form element?

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

Add or remove the 'disabled' attribute:
 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');
How do I get the text value of a selected option?
<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" onclick="alert($('#myselect').val())"/>
 <input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())"/>

 

How do I replace text from the 3rd element of a list of 10 items?

 

Either the :eq() selector or the .eq() method will allow you to select the proper item. However, to replace the text, you must get the value before you set it:

  // This doesn't work; text() returns a string, not the jQuery object
  $(this).find('li a').eq(2).text().replace('foo','bar');

  // This works
  var $thirdLink = $(this).find('li a').eq(2);
  var linkText = $thirdLink.text().replace('foo','bar');
  $thirdLink.text(linkText);

The first example just discards the modified text. The second example saves the modified text and then replaces the old text with the new modified text. Remember, .text() gets; .text("foo")sets.

效果

 // Instead of this:
 $("span").show("slow");
 
 // do this:
 $("span").fadeIn("slow");      淡入

fadeOut('slow');                      淡出