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

jQuery笔记（1）

Posted on 2008-10-22 23:13 梦与桥 阅读(274) 评论(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><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

只有注册用户登录后才能发表评论。
网站导航: