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

代码:

复制代码 代码如下:

one
two

 // This doesn't work <br>$(this).find('li a').eq(2).text().replace('foo','bar'); <br>// This works <br>var $thirdLink = $(this).find('li a').eq(2); <br>var linkText = $thirdLink.text().replace('foo','bar'); <br>$thirdLink.text(linkText); <br>

4.Checkbox选择/取消

复制代码 代码如下:

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

代码:

复制代码 代码如下:

I'll be checked/unchecked.

5.获取Select Opion的value和text

复制代码 代码如下:

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

代码:

复制代码 代码如下:

   Mr
   Mrs
   Ms
   Dr
   Prof

替换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);