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

名称返回类型描述 validate(options) 返回:Validator 验证所选的FORM valid() 返回:Boolean 检查是否验证通过 rules() 返回:Options 返回元素的验证规则 rules("add",rules) 返回:Options>>>详细阅读

本文标题：jQuery Study Notes学习笔记 (二)

地址：http://www.17bianji.com/kaifa2/JS/25913.html

1/2 1