当前位置:首页>开发>正文

jquery几种页面元素定位及操作的方法 jquery如何获取第一个或最后一个子元素

2023-04-19 07:30:18 互联网 未知 开发

 jquery几种页面元素定位及操作的方法 jquery如何获取第一个或最后一个子元素

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

这两种方式还可以联合起来混合使用。我们来试着在我们的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()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。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元素,这让我们可以快速地选择在被点击问题下面的答案。除了选择同级别的元素外,你也可以选择父级的元素。

jquery如何获取第一个或最后一个子元素

匹配第一个子元素

:first 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
$("ul li:first-child")

匹配最后一个子元素

:last只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
$("ul li:last-child")

jquery怎么判断是否出现某个元素

你是想判断层是不是到了显示器上吧~不是这么判断的~应该是这样

1
2
3
4
5
6
7
8
9
10
11
12
 $(window).scroll(function(){
        vara=$(list).offset().top
        varb=$(document).scrollTop() nav_height
        varc=a-b
        if(c<=0&&c>=-div_height){
          console.log("OK")
          alert("OK")
        }
        else{
          returnfalse
        }
      })

请问jquery怎么获取单个元素啊?

// 直接获取第一个元素
$(div:first)
$(div:eq(0))
// 结果中获取第一个元素
$(div).eq(0) // 返回jquery对象
$(div)[0] // 返回dom element

jquery怎么判断一个元素是否存在?

以下两种方式都可以判断html文档是否存在相关元素:
1. if($("#abc").length >0) { ... }
2. if($("#abc").html() != "") { ... }

1. jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。
2. jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
3. 由于目前高校基本尚未开JavaScript的相关课程,目前jQuery的学习,使用,研究都仅限于在职Web程序员之间。

最新文章