首页 > 其他分享 >jQuery中(prev + next) 和 (prev ~ siblings)的不同点。

jQuery中(prev + next) 和 (prev ~ siblings)的不同点。

时间:2023-07-08 21:35:12浏览次数:49  
标签:jQuery span height sibling siblings div prev


jQuery中(prev + next) 和 (prev ~ siblings)的不同点。

 

 

 

<!DOCTYPE html>
 <html>
 <head>
   <style>

   div,span {
     display:block;
     width:80px;
     height:80px;
     margin:5px;
     background:#bbffaa;
     float:left;
     font-size:14px;
   }
   div#small {
     width:60px;
     height:25px;
     font-size:12px;
     background:#fab;
   }
   </style>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 </head>
 <body>
   <div>div (doesn't match since before #prev)</div>
   <span id="prev">span#prev</span>

   <div>div sibling</div>

   <div>div sibling <div id="small">div niece</div></div>
   <span>span sibling (not div)</span>
   <div>div sibling</div>

<script> 
 //   ~  代表id"prem"后面的div都要变  
 $("#prev ~ div").css("border", "3px groove blue"); 
 //  +  代表id"prev"后面的第一个div要变 
 $("#prev + div").css("border", "3px groove blue"); 
 </script> 

 </body>
 </html>

标签:jQuery,span,height,sibling,siblings,div,prev
From: https://blog.51cto.com/u_16179085/6663475

相关文章

  • jQuery 学习列表
    jQuery  学习列表 1、EventsPageLoad$.ready(fn() )SpecifyafunctiontoexecutewhentheDOMisfullyloaded. 2、SelectorsBasics#idSelectsasingleelementwiththegivenidattribute.eleme......
  • jQuery 中 .eq( index ) 的用法
    1、jQuery 中.eq(index) 的用法 :运行下面的例子及明白了。  <!DOCTYPEhtml><html><head><style>div{width:60px;height:60px;margin:10px;float:left;border:2pxsolidblue;}.blue{background:blue;}</style><scr......
  • jquery 设计思想
    jQuery设计思想原文网址:http://jqfundamentals.com/book/阮一峰翻译整理【目录】一、选择网页元素二、改变结果集三、链式操作四、元素的操作:取值和赋值五、元素的操作:移动六、元素的操作:复制、删除和创建七、工具方法八、事件操......
  • jQuery简单介绍与用法
    jQuery简单介绍与用法 一、jQuery简介1.简化DOM操作:jQuery提供了简单而强大的选择器,可以轻松地选取HTML元素,并对其进行操作。通过使用jQuery的方法,可以轻松地操纵元素的属性、样式、内容等。2.事件处理:jQuery简化了事件处理的过程。可以使用jQuery的事件绑定方......
  • 【17.0】前端基础jQuery之jQuery补充
    【17.0】前端基础jQuery之jQuery补充【一】组织标签后续执行方式一<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jque......
  • 【14.0】前端基础jQuery之引入
    【14.0】前端基础jQuery之引入【一】什么是jQueryjQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Writeless,domore.“jQuery......
  • Jquery操作元素的属性和css
    <buttonid="problem_chart_search"type="confirm"style="margin:03em;color:#fff;font-size:.75em;padding:2px10px;">搜索</button>//1、改属性$('#problem_chart_search').attr("disabled","disa......
  • 15个友好的jQuery 提示框插件
    需要在用户把光标移到某个元素上时显示一些额外信息时,提示框是一种不错的方式,提示框会在鼠标停留的时候显示,鼠标移开时消失。 适当的使用提示框能大大提升网站的友好度,并且可以节省一些不必要的网页空间,今天我们将看到15款制作友好的提示框的jQuery插件。 1.qTipqTip是一款功能......
  • 10 个 jQuery 动态效果
    Whatevercontentyouhavetopresent,youcanpresenttheminamoreinteractive&moreresponsiveways.Inthisarticlewe’dliketopresent10BrillianttechniquesusingsomejQuerymagictograbtheattentionofyouruserswithasimple,richuser......
  • jQuery 事件对象
    1.1.jQuery事件注册​ jQuery为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下:优点:操作简单,且不用担心事件覆盖等问题。缺点:普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。语法//语法element.事件名称(function()({})//点击事件......