jQuery Study Notes學(xué)習(xí)筆記 (二)

更新時間：2010年08月04日 02:20:50 作者：

jquery簡單選擇器的使用方法。jquery中最基本的東西了。

1. 使用class與id選擇HTML元素
　　選擇id為"myDivId"的元素.由于id是唯一的，所以總是選擇到1個或0個元素

復(fù)制代碼代碼如下:

$('#myDivId')

選擇class為"myCssClass". 可以選擇任何多個class為"myCssClass"的元素.

復(fù)制代碼代碼如下:

$('.myCssClass')

獲取或設(shè)置元素的值

復(fù)制代碼代碼如下:

 
var myValue = $('#myDivId').val(); // get the value of an element 
$('#myDivId').val("hello world"); // set the value of an element 

選擇id中有.和：時，前面添加兩個反斜杠

復(fù)制代碼代碼如下:

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

或者用如下處理

復(fù)制代碼代碼如下:

 
function jq(myid) { 
return '#' + myid.replace(/(:|\.)/g,'\\$1'); 
} 
$( jq('some.id') ) 

2. 測試元素
　　使用is()方法測試是否具有某個class

復(fù)制代碼代碼如下:

 
if ( $('#myDiv').is('.pretty') ) 
$('#myDiv').show(); 

測試是否隱藏

復(fù)制代碼代碼如下:

 
if ( $('#myDiv').is(':hidden') ) 
$('#myDiv').show(); 

1.2版本后，可以使用hasClass方法處理

復(fù)制代碼代碼如下:

 
$("div").click(function(){ 
if ( $(this).hasClass("protected") ) 
$(this) 
.animate({ left: -10 }) 
.animate({ left: 10 }) 
.animate({ left: -10 }) 
.animate({ left: 10 }) 
.animate({ left: 0 }); 
}); 

測試元素是否存在

復(fù)制代碼代碼如下:

 
if ( $('#myDiv').length ) 
$('#myDiv').show(); 

3.元素禁用與允許

復(fù)制代碼代碼如下:

 
// Disable #x 
$("#x").attr("disabled","disabled"); 
// Enable #x 
$("#x").removeAttr("disabled"); 

代碼:

復(fù)制代碼代碼如下:

 
<select id="x" style="width:200px;"> 
<option>one</option> 
<option>two</option> 
</select> 
<input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/> 
<DIV class=cnblogs_Highlighter><PRE class=brush:html> // This doesn't work 
$(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); 
</PRE> 
</DIV> 
<input type="button" value="Enable" onclick="$('#x').removeAttr('disabled')"/> 

4.Checkbox選擇/取消

復(fù)制代碼代碼如下:

 
// Check #x 
$("#c").attr("checked", "checked"); 
// Uncheck #x 
$("#c").removeAttr("checked"); 

代碼:

復(fù)制代碼代碼如下:

 
<label><input type="checkbox" id="c"/> I'll be checked/unchecked.</label><BR><input type="button" value="Check" onclick='$("#c").attr("checked","checked")'/><BR><input type="button" value="Uncheck" onclick='$("#c").removeAttr("checked")'/><BR> 

5.獲取Select Opion的value和text

復(fù)制代碼代碼如下:

 
$("select#myselect").val(); 
$("#myselect option:selected").text(); 

代碼:

復(fù)制代碼代碼如下:

 
<select id="myselect"><BR>&nbsp;&nbsp; <option value="1">Mr</option><BR>&nbsp;&nbsp; <option value="2">Mrs</option><BR>&nbsp;&nbsp; <option value="3">Ms</option><BR>&nbsp;&nbsp; <option value="4">Dr</option><BR>&nbsp;&nbsp; <option value="5">Prof</option><BR></select><BR><input type="button" value="Get Value" onclick="alert($('#myselect').val())"/><BR><input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())"/> 

替換10個項(xiàng)目中第3個項(xiàng)目的文本

復(fù)制代碼代碼如下:

 
// This doesn't work 
$(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); 

您可能感興趣的文章: