jQuery Study Notes (二)

1. 使用class与id选择HTML元素

　　选择id为"myDivId"的元素.由于id是唯一的，所以总是选择到1个或0个元素

 $('#myDivId')

　　选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素.

$('.myCssClass')

　　获取或设置元素的值

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

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

　　选择id中有.和：时，前面添加两个反斜杠

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

　　或者用如下处理

 

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


 $( jq('some.id') )

 

2. 测试元素

　　使用is()方法测试是否具有某个class

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

　　测试是否隐藏

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

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

$("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').length )
  $('#myDiv').show();

3.元素禁用与允许

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

　　示例：

one two

　　代码:

 <select id="x" style="width:200px;">
   <option>one</option>
   <option>two</option>
 </select>
 <input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/>
  // 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); 



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

4.Checkbox选择/取消

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

　　示例：

I'll be checked/unchecked.

　　代码:

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

5.获取Select Opion的value和text

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

　　示例：

Mr Mrs Ms Dr Prof

　　代码:

<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())"/>

 　　替换10个项目中第3个项目的文本

  // 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);