最近段时间在阅读Jquery基础教程, 本文主要总结Jquery学习开发环境的建立。
使用的开发工具:Dreamweaver 、Nodpad++;
使用Jquery版本:jquery-1.10.2 http://jquery.com/download/
开发web站点目录:
下面介绍如何引入Jquery源程序及Javascript代码:
在html文件的开头,title标签下面
<title>jquery入门</title>
<!--引入CSS样式-->
<link rel= "stylesheet" href="01.css" type="text/css">
<!--javascript -->
<script src="../jquery-1.10.2.js"/> </script>
<!--用jquery添加给DIV添加css样式 1.1.js-->
<!--用javascript添加给DIV添加css样式 1.2.js-->
<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基础教程(第四版)