首页 / 脚本样式 / JavaScript / 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"）;

代码:
复制代码 代码如下:
<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选择/取消
复制代码 代码如下:
// Check #x
$（"#c"）.attr（"checked", "checked"）;
// Uncheck #x
$（"#c"）.removeAttr（"checked"）;

代码:
复制代码 代码如下:
<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
复制代码 代码如下:
$（"select#myselect"）.val（）;
$（"#myselect option:selected"）.text（）;

代码:
复制代码 代码如下:
<select id="myselect"><BR>   <option value="1">Mr</option><BR>   <option value="2">Mrs</option><BR>   <option value="3">Ms</option><BR>   <option value="4">Dr</option><BR>   <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个项目中第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）;