jQuery参考实例1

本帖最后由 enzymer 于 2013-03-18 11:04:50 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jQuery参考实例 1.2 在DOM加载完毕，页面元素完全加载之前运行jQuery/JavaScript代码
原文：
http://www.lifelaf.com/blog/?p=187本文翻译自jQuery Cookbook (O’Reilly 2009) 1.2 Executing jQuery/JavaScript Code After the DOM Has Loaded but Before Complete Page Load需求主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码。事实情况是：任何对于DOM对象的遍历或其它操作都必须在DOM加载完成后才能进行。因此，应用程序需要知道什么时候浏览器完全加载了DOM。如果我们使用window.onload事件，那么就必须等待全部页面元素的加载 — 包括所有的图片、swf文件等，而这样的等待时间显然太长了。应用程序需要一个事件，当且仅当DOM本身被加载完成时，该事件被触发。解决方案jQuery提供一个叫做ready()的方法 — 一个一般绑定在document对象上的事件处理器。ready()方法接受一个函数作为参数，一旦DOM加载完成并可进行遍历或其它操作，该函数中的JavaScript代码就会运行。以下是一个简单的例子，当DOM加载完成而页面元素尚未完全加载时，弹出alert窗口。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/JavaScript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
      jQuery(document).ready(function(){
          alert(jQuery('p').text());
      });
  </script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>讨论ready()事件处理器是JavaScript的window.onload在jQuery中的替代品，可以被多次使用。在使用该事件时，一般而言，在CSS声明语句之后再包含ready()语句的调用会比较好。这么做的原因在于：在CSS声明之后，所有元素的属性都已被正确定义了，而这可以保证event()方法中jQuery/JavaScript代码的正确执行。另外，jQuery函数本身提供了使用ready()方法的快捷方式。以上述代码为例，可以使用快捷方式写成下面的样子：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/JavaScript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
      jQuery(function(){
          alert(jQuery('p').text());
      });
  </script>
</head>
<body>
<p>The DOM is ready!</p>
</body>
</html>应该指出，为了在DOM加载完毕之后立即运行jQuery/JavaScript代码，ready()方法并不是唯一的解决方案 — 只有当需要运行的jQuery/JavaScript代码必须嵌入在页面头部（包含在<head>标签中）时，ready()方法的使用才是必要的。通过将jQuery/JavaScript代码放在紧邻</body>标签之前，可以简单的避免ready()方法的使用。这么做有两个原因：首先，目前的优化技术表明，如果浏览器在页面解析过程的最后才加载JavaScript，页面的加载速度会更快。换而言之，如果将JavaScript代码放在web页面的底部，那么浏览器将先加载别的内容，而最后才加载JavaScript。由于大多数浏览器在遇到JavaScript时都会暂停加载，直到JavaScript引擎完成对JS代码的编译，因此，把JavaScript代码放在页面的顶部无异于对页面的加载形成了一个瓶颈，而将JS代码移到页面底部则会显著改善状况。有时候，把JavaScript代码放在head标签中会比较简单，但是我从来没有碰到过JavaScript必须放在head标签中的情况。有时，将JavaScript放在页面底部的操作会碰到一些问题，但是这些问题都能够很容易的得到解决。其次，如果我们的目标是提升网页访问的速度，那么当简单的移动代码位置就能解决问题的时候，为什么要去编写更多的代码，增加代码的复杂性呢？当我们遇到两个解决方案：1.代码量更多的方案，2.代码量更少的方案，我想我会选择代码量更少的方案，尤其当这个方案的运行速度更快的时候。下面是一个不使用ready()事件的例子：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>The DOM is ready!</p>
<script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
    alert(jQuery('p').text());//go for it the DOM is loaded
</script>
</body>
</html>在上述例子中，所有的JavaScript都被移到了紧邻</body>标签之前。
jQuery参考实例 1.3 使用选择器和jQuery函数对DOM元素进行选择
原文：
http://www.lifelaf.com/blog/?p=191本文翻译自jQuery Cookbook (O’Reilly 2009) 1.3 Selecting DOM Elements Using Selectors and the jQuery Function需求为了在页面元素上运行jQuery方法，需要选择单个或者多个DOM对象。解决方案从DOM树中选择元素，jQuery提供了两种方法。这两种方法都需要用到jQuery函数（jQuery()或者其别名$()）。第一种方法，也是目前使用最多的一种方法，是直接使用CSS选择器。通过向jQuery函数传一个包含选择器表达式的字符串，可以让jQuery函数遍历DOM树，并根据该表达式来定位DOM节点。下面是一个简单的例子，在该示例中，HTML文档内所有的<a>元素会被选中：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
    //alerts there are 6 elements
    alert('Page contains ' + jQuery('a').length + ' <a> elements!');
  </script>
</body>
</html>
如果用浏览器打开该HTML页面，浏览器会弹出一个alert()警告框，告诉我们该页面中包含6个<a>元素。在上面的例子中，首先我用jQuery函数来选中所有的<a>元素，然后使用了length属性得到所有选中对象的数目。需要注意的是，jQuery函数的第一个参数可以接受多个表达式，只需要在多个表达式之间用逗号分隔开就可以了。以下是一个简单的示例：jQuery('selector1, selector2, selector3').length;
第二种选择DOM元素的方法是给jQuery函数传DOM对象的JS引用。与第一种方法相比，这种方法就不那么流行了。以下面的代码为例，还是选择HTML文档中所有的<a>元素，这一次，传给jQuery函数的是使用getElementsByTagName方法而得到的<a>元素数组。与上面的例子相比，下述代码得到的结果完全一样：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body bgcolor="yellow"> 
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <a href='#'>link</a>
  <script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
    //alerts there are 6 elements
    alert('Page contains ' + jQuery(document.getElementsByTagName('a')).length +
      ' <a> Elements, And has a '
      + jQuery(document.body).attr('bgcolor') + ' background');
  </script>
