ul a"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。" />

李秋菊的空间

我们一直在努力....

jquery几种页面元素定位及操作的方法

标签: jquery element

 jQuery提供两种方式来选择htmlelements,第一种是用CSSXpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。我们来试着在我们的test.html代码中选择并修改第一个ordered list.一开始,我们需要选择这个list本身,这个list有一个ID“orderedlist”,通常的javascript写法是document.getElementById("orderedlist").jQuery中,代码如下:

$(document).ready(function() {

        $("#orderedlist").addClass("red");

});

若将一个CSS样式blue附加到了orderedlist上,在你刷新了test.html后,你将会看到第一个有序列表(ordered 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");

        });

});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一样。each()方法迭代了所有的li,并可以在此基础上作更多的处理。 大部分的方法,addClass(), 都可以用它们自己的 each() html()用来获取每个lihtml文本, 追加一些文字,并将之设置为lihtml文本。

jQuery 提供了filter() not() 两个方法。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() {

        $("li").not(":has(ul)").css("border", "1px solid black");//原文为$("li").not("[ul]").css("border", "1px solid black");

});

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

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

$(document).ready(function() {

        $("a[name]").css("background-color","#eee"); //原文为“$("a[@name]").background("#eee");”jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代

});

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

更常见的情况是以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元素,这让我们可以快速地选择在被点击问题下面的答案。

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

$(document).ready(function() {

        $("a").hover(function() {

               $(this).parents("p").addClass("highlight");

        }, function() {

               $(this).parents("p").removeClass("highlight");

        });

});

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


    评分: 请先登录再投票,同一篇博客一月只能投票一次!
    无人投票

相关博客:


评论


发表评论

关注此文的人们还关注