简介
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 rel="stylesheet" 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 class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<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 class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<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 class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<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对象和DOM对象
DOM对象即文档对象模型,每一份DOM都可以表示成一棵树。构建一个非常基本的网页。
jQuery对象就是jQuery包装DOM对象后产生的对象。
jQuery对象时jQuery独有的。如果一个对象时jQuery对象,那么就可以使用jQuery里的语法。例如:
//获取id为foo的元素内html代码。
$("#foo").html();
//这段代码等价于:
document.getElmentById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的方法。
注意:
用#id作为选择符取得的是jQuery对象而并非document.getElmentById(“id”)所得到的DOM对象,两者并不等价。注意分清jQuery对象和DOM对象。
三 . jQuery对象和DOM对象的互相转换
- 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对象的制造工厂。
四 . jQuery对象和DOM对象实例研究
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>论坛注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--引入jQuery库-->
<script src="../images/jquery.min.js" type="text/javascript"></script>
<!--DOM方式判断复选框是否被选中-->
<!-- <script type="text/javascript">
$(function(){ //等待dom元素加载完毕
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象,或者$cr.get[0]
$cr.click(function(){
if(cr.checked){
alert("感谢你的支持!你可以继续操作!");
}
});
});
</script>-->
<!--jQuery方式-->
<script type="text/javascript">
$(function () { //等待dom元素加载完毕
var $cr = $("#cr"); //jQuery对象
$cr.click(function(){
if($cr.is(":checked")){ //jQuery方式判断
alert("感谢你的支持!你可以继续操作!");
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="cr"/> <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>
上面例子简单演示了DOM对象和jQuery对象的不同,但最终效果是一样的。