Jquery基础学习之-入门

最近段时间在阅读Jquery基础教程，本文主要总结Jquery学习开发环境的建立。

使用的开发工具：Dreamweaver 、Nodpad++;

使用Jquery版本：jquery-1.10.2 http://jquery.com/download/

开发web站点目录:

Jquery基础学习之-入门

下面介绍如何引入Jquery源程序及Javascript代码：

在html文件的开头,title标签下面

<title>jquery入门</title>

<link rel= "stylesheet" href="01.css" type="text/css">

<script src="../jquery-1.10.2.js"/> </script>


<script src="1.2.js"></script>

基础示列代码：

通过使用 $(document).ready() 方法给div里面的内容添加样式

html-div代码如下：

     <div class="poem">
          <h3 class="poem-title">YKCOWREBBAJ</h3>
          <div id="fred" class="poem-stanza"> 
            <div>sevot yhtils eht dna ,gillirb sawT'</div>
            <div>;ebaw eht ni elbmig dna eryg diD</div>
            <div>,sevogorob eht erew ysmim llA</div>
            <div>.ebargtuo shtar emom eht dnA</div>
          </div>
      </div>

Jquery代码如下几种写法：

第一种：

<pre name="code" class="javascript"> function addHighlightClass() {
	$('div.poem-stanza').addClass('highlight');
   }

$(document).ready(addHighlightClass);

第二种：

 $(document).ready(function() {
	$('div.poem-stanza').addClass('highlight');
  });

我们注意到第二种写法更加简洁，在$(document).ready方法中接收一个匿名函数

如果我们使用源生的javascript实现类似功能则要复杂的许多，源生javascript代码如下：

<!--原生JS添加样式-->
window.onload = function() {
  var divs = document.getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {
    if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) {
      divs[i].className += ' highlight';
    }
  }

  function hasClass( elem, cls ) {
    var reClass = new RegExp(' ' + cls + ' ');
    return reClass.test(' ' + elem.className + ' ');
  }
};

总结：本文主要介绍了Jquery开发环境的建立及通过一个小示列演示比较了通过Jquery实现一个功能通常比Javascript要简洁很多。

下一篇文章主要介绍,选择元素

以上内容及案例摘自Jquery基础教程(第四版)

秒客网

Jquery基础学习之-入门

相关文章