锋利的jQuery系列一_H5之家 - 中国HTML5教程资源分享第一站

简介

jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建于06年1月的开源项目。现在的jQuery主要包括核心库、UI、插件和jQuery Mobile这几大模块。

一.配置jQuery环境

进入jQuery的官网，下载最新的jQuery库文件。

jQuery环境配置：
jQuery不需要安装，把下载的jquery.js放到网站的一个公共的位置，想要在某个页面中用jQuery时，只需要在相关的HTML文档中引入该类库文件的位置即可。

在页面中引入jQuery，在编写的页面代码中< head>标签内引入jQuery库后，就可以使用jQuery库了，下面是第一个jQuery程序：

<%-- Created by IntelliJ IDEA. User: Administrator Date: 2017/3/4 Time: 10:08 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>导航栏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="../css/default.css" type="text/css" /> <script src="../images/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".level1 > a").click(function(){ /** * 当鼠标点击到a元素(它是class含有level1的子元素)的时候，给其添加一个名为current的class， * 然后将紧邻其后面的元素显示出来，同时将它的父辈元素的同辈元素内部的子元素<a>都去掉一个名为 * current的class，并且将紧邻它们后面的元素都隐藏。 */ $(this).addClass("current") .next().show() .parent().siblings().children("a").removeClass("current") .next().hide(); return false; }); }); </script> </head> <body> <div> <ul> <li> <a href="#none">衬衫</a> <ul> <li><a href="#none">短袖衬衫</a></li> <li><a href="#none">长袖衬衫</a></li> <li><a href="#none">短袖T恤</a></li> <li><a href="#none">上袖T恤</a></li> </ul> </li> <li> <a href="#none">卫衣</a> <ul> <li><a href="#none">开襟卫衣</a></li> <li><a href="#none">套头卫衣</a></li> <li><a href="#none">运动卫衣</a></li> <li><a href="#none">时尚卫衣</a></li> </ul> </li> <li> <a href="#none">裤子</a> <ul> <li><a href="#none">短裤</a></li> <li><a href="#none">休闲裤</a></li> <li><a href="#none">牛仔裤</a></li> <li><a href="#none">免烫卡其裤</a></li> </ul> </li> </ul> </div> </body> </html>

default.css

/* reset */ body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;} form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} input,select{font-size:12px;line-height:16px;} img{border:0;} ul,li{list-style-type:none;} a {color:#00007F;text-decoration:none;} a:hover {color:#bd0a01;text-decoration:underline;} .box { width: 150px; margin: 0 auto; } .menu{ overflow:hidden; border-color: #C4D5DF; border-style: solid; border-width: 0 1px 1px; } /* lv1 */ .menu li.level1 a{ display: block; height: 28px; line-height: 28px; background:#EBF3F8; font-weight:700; color: #5893B7; text-indent: 14px; border-top: 1px solid #C4D5DF; } .menu li.level1 a:hover{text-decoration:none;} .menu li.level1 a.current{background:#B1D7EF;} /* lv2 */ .menu li ul{overflow:hidden;} .menu li ul.level2{display:none;} .menu li ul.level2 li a{ display: block; height: 28px; line-height: 28px; background:#ffffff; font-weight:400; color: #42556B; text-indent: 18px; border-top: 0px solid #ffffff; overflow: hidden; } .menu li ul.level2 li a:hover{ color:#f60; }

上面代码中:

$(document).ready(function(){ ... });

的作用类似于JavaScript中的window.onload方法，不过与它还是有些区别：

window.onload执行时机：必须等待网页中所有内容加载完毕后，才能执行；$(document).ready（）执行时机是网页中所有的DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。 window.onload不能同时编写多个；$(document).ready（）可以。 window.load没有简写的形式，$$(document).ready（function(){ … }）可以简写为$(function(){ … })。

需要强调的是，在jQuery库中， $$符号就是jQuery的一个简写形式，例如$ (“#foo”)和jQuery(“#foo”)是等价的。

二 . jQuery对象和ＤＯＭ对象

ＤＯＭ对象即文档对象模型，每一份ＤＯＭ都可以表示成一棵树。构建一个非常基本的网页。

jQuery对象就是jQuery包装DOM对象后产生的对象。

jQuery对象时jQuery独有的。如果一个对象时jQuery对象，那么就可以使用jQuery里的语法。例如：

//获取id为foo的元素内html代码。 $("#foo").html(); //这段代码等价于： document.getElmentById("foo").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法，同样ＤＯＭ对象也不能使用jQuery里的方法。

注意：

用#id作为选择符取得的是jQuery对象而并非document.getElmentById(“id”)所得到的DOM对象，两者并不等价。注意分清jQuery对象和ＤＯＭ对象。

三 . jQuery对象和ＤＯＭ对象的互相转换

jQuery种提供两种将一个jQuery对象转换成DOM对象的方法：[index]和get(index)。 //[index]方式: var $cr = $("#cr"); var cr = $cr[0]; alert(cr.checked) //get(index)方式： var $cr = $("#cr"); var cr = $cr.get(0); alert(cr.checked)

注意：平时用到的jQuery对象都是通过$()函数创造出来的，这个函数就是一个jQuery对象的制造工厂。