</body>
</html>
讨论jQuery以简化开发而闻名，这一部分归功于其从HTML文档中选择DOM元素的CSS引擎，Sizzle。给jQuery传一个DOM对象引用是个不错的选择，但是这种方法的使用并不广泛。使得jQuery如此独具魅力的实际上是第一种方法：在jQuery函数中直接使用选择器。
lifelaf.com那儿的文章其实也是我写的
jQuery参考实例 1.4 在特定范围中选择DOM元素原文：
http://www.lifelaf.com/blog/?p=196本文翻译自jQuery Cookbook (O’Reilly 2009) 1.4 Selecting DOM Elements Within a Specified Context
需求在某个DOM元素内或者某个文档中，选择单个或者多个DOM对象。
解决方案当给jQuery函数传CSS表达式的时候，我们可以多传一个参数给它，这个第二个参数指代的是jQuery根据CSS表达式搜索DOM对象的范围（上下文背景），这个参数可以是一个DOM对象，可以是封装后的jQuery对象，也可以是一个文档对象。在下述示例中有12个<input>元素，通过用<form>元素来定义搜索范围，我们可以选择特定的<input>元素：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <form>
    <input name="" type="checkbox" />
    <input name="" type="radio" />
    <input name="" type="text" />
    <input name="" type="button" />
  </form>
  <form>
    <input name="" type="checkbox" />
    <input name="" type="radio" />
    <input name="" type="text" />
    <input name="" type="button" />
  </form>
  <input name="" type="checkbox" />
  <input name="" type="radio" />
  <input name="" type="text" />
  <input name="" type="button" />
  <script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
    //在所有form元素中搜索，使用封装后的form对象作为上下文，弹出"8 inputs"
    alert('selected ' + jQuery('input',$('form')).length + ' inputs');
    //在第一个form元素中搜索，使用DOM对象作为上下文，弹出"4 inputs"
    alert('selected' + jQuery('input',document.forms[0]).length + ' inputs');
    //在body元素中搜索所有的input元素，弹出"12 inputs"
    alert('selected' + jQuery('input','body').length + ' inputs');
  </script>
</body>
</html>讨论正如上面所提到的，可以选择文档作为搜索的范围。比如，可以在XHR请求（Ajax）所获取的XML文档中进行搜索。
jQuery参考实例 1.5 对jQuery封装后的元素集进行过滤原文：
http://www.lifelaf.com/blog/?p=200本文翻译自jQuery Cookbook (O’Reilly 2009) 1.5 Filtering a Wrapper Set of DOM Elements
需求对于一个jQuery封装后的元素集，需要从中移除不符合给定表达式的元素，从而创建一个新的元素集。
解决方案jQuery提供一个叫做filter的方法，在jQuery封装后的元素集上使用该方法，可以移除那些不符合给定表达式的元素。简而言之，filter()方法允许对现有元素集进行过滤。这一点和jQuery的find方法有很大不同，与filter相比，find方法通过选择器表达式在现有元素集中搜寻包括子元素在内的新元素。看一下下面的代码，有助于理解filter方法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <a href="#" class="external">link</a>
  <a href="#" class="external">link</a>
  <a href="#"></a>
  <a href="#" class="external">link</a>
  <a href="#" class="external">link</a>
  <a href="#"></a></li>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <script type="text/JavaScript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
    //alerts警告框显示，元素集经过过滤后仅剩4个元素
    alert(jQuery('a').filter('.external').length + ' external links');
</script>
</body>
</html>在上面的例子中，HTML网页包含了10个<a>元素，其中某些<a>元素的class被定义为external。首先我们使用jQuery函数选中了页面上所有的<a>元素，然后在该a元素集上使用filter方法，所有class属性值不为external的元素都将会从元素集中移除掉。在通过filter方法改变a元素集后，上述代码访问了新元素集的length属性，从而获取了新元素集的大小。
讨论除了像上面的例子中给filter方法传一个表达式字符串，还可以通过向filter方法传一个函数来完成过滤工作。上述代码可以被改写为：alert(
  jQuery('a')
    .filter(function(index){ return $(this).hasClass('external');})
      .length + ' external links'
  );在这个例子中，filter方法接受一个匿名函数。代码运行时，filter方法会对元素集进行循环，而匿名函数会以每一个循环到的元素作为上下文背景执行。也就是说，在匿名函数中使用$(this)的时候，$(this)指向的是元素集中循环到的那个DOM封装对象。在这个例子中，匿名函数会检查每一个<a>元素，看其class值是否包含”external”（hasClass()）。如果包含，匿名函数返回true，该<a>元素被保留在元素集中；如果不包含，匿名函数返回false，该<a>元素则被移除。更准确的说，filter方法会检查匿名函数返回的值是否为false，只要匿名函数返回的是除了false以外的任何数据，当前循环到的元素就会被保留在元素集中。值得注意的是，在以上匿名函数的例子中，匿名函数接受了一个未被使用的名为index的参数。该参数指代当前循环到的元素在元素集中的顺序值，需要时可用于对元素的过滤进行判定。