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 > <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");
示例:
代码:
<label><input type="checkbox" )'/>
5.获取Select Opion的value和text
$("select#myselect").val(); $("#myselect option:selected").text();
示例:
代码:
<select />
替换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);