jquery中siblings方法配合什么方法一起使用
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。接下来通过本文给大家介绍jQuery siblings()用法实例详解,需要的朋友参考下吧
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
jQuery 的遍历方法siblings()
$( "给定元素" ).siblings( ".selected" ) |
其作用是筛选给定的同胞同类元素(不包括给定元素本身)
例子:网页选项栏
当点击任意一个选项卡是,其他2个选项卡就会改变样式,其内容也会隐藏。
下面是html代码。
<body> <ul id= "menu" > <li class= "tabFocus" >家居</li> <li>电器</li> <li>二手</li> </ul> <ul id= "content" > <li class= "conFocus" >我是家居的内容</li> <li>欢迎您来到电器城</li> <li>二手市场,产品丰富多彩</li> </ul> </body> |
jQuery代码
<script type= "text/javascript" > $( function () { $( "#menu li" ).each( function (index) { //带参数遍历各个选项卡 $( this ).click( function () { //注册每个选卡的单击事件 $( "#menu li.tabFocus" ).removeClass( "tabFocus" ); //移除已选中的样式 $( this ).addClass( "tabFocus" ); //增加当前选中项的样式 //显示选项卡对应的内容并隐藏未被选中的内容 $( "#content li:eq(" + index + ")" ).show() .siblings().hide(); //#menu与#content在html层没有嵌套关联,但因为其ul序列相同,用index值可以巧妙的将两者关联。 }); }); }) </script> |
其中
当点击相应的选项卡后,被点击的选项卡内容就会被show()。而其他2个同胞元素<li>选项卡用silibings()筛选出来hide()掉。
这样就能动态的显示点击区域的内容,而隐藏掉另外2个选项卡了。
而
$( "给定元素" ).siblings( ".selected" ) |
中的(".selected")表示筛选给定元素类名为.selected的同胞元素(不包括给定元素自己)
jquery中siblings方法配合什么方法一起使用的更多相关文章
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...
- jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强)
jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- jquery中prop()方法和attr()方法的区别浅析
官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢 jquery1.6中新加了一个方法pr ...
- jquery中prop()方法和attr()方法的区别
最近在用jquery的时候遇到一个问题,那就是attr()方法,发现这个方法有时候使用会有一些说不出原因的问题.翻翻自己之前笔记发现,还有个函数prop(). 这两个函数都可以用来获取属性. jque ...
随机推荐
- js基础系列之【作用域】
声明:形成本文的出发点仅仅是个人总结记录,避免遗忘,并非详实的教程:文中引用了经过个人加工的其它作者的内容,并非原创.学海无涯 什么是作用域? 作用域就是一套规则,用于确定在何处以及如何查找变量(标识 ...
- synchronized和lock以及synchronized和volatile的区别
synchronized和volatile区别synochronizd和volatile关键字区别: 1. volatile关键字解决的是变量在多个线程之间的可见性:而sychronized关键字解决 ...
- git 在本地拉取远程分支的代码(并不做提交操作)
1. git fetch 获取远程的所有分支 2. 在执行 git checkout -b local-branch-name origin/remote-branch 就可以将远程分支remote ...
- BZOJ 4584 luogu P3643: [Apio2016]赛艇
4584: [Apio2016]赛艇 Time Limit: 70 Sec Memory Limit: 256 MB[Submit][Status][Discuss] Description 在首尔 ...
- android 开发 View _9_ 实现渐变功能(直线与圆形)
参考博客:https://blog.csdn.net/iispring/article/details/50500106/ android颜色渐变的分类有: LinearGradient线性渐变 线性 ...
- Django多个中间件的执行顺序
Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django框架的健 ...
- C# 委托和泛型
委托定义: 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法,可以避免在程序中大量使用If-Else(Switch)语句,同时使得程序具有 ...
- 操作系统切换CPU的方式
操作系统切换CPU的方式 1 IO等待切换. 2 时间轮询切换,也就是如果没有IO等待的情况下,就会有时间轮询切换,不让CPU一直处理一个任务 CPU的处理速度是纳秒级别的,所有我们可以同时听歌, ...
- oralce 中union 和union all 的简单使用说明
union:对两个结果集进行合并操作:不包括重复行:同时进行默认规则的排序: union all:对两个结果集进行合并操作:包括重复行:不排序:
- centos7-内核版本降级
1. 查看内核版本参考命令: [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) [roo ...