锋利的Jquery第一章认识jQuery

疯狂的草儿

浏览: 204783 次
性别:
来自: 合肥

最近访客更多访客>>

czldl

ytty

osacar

A741841403

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript&Jquery

jQuery JavaScript Ajax 制造 HTML

锋利的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和其他库的冲突

.......

分享到：

虚拟机上网设置与更改 | 第九章Hibernate映射一对一关联关系

2011-01-29 13:34
浏览 1105
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论