走过平凡人生、留下平凡足迹 注册 | 登陆
浏览模式: 标准 | 列表全部文章

实例讲解MySQL联合查询

实例讲解MySQL联合查询.那下面就具体讲讲简单的JOIN的用法了。首先我们假设有2个表A和B,他们的表结构和字段分别为:

表A:

ID Name

 

1 Tim

 

2 Jimmy

 

3 John

 

4 Tom

表B:

ID Hobby

 

1 Football

 

2 Basketball

 

2 Tennis

 

4 Soccer

 

1.  内联结:
Select A.Name B.Hobby from A, B where A.id = B.id,这是隐式的内联结,查询的结果是:

 

Name Hobby

 

Tim Football

 

Jimmy Basketball

 

Jimmy Tennis

 

Tom Soccer

它的作用和 Select A.Name from A INNER JOIN B ON A.id = B.id是一样的。这里的INNER JOIN换成CROSS JOIN也是可以的。

2.  外左联结
Select A.Name from A Left JOIN B ON A.id = B.id,典型的外左联结,这样查询得到的结果将会是保留所有A表中联结字段的记录,若无与其相对应的B表中的字段记录则留空,结果如下:

Name Hobby

 

Tim Football

 

Jimmy Basketball,Tennis

 

John  
Tom Soccer

所以从上面结果看出,因为A表中的John记录的ID没有在B表中有对应ID,因此为空,但Name栏仍有John记录。
3.  外右联结
如果把上面查询改成外右联结:Select A.Name from A Right JOIN B ON A.id = B.id,则结果将会是:

Name Hobby

 

Tim Football

 

Jimmy Basketball

 

Jimmy Tennis

 

Tom Soccer

这样的结果都是我们可以从外左联结的结果中猜到的了。
说到这里大家是否对联结查询了解多了?这个原本看来高深的概念一下子就理解了,恍然大悟了吧(呵呵,开玩笑了)?最后给大家讲讲MySQL联结查询中的某些参数的作用:

1.USING (column_list):其作用是为了方便书写联结的多对应关系,大部分情况下USING语句可以用ON语句来代替,如下面例子:

a LEFT JOIN b USING (c1,c2,c3),其作用相当于下面语句
a LEFT JOIN b ON a.c1=b.c1 AND a.c2=b.c2 AND a.c3=b.c3

只是用ON来代替会书写比较麻烦而已。

2.NATURAL [LEFT] JOIN:这个句子的作用相当于INNER JOIN,或者是在USING子句中包含了联结的表中所有字段的Left JOIN(左联结)。

3.STRAIGHT_JOIN:由于默认情况下MySQL在进行表的联结的时候会先读入左表,当使用了这个参数后MySQL将会先读入右表,这是个MySQL的内置优化参数,大家应该在特定情况下使用,譬如已经确认右表中的记录数量少,在筛选后能大大提高查询速度。

最后要说的就是,在MySQL5.0以后,运算顺序得到了重视,所以对多表的联结查询可能会错误以子联结查询的方式进行。譬如你需要进行多表联结,因此你输入了下面的联结查询:

SELECT t1.id,t2.id,t3.id
    FROM t1,t2
    LEFT JOIN t3 ON (t3.id=t1.id)
    WHERE t1.id=t2.id;

但是MySQL并不是这样执行的,其后台的真正执行方式是下面的语句:

SELECT t1.id,t2.id,t3.id
    FROM t1,(  t2 LEFT JOIN t3 ON (t3.id=t1.id)  )
    WHERE t1.id=t2.id;

这并不是我们想要的效果,所以我们需要这样输入:

SELECT t1.id,t2.id,t3.id
    FROM (t1,t2)
    LEFT JOIN t3 ON (t3.id=t1.id)
    WHERE t1.id=t2.id;

在这里括号是相当重要的,因此以后在写这样的查询的时候我们不要忘记了多写几个括号,至少这样能避免很多错误(因为这样的错误是很难被开发人员发现的)。

