JQuery概述
2009-11-24 14:59 北冥有魚,其名為坤、 阅读(405) 评论(0) 编辑 收藏 举报 随着IT业的发展,一些技术,逐渐走入了大众的视线,一个优秀的Soft Designer,当然应该能很快的接收到新的讯息,
提高本身价值,与代码的质量.近来听人说JQuery好用,说的人多了,有时间的时候自然我就想看看,结果发现,好东西,好用,
省去多余的时间跟代码.我怎么不早点自学下呢?呵呵.闲话少说,先跟大家介绍介绍JQuery的优势吧.
jquery是一个优秀的javascript框架
主要提供如下功能。
访问页面框架的局部。
修改页面的表现。
更改页面内容。
相应事件。
为页面添加动画。
与服务器异步交互。（AJAX）
说白了,就是以个js框架,提供多种已经封装好了的方法可供调用.去掉了你弄ajax时自己去new什么xmlhttprequest的烦恼,
也摒弃了最令人心烦的多浏览器支持,它封装了浏览器的兼容,换句话说,用它做的东西,你根本不用考虑用户是用IE还是火狐!
因为显示的效果是一样的.
JQuery控制页面：
标记的属性。
元素的样式。
页面的元素。
jQuery处理事件。
好了,今天先介绍下几种简单的方法吧.
既然要用它,首先去下载一个JQuery框架吧,官方首页是http://jquery.com/,下载后无需安装,因为他只是一个js文件而已,要用
的时候当然也和导入js一样的咯.如下例所示:
1.选择器实例
<head>
<title>选择器实例</title>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
window.onload = function(){
var oElments = $("h2 a");//选择匹配元素，此为选择h2标签里的a标记
for(var i=0;i<oElments.length;i++)
{
oElments[i].innerHTML = i.toString();
}
}
</script>
</head>
<body>
<h2><a href="#">正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
</body>
</html>
效果如下:
0内容
正文1
2.功能函数的前缀,图所示：
<HTML>
<HEAD>
<TITLE>$.trim()</TITLE>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript">
var str = " 1234567890 ";
alert(str.length); //弹出15
str = $.trim(str);
alert(str.length); //弹出10
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
上图会弹出提示。这里就没有切图了。
3.创建DOM元素。
<HTML>
<HEAD>
<TITLE> 创建DOM元素 </TITLE>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(
function(){ //ready函数模拟window.onload()方法
var newObj = $("<p>这是要插入的元素</p>"); //创建DOM元素
newObj.insertAfter("#pFont"); //insertAfter方法
}
);
</script>
</HEAD>
<BODY>
<p id="pFont">这是一个p标记,创建的DOM元素要插入这后面</p>
<p>插入这个p标记之前,此标记无id.可能有,也可能没有.</p>
</BODY>
</HTML>
上图显示为：
这是一个p标记,创建的DOM元素要插入这后面
这是要插入的元素
插入这个p标记之前,此标记无id.可能有,也可能没有.
大家都知道,要是用GetElementById此类方法去插入要写多少代码?没有id的<p>标记又怎么去获得?
这个例子明显的说明了JQuery的优势.
4.获得标记的属性,例子:
<HTML>
<HEAD>
<TITLE> 获得标记的属性 </TITLE>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(
function(){ //模拟window.onload()
//var sTitle = $("em").attr("title"); //获取第一个<em>元素的title属性值
var sTitle = $("em:eq(1)").attr("title"); //获取第二个<em>
//元素的title属性值
$("span").text(sTitle);
}
);
</script>
</HEAD>
<BODY>
从前有一只大<em title="huge,gigantic">恐龙</em> </br>
在树林里面<em title="running">跑啊跑</em> </br>
title的属性值是：<span></span> </br>
</BODY>
</HTML>
显示:
从前有一只大恐龙
在树林里面跑啊跑
title的属性值是：running
<em>是一个斜体标记.上例取出了其属性的值.很方便吧?
其中,
$(
function(){ //模拟window.onload()
//..
}
);
模拟了window.load()方法，去除了多个页面同时调window.onload()方法所产生的一些混乱与错误.
换句话说,用这种方式调用window.onload(),不管你写多少个window.onload(),都不会出现混乱与错误.
好了.先给大家介绍这些吧.有时间再多讲点它的好处.
