软件开发培训班 >> 编程开发 >> JavaScript


jQuery Study Notes学习笔记 (二)

　　本文标签：jQuery,学习笔记

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 doesnt 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"/> Ill 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 doesnt 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);