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');                      淡出