Tags: mysql, php, 教程

jQuery起点教程---使用选择器和事件

jQuery起点教程之使用选择器和事件
jQuery提供两种方式来选择html的elements:


  • 第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));
  • 第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。



为了测试这些选择器,我们来试着在我们starterkit.html中选择并修改第一个ordered list.

一开始,我们需要选择这个list本身,这个list有一个ID叫“orderedlist”,通常的javascript写法是document.getElementById("orderedlist").在jQuery中,我们这样做:

$(document).ready(function() {
        $("#orderedlist").addClass("red");
});

这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注:参考测试包中的css目录下的core.css,其中定义了red样式)。因此,在你刷新了starterkit.html后,你将会看到第一个有序列表(ordered list )背景色变成了红色,而第二个有序列表没有变化.
现在,让我们添加一些新的样式到list的子节点.

$(document).ready(function() {
        $("#orderedlist > li").addClass("blue");
});

这样,所有orderedlist中的li都附加了样式"blue"。

现在我们再做个复杂一点的,当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。

$(document).ready(function() {
        $("#orderedlist li:last").hover(function() {
                $(this).addClass("green");
        }, function() {
                $(this).removeClass("green");
        });
});

还有大量的类似的CSS和XPath例子,更多的例子和列表可以在这里找到。(译者Keel注:入门看此文,修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的!)

每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)。其他的一些事件,如ready和hover,也提供了相应的方法。

你可以在Visual jQuery找到全部的事件列表,在Events栏目下.

用这些选择器和事件你已经可以做很多的事情了,但这里有一个更强的好东东!

$(document).ready(function() {
        $("#orderedlist").find("li").each(function(i) {
                $(this).html( $(this).html() + " BAM! " + i );
        });
});

  • find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li").
  • each()一样迭代了所有的li,并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。
  • 在这个例子中, html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。(译者Keel注:从这个例子可以看到.html()方法是获取对象的html代码,而.html('xxx')是设置'xxx'为对象的html代码)



另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法,想像一个在你用AJAX方式成功提交后的reset:

$(document).ready(function() {
        // use this to reset a single form
        $("#reset").click(function() {
                $("#form")[0].reset();
        });
});

(译者Keel注:这里作者将form的id也写成了form,源文件有<form id="form">,这是非常不好的写法,你可以将这个ID改成form1或者testForm,然后用$("#form1")或者$("#testForm")来表示它,再进行测试。)

这个代码选择了所有ID为"form"的元素,并在其第一个上call了一个reset()。如果你有一个以上的form,你可以这样做:

$(document).ready(function() {
        // use this to reset several forms at once
        $("#reset").click(function() {
                $("form").each(function() {
                        this.reset();
                });
        });
});

(译者Keel注:请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会!必要时要观察starterkit.html的html代码)

这样你在点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() {
        $("li").not("[ul]").css("border", "1px solid black");
});

这个代码选择了所有的li元素,然后去除了没有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外。

(译者Keel注:请注意体会方便之极的css()方法,并再次提醒请务必实际测试观察效果,比方说换个CSS样式呢?再加一个CSS样式呢?像这样:$("li").not("[ul]").css("border", "1px solid black").css("color","red");)

上面代码中的[expression] 语法是从XPath而来,可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {
        $("a[@name]").background("#eee");
});

这个代码给所有带有name属性的链接加了一个背景色。(译者Keel注:这个颜色太不明显了,建议写成$("a[@name]").background("red");)

更常见的情况是以name来选择链接,你可能需要选择一个有特点href属性的链接,这在不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")的方式来代替完全匹配("="):

$(document).ready(function() {
        $("a[@href*=/content/gallery]").click(function() {
                // do something with all links that point somewhere to /content/gallery
        });
});

到现在为止,选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素,比如一个FAQ的页面,答案首先会隐藏,当问题点击时,答案显示出来,jQuery代码如下:

