管理资源吧首页>>>教程>>>编程>>>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);

教程首页 更多教程