了解jQuery技巧来提高你的代码(个人觉得那个j

jquery-选择器-技巧


2.测试jQuery包装集是否包含某些元素
  如果你想测试一下某个jQuery包装集中是否包含某些元素,你首先可以尝试使用验证首个元素是否存在:

复制代码 代码如下:


if($(selector)[0]){...}
// 或者这样
if($(selector).length){...}


来看看这个例子:

复制代码 代码如下:


//例子.如果你的页面有以下html代码
<ul>
<li><input type="radio" value="Item-X" />Item X</li>
<li><input type="radio" value="Item-Y" />Item Y</li>
<li><input type="radio" value="Item-Z" />Item Z</li>
</ul>
<pre escaped="true" lang="javascript">...
//这个if条件将返回true,因为我们有两个
// input域匹配了选择器,所以<statement>代码将会执行
if($('#shopping_cart_items input.in_stock')[0]){<statement>}


3.从jquery.org读取jQuery最新版本
你可以使用这句代码读取jQuery的最新版本的代码文件。

<script src="https://code.jquery.com/jquery-latest.js"></script>
你可以使用这个方法来调用最近版本的jQuery框架,当然,你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
4.存储数据
  使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据:

复制代码 代码如下:


$('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');


  使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某个元素存储数据:

复制代码 代码如下:


$('selector').data('参数名', '要存储的数据');
//之后这样取得数据:
$('selector').data('参数');


  这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍,可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它:
HTML部分:

复制代码 代码如下:


<form>
<input type="text" value="Always cleared" />
<input type="text" value="Cleared only once" />
<input type="text" value="Normal text" />
</form>


JavaSript部分:

复制代码 代码如下:


$(function() {
//取出有clear类的input域
//(注: "clear once" 是两个class clear 和 once)
$('#testform input.clear').each(function(){
//使用data方法存储数据
$(this).data( "txt", $.trim($(this).val()) );
}).focus(function(){
// 获得焦点时判断域内的值是否和默认值相同,如果相同则清空
if ( $.trim($(this).val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function(){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
//Restore saved data
$(this).val( $(this).data("txt") );
}
});
});


5.jQuery手册常备身边
  大多数人都很难记住所有的编程细节,即使再好的程序员也会有对某个程序语言的疏忽大意,所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3 (壁纸版)

jQuery手册


6.在FireBug控制台记录jQuery
  FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于记录你的JavaScript代码也得到支持。

写入FireBug控制台的最简单方式如下:
console.log("hello world")

firebug-jquery-控制台


你也可以按照你希望的方式写一些参数:

console.log(2,4,6,8,"foo",bar)
你也可以编写一个小扩展来记录jQuery对象到控制台:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjgsp.html