锋利的Jquery第一章jQuery
1.3.1 配置jQuery环境
JQuery 不需要安装,只需要将下载的放到网站上的一个公共位置,使用时直接引用即可。
<html>
<head>
<!--在head标签内 引入jQuery-->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript">
</script>
</head>
<body>
</body>
</html>
1.3.2 编写简单的jQuery代码
首先,在jQuery库中,$就是jQuery的一个简写形式,例如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,程序中的$符号都是jQuery的一个简写形式。
<html>
<head>
<!--在head标签内 引入jQuery-->
<script src="lib/jquery-1.4.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery");
});
</script>
</head>
<body>
</body>
</html>
这段代码类似于传统的JS中的window.onload方法,不过与window.onload还是有些区别。见下表格:
window.onload | $(document).ready() | |
执行时机 | 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 | 网页中所有DOM结构绘制完毕后执行,可能DOM元素关联的东西并没有加载完。 |
编写个数 | 不能同时编写多个 以下代码无法正常执行: window.onload = function(){ alert("test1"); } window.onload = function(){ alert("test2"); } 结果只会输出: "test2" | 能同时编写多个 以下代码正确执行: $(document).ready(function(){ alert("Hello jQuery1"); }); $(document).ready(function(){ alert("Hello jQuery2"); }); 结果两次都输出 |
简化写法 | 无 | $(document).ready(function(){ //..... }); 可以简写成: $(function(){ //..... }) |
1.3.3 jQuery代码风格
1.链式操作风格
<!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" />
<title>1-3-3</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background:#555;
color:#fff;
cursor:pointer;
}
.highlight{
color:#fff;
background:green;
}
div{
padding:0;
}
div a{
background:#888;
display:none;
float:left;
width:300px;
}
</style>
<script src="lib/jquery-1.4.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$(".has_children").click(
function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
}
);
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章 认识jQuery</span>
<a>1.1-Javascript和javascript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-小结</a>
</div>
<div class="has_children">
<span>第二章 jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-应用jQuery改写示例</a>
<a>2.4-小结</a>
</div>
<div class="has_children">
<span>第三章 jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究</a>
<a>3.4-小结</a>
</div>
</div>
</div>
</body>
</html>
这就是jQuery强大的链式操作,一行代码就完成了导航栏的功能。
$(".has_children").click( function(){ $(this).addClass("highlight")//为当前元素增加highlight类 .children("a").show().end()//将子节点的<a>元素显示出来并 //重新定位到上次操作的元素 .siblings().removeClass("highlight")//获取元素的兄弟元素,并去掉它们的highlight类 .children("a").hide();//将兄弟元素下的<a>元素隐藏 } );
1.4 jQuery对象和DOM对象
1.4.1DOM对象和jQuery对象简介
1.简言之,可以通过JavaScript中的getElementById或者getElementByTagName来获取元素节点。像这样得到的DOM元素就是DOM对象。
2.jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象无法使用DOM对象的任何方法。同样,DOM对象也不能使用jQuery对象的任何方法。
1.4.2jQuery对象和DOM对象的相互转换
通过命名来区分一下:
如果是jQuery对象,那么这样命名:
var $variable= jQuery对象;
如果获取的是DOM对象,则定义如下:
var variable = DOM对象;
1.jQuery对象转换成DOM对象
jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)
(1) jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。
jQuery代码如下 :
var $cr = $("#cr"); var cr = $cr[0];//此时,cr即为DOM对象
(2) 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。
jQuery代码如下 :
var $cr = $("#cr"); var cr = $cr.get(0);//此时即为DOM对象
2 DOM对象转成jQuery对象
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方式为$(DOM对象)。
jQuery代码如下:
var cr = document.getElementByID("cr");//DOM对象 var $cr = $(cr);//jQuery对象
注意:平时用到的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。
1.5 解决jQuery和其他库的冲突
.......