posts - 37, comments - 8, trackbacks - 0, articles - 0

jQuery笔记(1)

Posted on 2008-10-22 23:13 梦与桥 阅读(273) 评论(0)  编辑  收藏 所属分类: javascript
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><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

只有注册用户登录后才能发表评论。


网站导航: