CONAN ZONE

你越挣扎我就越兴奋

BlogJava 首页 新随笔 联系 聚合 管理
  0 Posts :: 282 Stories :: 0 Comments :: 0 Trackbacks

前言:

      jQuery是一个不错的javascript产品,我曾经想总结一些javascript的一些常用功能,以备自己调用,然而看了jQuery,发现他做的太强了,不得不向他学习。“永远学习强者”,但是也告诫自己,不要被它们绑住了双手,否则你的创造性就会被扼杀,我建议当工具使用,不必死计其语法,否则自己就“晕”了。我希望有更多有创造性的产品出现。

      获取jQuery最新版本:http://jquery.com/src/

一、基本操作:

1、当文档(dom)加载完毕后,立即执行内容:

$(document).ready(function() {
    
// do stuff when DOM is ready
}
);

2、为所有的A标记添加一个事件。 :)当然也可以是其它的,任意发挥吧。

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

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

//在一个菜单应用中,将其子菜单中的A标记加样式
    $(document).ready(function() {
    
        $(
"#Menu ul a").hover(function(){
            $(
this).addClass("blue");
        }
,function(){
            $(
this).removeClass("blue");
        }
);

注:id选择加#号前缀,其下级标记用空格隔开。:)是不是很容易啊
        hover为其事件,其它事件有click,mouseover,mouseout,change...等。可参考:http://visualjquery.com

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

$(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文本。

 5、不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题

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

 注:这个代码选择了所有的li元素,然后去除了没有ul子元素的li元素。注意体会方便之极的css()方法,并再次提醒请务必实际测试观察效果,比方说换个CSS样式呢?再加一个CSS样式呢?像这样:$("li").not("[ul]").css("border", "1px solid black").css("color","red")。

 6、可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:

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

注:这个代码给所有带有name属性的链接加了一个背景色。

6.1常见的情况是以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();
         }

     }
);
}
);

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

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

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

8、在我们继续之前我们先来看看这一步: jQuery会让代码变得更短从而更容易理解和维护,下面是

 

$(document).ready(callback)的缩写法:

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

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

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

:)是不是很容易呀,多亏了jQuery团队的努力呀!

posted on 2008-06-20 22:59 CONAN 阅读(286) 评论(0)  编辑  收藏 所属分类: JQuery