$(document).ready(function() {
        $('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});

这里我们用了一些链式表达法来减少代码量,而且看上去更直观更容易理解。像'#faq' 只选择了一次,利用end()方法,第一次find()方法会结束(undone),所以我们可以接着在后面继续find('dt'),而不需要再写$('#faq').find('dt')。

在点击事件中的,我们用 $(this).next() 来找到dt下面紧接的一个dd元素,这让我们可以快速地选择在被点击问题下面的答案。

(译者Keel注:这个例子真是太酷了,FAQ中的答案可以收缩!从利用next()的思路到实现这些效果都有很多地方需要我们消化,注意 if (answer.is(':visible'))用法,注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档)

除了选择同级别的元素外,你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时,它的父级元素--也就是文章的这一段突出显示,试试这个:

$(document).ready(function() {
        $("a").hover(function() {
                $(this).parents("p").addClass("highlight");
        }, function() {
                $(this).parents("p").removeClass("highlight");
        });
});

测试效果可以看到,移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又恢复原样。

(译者Keel注:highlight是core.css中定义的样式,你也可以改变它,注意这里有第二个function()这是hover方法的特点,请在API文档中查阅hover,上面也有例子说明)
在我们继续之前我们先来看看这一步: jQuery会让代码变得更短从而更容易理解和维护,下面是$(document).ready(callback)的缩写法:

$(function() {
        // code to execute when the DOM is ready
});

应用到我们的Hello world例子中,可以这样:

$(function() {
        $("a").click(function() {
                alert("Hello world!");
        });
});

现在,我们手上有了这些基础的知识,我们可以更进一步的探索其它方面的东西,就从AJAX开始!

Tags: ajax, javascript, php, jquery

jQuery起点教程---使用AJAX

在这一部分我们写了一个小小的AJAX应用,它能够rate一些东西(译Keel注:就是对某些东西投票),就像在youtube.com上面看到的一样。
首先我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数。看一下rate.php代码.
虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating".

$(document).ready(function() {
        // generate markup
        var ratingMarkup = ["lease rate: "];
        for(var i=1; i <= 5; i++) {
                ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
        }
        // add markup to container and applier click handlers to anchors
        $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
                e.preventDefault();
                // send requests
                $.post("rate.php", {rating: $(this).html()}, function(xml) {
                        // format result
                        var result = [
                                "Thanks for rating, current average: ",
                                $("average", xml).text(),
                                ", number of votes: ",
                                $("count", xml).text()
                        ];
                        // output result
                        $("#rating").html(result.join(''));
                } );
        });
});

这段代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。

如果你没有一个安装过PHP的webserver,你可以看看这个在线的例子.
不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"

更多的AJAX方法可以从这里 找到,或者看看API文档 下面的AJAX filed under AJAX.

(译者注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)

一个在使用AJAX载入内容时经常发生的问题是:当载入一个事件句柄到一个HTML文档时,还需要在载入内容上应用这些事件,你不得不在内容加载完成后应用这些事件句柄,为了防止代码重复执行,你可能用到如下一个function:

$(function() {
        var addClickHandlers = function() {
                $("a.clickMeToLoadContent").click(function() {
                        $("#target").load(this.href, addClickHandlers);
                });
        };
        addClickHandlers();
});

现在,addClickHandlers只在DOM载入完成后执行一次,这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.

请注意addClickHandlers函数是作为一个局部变量定义的,而不是全局变量(如:function addClickHandlers() {...}),这样做是为了防止与其他的全局变量或者函数相冲突.

另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法,简单的办法是将这个回调方法包含在一个其它的function中:

// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
  ...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );

用到简单的AJAX后,我们可以认为已经非常之“web2.0”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

Tags: ajax, javascript, php, jquery

jQuery起点教程---Animate

jQuery起点教程之Animate是个好东西,一个非常好的效果你可以用jquery自带的函数,比如show(),hide(),Animate()等函数。更确切的说这些函数才是jquery吸引人的地方。
一些动态的效果可以使用 show() 和 hide()来表现:

