Jquery基本用法总结

来源：互联网发布：java中sort的用法编辑：程序博客网时间：2024/05/29 06:27

好了，我们言归正传，下面教大家一些Jquery的一些基础用法。

始终记住首先必需引入Jquery的主文件
在写这篇文章的时候，Jquery的版本已经到了1.4.4了，相信Jquery肯定会越来越强大的。我们就期待着她的功能越发地健全吧。
告诉大家一个东西，Jquery的主文件，不需要放在你的服务器上的，我们可以调用谷歌的在线Jquery文件，因为从google直接加载(调用)是一个很方便的办法,
而且据传有缩短延迟,提高并行加载速度等好处。
1<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
想要学习Jquery，API文档那是必须的：
jQuery API 1.4.4中文版chm下载
关于页面元素的引用
“jQuery”之所以叫做“jQuery”，是因为她是“javascript query”的缩写，也就是因为她的强大的选择器。
“$()”可引用的元素包括id、class、元素名、元素的层级关系、xpath条件或者dom对象，返回的对象为jquery对象（注意：这里的jQuery对象是集合对象，不能直接调用dom定义的方法。）
Jquery对象和DOM对象之间的转换
还记得有好长一段时间，我在想有没有把DOM对象转变成Jquery对象的方法（一直都是看jquery的API手册，在手册中未看到过关于DOM转jQuery对象的方法），如果有那简直太方便了。后来终于在某篇文章里发现了实现的方法。
原来DOM转Jquery对象是如此之简单呀：
$(DOM对象)这样就可以将DOM对象转变成Jquery对象了。举个例子：
1$(document.getElementById('test'))
上面的代码相当于$(‘#test’);
既然DOM对象转成Jquery对象如此之简单，那么jquery对象想转变成DOM对象的话，也应该困难不到哪里去吧~呵呵~~您猜对了。一样很简单。
由于jquery对象本身是一个集合，所以jquery对象要转成DOM对象的话，那就必须取出其中的某一项。那么如何取出jquery对象中的某一项呢。下面来看代码：
HTML代码:
1<div id="test">
2            我是一个DIV
3            <span>我是DIV中的第一个span</span>
4            <span>我是DIV中的第二个span</span>
5            <span class="demo">我是class为‘demo’的span</span>
6            <span class="demo">我同样也是class为‘demo’的span</span>
7        </div>
1$(function(){
2    $("#test")[0];//取得DIV的DOM对象
3    $("div")[0];//同样是取得了DIV的DOM对象
4    $("span").get(1);//取得了第二个span的DOM对象
5    $(".demo").get(0);//取得了class为‘demo’的第一个span
6    //上面的这些都是DOM对象了，不能再对其使用Jquery的方法了。
7})
Jquery中的一些同时可以实现set和get的函数
估计大家最熟悉的应该是“css”这个函数吧。jquery中有好多这样的函数
01$("#test").css("color");//返回id为test的元素节点的文字颜色值
02$("#test").css("color","#ff0000");//将id为test的元素节点的文字颜色值设定为红色
03$("#test").html();//返回id为test的元素节点的html内容。
04$("#test").html("<b>new content</b>");//将“<b>new content</b>” 作为html串写入id为test的元素节点内容中,页面显示粗体的new content
05$("#test").text();//返回id为test的元素节点的文本内容。
06$("#test").text("<b>new content</b>");//将“<b>new content</b>” 作为普通文本串写入id为test的元素节点内容中,页面显示<b>new content</b>
07$("#test").height();//返回id为test的元素的高度
08$("#test").height("300");//将id为test的元素的高度设为300
09$("#test").width();//返回id为test的元素的宽度
10$("#test").width("300");//将id为test的元素的宽度设为300
11$("input").val();//返回表单输入框的value值
12$("input").val("test");//将表单输入框的value值设为test
13$("#test").click();//触发id为test的元素的单击事件
14$("#test").click(fn);//为id为test的元素单击事件添加函数
15//.....这里还没列全，还有好多这样的，大家可以多看看jquery的API手册
获取Jquery对象集合中的某一项
Jquery提供了eq和get函数来获取集合中的某一项。需要注意的是，这两个方法都是通过索引号来取得的（索引是从0开始的）。这两个函数有个区别是eq返回的是jquery对象，而get返回的是DOM对象
不同的对象调用不同的方法，jquery对象只能调用jquery的方法，DOM对象只能调用DOM的方法：
1$("div").eq(2).html();//调用jquery对象的方法
2$("div").get(2).innerHTML;//调用dom的方法属性
关于jquery中的each的用法
$().each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
上面是API文档的解释。
没理解的话给例子，呵呵:
HTML代码:
1<div>Jquery学习</div>
2<div>Jquery教程</div>
3<div>Jquery插件</div>
Jquery代码:
1$(function(){
2    $("div").each(function(i){//这里的i是索引，从0开始的
3        alert("第"+i+"个DIV的内容是==>"+this.innerHTML);//这里的this是DOM对象哦
4        $(this).css("color","#ff0000");
5    })
6})
$.each(obj, fn)
通用例遍方法，可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
遍历一个数组：
1$(function(){
2    $.each( [1,2,3], function(i, n){
3        alert( "Item #" + i + ": " + n );
4    });
5})
6//结果为 Item #0: 1/Item #1: 2/Item #2: 3
遍历一个对象，同时使用成员名称和变量内容。
1$(function(){
2    $.each( { ch_name: "Jquery学习", en_name: "Jquery Study" },function(k, v){
3      alert( "Name: " + k + ", Value: " + v );
4    });
5})
6//结果为 Name: ch_name, Value: Jquery学习/Name: en_name, Value: Jquery Study
扩展我们需要的功能
1$.extend({
2 min: function(a, b){return a < b?a:b; },
3 max: function(a, b){return a > b?a:b; }
4});//为在jquery的命名空间中扩展了min,max两个方法
5//可以像下面这样使用
6var a = 10,b=20;
7var max = $.max(a,b);//20
8var min = $.min(a.b);//10
Jquery支持链式写法
这就是为什么Jquery的代码是如此的优雅的原因了。
所谓链式写法，也就是可以一个Jquery对象连续使用不同的方法
HTML代码：
1<div>Jquery学习</div>
2<div>Jquery教程</div>
3<div>Jquery插件</div>
Jquery代码：
1$(function(){
2    $("div").click(function(){alert($(this).html())})
3            .mouseover(function(){alert('mouse over event')})
4            .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
5});
上面这段代码实现这样的功能，首先给每个div绑定了一个click事件，然后又绑定了一个鼠标移开的时候触发的事件，最后给每个div设定了不同的颜色
关于插件内的this所指的对象
1;(function($){
2    $.fn.colortip = function(option){
3        alert(this.html());//这里的this是jquery对象
4    }
5})(jQuery);
解决自定义方法或其他类库与jQuery的冲突
有时候，我们在使用了其他的js类库如prototype等，其中也定义了$方法，
如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，
如原来引用对象方法$(“#test”)改为jQuery(“#test”)。
如：
1jQuery.noConflict();
2// 开始使用jQuery
3jQuery("div span").hide();
4// 使用其他库的 $()
5$("content").style.display = 'none';