jQuery笔记（1）

1、概述
    jQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果，对DOM有强大的控制能力。
2、更快的一些载入
    jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之后执行。

$(document).ready( function () {
// Your code here
} );

    你可以用他来载入任何你想要载入的javascript， 并不一定要保留jQuery的编码风格。让jQuery同时去执行多个函数也是可以的。
3、一个简单的应用：制作双色表格，关键代码如下：

< script src = " jquery-latest.pack.js "  type = " text/javascript " ></ script >  
<!-- 将jQuery引用进来 -->
< script type = " text/javascript " >
$(document).ready( function () {  //这个就是传说的ready
        $(".stripe tr").mouseover(function(){  
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
                $(this).addClass("over");}).mouseout(function(){ 
                                //给这行添加class值为over，并且当鼠标一出该行时执行函数
                $(this).removeClass("over");})  //移除该行的class
        $(".stripe tr:even").addClass("alt");
                //给class为stripe的表格的偶数行添加class值为alt
} );
</ script >

<style type="text/css">
tr.alt td  {} {
        background:#ecf6fc;  /**//*这行将给所有的tr加上背景色*/
}
 
tr.over td  {} {
        background:#bcd4ec;  /**//*这个将是鼠标高亮行的背景色*/
}
</style>

< table  class ="stripe"  width ="50%"  border ="0"  cellspacing ="0"  cellpadding ="0" >  
<!-- 用class="stripe"来标识需要使用该效果的表格 -->

在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作，所以：

$( " .stripe tr " ).mouseover( function () {  
        $(this).addClass("over");} ) 
$( " .stripe tr " ).mouseout( function () {  
        $(this).removeClass("over"); } )

写成了：

$( " .stripe tr " ).mouseover( function () {  
             $(this).addClass("over");} ).mouseout( function () { 
                 $(this).removeClass("over");} )

4、巧妙的伪装链接

    我们要使用jQuery去创建一小段代码,这段代码会把一个页面所有的超链接转换并且伪装起来. 要给所有我们想伪装的链接添加一个class,class有助于jQuery帮我们找到需要伪装的链接而撇开其它不需要伪装的链接.title有两个作用:当鼠标划过链接的时候会有一个小小的盒状提示显示URL并且同样的信息会显示在浏览器的状态栏(IE Only).

< p >< a  href ="http://www.affsite.com?id=123"  title ="http://www.affsite.com"
class ="affLink" > Super Duper Product </ a ></ p >

 

< script src = " jquery.js " ></ script >
< script type = " text/javascript " >
$(document).ready( function () {
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
} );
</ script >

5、安全邮件列表(完整代码暂缺)
    垃圾邮件制造者会使用自动化软件从html源文件中寻找电子邮件链接,这种做法和google一样:使用相关链接. 他么就和我们大部分人一样懒惰.所以很难所他们不会拿个本子放在键盘旁边记下你的电子邮件地址. 请查看我提供的示例的源代码,你将不会在html里找到任何的邮件地址. 这几坚实的保证了你绝对不会收到垃圾邮件,只会从朋友或者浏览者那里收到邮件.

$(document).ready( function () {
$.post('mailtoInfo.jsp',{
  pass: "secret"
},function(txt){
  $('div.email').html(txt);
  $('div.email').slideDown("slow");
});
} );

6、用Jquery生成的HTML