$(document).ready(function() {
        $("a").toggle(function() {
                $(".stuff").hide('slow');
        }, function() {
                $(".stuff").show('fast');
        });
});

你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:

$(document).ready(function() {
        $("a").toggle(function() {
                $(".stuff").animate({
                        height: 'hide',
                        opacity: 'hide'
                }, 'slow');
        }, function() {
                $(".stuff").animate({
                        height: 'show',
                        opacity: 'show'
                }, 'slow');
        });
});

很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档

这些效果插件是位于jQuery插件列表的前面的,当然也有很多其他的插件,比如我们下一章讲到的表格排序插件。

Tags: ajax, javascript, php, jquery

jQuery起点教程----有序化插件实例

jQuery起点教程之有序化插件实例是一篇使用jquery的tablesorter插件来实现一些功能效果的教程,大家可以认真学习一下。Sort me将我有序化:使用tablesorter插件进行表格排序。

这个表格排序插件能让我们在客户端按某一列进行排序,引入jQuery和这个插件的js文件,然后告诉插件你想要哪个表格拥有排序功能。
要测试这个例子,先在starterkit.html中加上像下面这一行的代码:
<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>
然后可以这样调用不着:

$(document).ready(function() {
$("#large").tableSorter();
});

现在点击表格的第一行head区域,你可以看到排序的效果,再次点击会按倒过来的顺序进行排列。
这个表格还可以加一些突出显示的效果,我们可以做这样一个隔行背景色(斑马线)效果:

$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});

关于这个插件的更多例子和文档可以在 tablesorter首页找到.
几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的
经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.
当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.

Tags: ajax, javascript, php, jquery

jQuery实例分析

Jquery是一个优秀的Javascript框架,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!jQuery的开篇声明里有一段非常重要的话:jQuery是为了改变javascript的编码方式而设计的。从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库。jQuery改变javascript编码方式!

那么它是如何实现它的声明的呢?这里,用以下的一段简短的使用流程:
1)查找(创建)jQuery对象:$("selector");
2)调用jQuery对象的方法完成我们需要完成的工作:$("selector").doOurWork();
jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的.这两个步骤是jQuery的编码逻辑核心!
要实现这种简洁编码方式,创建jQuery对象这一环节至关重要.因此,jQuery的dom元素查找能力相当强悍.此外,jQuery对象的方法肯定是有限的,有限的方法满足不了日益增长各有所需的要求,所以,必须提供jQuery对象方法的扩展能力.
强悍的dom元素查找能力,以及随心所欲的方法扩展,这两点正是jQuery的核心所在!

来一个简单的示例,来说明jQuery是如何工作的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body id="bd">
<a href="http://www.baidu.com">baidu</a>
</body>
</html>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" >
$(function(){
    $("a").click(function(e){//1)查找$("a");2)jQuery对象事件click;3)jQuery对象方法hide
        $(this).hide("slow");
        return false;   
    });
});
</script>

jQuery中有一个"配置"的思想,这一点使得对象的属性/事件等设置变得容易理解且十分简便,如下一个拖拽组件的初始化:

$(document).ready(
    function()
    {
        $('#drag1').Draggable({
            handle: "ax",               //属性设置
            onStart: function(el,x,y){  //事件监听器设置      
            }
        });
    }
);

可以看到,$("#drag1")是查找并创建一个jquery对象,然后调用Draggable方法进行拖拽初始化,在此方法调用时,传递一个"配置"对象,进行拖拽操作的初始化配置.这一"配置"的思想,极大简化了一些编码步骤,并相当直观和易懂.

三个问答:


  • 1)问:为什么$(selector)之后,返回的是jQuery对象?
    答:从jQuery的源代码中,我们可以知道:var $ = jQuery.因此当我们$(selector)操作时,其实就是jQuery(selector),创建的是一个jQuery对象.当然正确的写法应该是这样的:var jq = new $(selector);而jQuery使用了一个小技巧在外部避免了new,在jquery方法内部:if ( window == this ) return new jQuery(selector);
  • 2)问:为什么创建一个jQuery对象之后,我们可以这样写$(selector).each(function(index){...});进行遍历操作呢?
    答:其实jQuery(selector)方法调用时,在jQuery(selector)方法内部,最后返回的是一个数组:return this.setArray(a);而each方法体内部是一个for循环,在循环体内是这样调用的:method.call(this[ i],i).
  • 3)问:为什么jQuery能做到jQuery对象属性/方法/事件的插件式扩展?
    答:如果您有一些javasciprt的面向对象方面的知识,就会知道,jQuery.prototype原型对象上的扩展属性/方法和事件,将会给jQuery的对象"扩展".基于这一点,jQuery是这样写的:jQuery.fn = jQuery.prototype.


所以,当我们扩展一个插件功能时,如下:

jQuery.fn.check = function() {
  return this.each(function() {
    this.checked = true;
  });
};

其实就是:

jQuery.prototype.check = function() {
  return this.each(function() {
    this.checked = true;
  });
};

综上所述,jQuery给我们带来了一个简洁方便的编码模型(创建jQuery对象;直接使用jQuery对象的属性/方法/事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的"配置"对象思想.

实现自己的jQuery

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title>Untitled Page</title>  
  6. </head>  
  7. <body>  
  8. <div id="d">divvv</div>  
  9. <div id="fsd">fdsf</div>  
  10. </body>  
  11. </html>  
  12. <script type="text/javascript">  
  13. //实现自己的MyQuery框架   
  14. var MyQuery = function(selector){   
  15.     if ( window == this ) return new MyQuery(selector);   
  16.     //这里只实现dom类型的简单查找,嘿嘿   
  17.     var doms = document.getElementsByTagName(selector);   
  18.     var arr = [];   
  19.     for(var i=0; i<doms.length; i++){   
  20.         arr.push(doms.item(i));   
  21.     }   
  22.     return this.setArray(arr);   
  23. }   
  24. MyQuery.prototype.setArray = function( arr ) {   
  25.         this.length = 0;   
  26.         [].push.apply( this, arr );   
  27.         return this;   
  28. }   
  29. MyQueryMyQuery.fn = MyQuery.prototype;   
  30. var $ = MyQuery;   
  31.   
  32. //插件扩展1)each   
  33. MyQuery.fn.each = function(method){   
  34.     for(var i=0,l=this.length; i<l; i++){   
  35.         method.call(this[i],i);   
  36.     }   
  37. }   
  38. //插件扩展2)show   
  39. MyQuery.fn.show = function(){   
  40.     this.each(function(i){   
  41.         alert(i+":"+this.id+":"+this.innerHTML);   
  42.     });   
  43. }   
  44. //debugger   
  45. $("div").show();   
  46. </script>  

Tags: ajax, javascript, php, jquery

jQuery技巧

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
$("div").eq(2).html();    //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
$("#msg").html();    //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();    //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$("#msg").height();    //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width();    //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300

$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test

$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})   
//为每个p元素增加了click事件,单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8、操作元素的样式
主要包括以下几种方式:
$("#msg").css("background");    //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
   $(this).addClass("selected");
},function(){
   $(this).removeClass("selected");
});
(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
$("p").trigger("click");    //触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于:
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[ i ]);
}
也可以处理json数据,如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options);
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim("   hello, how are you? "); //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
如:
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

Tags: ajax, javascript, php, jquery

jQuery使用手册

翻译整理:Young.J
官方网站:
http://jquery.com

    jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!
   下载地址:Starterkit (
http://jquery.bassistance.de/jquery-starterkit.zip
                       jQuery Downloads (
http://jquery.com/src/

» 阅读全文

Tags: ajax, jquery