jquery/js特效代码总结(一):tab切换
jQuery 的选择器可谓之强大无比,常用的元素查找方法:
$("#myELement") //选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") //选择所有的div标签元素,返回div元素数组
$(".myClass") //选择使用myClass类的css的所有元素
$("*") //选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
层叠选择器
$("form input")
选择所有的form元素中的input元素$("#main > *")
选择id值为main的所有的子元素$("label + input")
选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev ~ div")
同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器
$("tr:first")
选择所有tr元素的第一个$("tr:last")
选择所有tr元素的最后一个
$("input:not(:checked) + span") //过滤掉:checked的选择器的所有的input元素
$("tr:even")
选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)$("tr:odd")
选择所有的tr元素的第1,3,5... ...个元素$("td:eq(2)")
选择所有的td元素中序号为2的那个td元素$("td:gt(4)")
选择td元素中序号大于4的所有td元素$("td:ll(4)")
选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器
$("div:contains('John')")
选择所有div中含有John文本的元素$("td:empty")
选择所有的为空(也不包括文本节点)的td元素的数组$("div:has(p)")
选择所有含有p标签的div元素$("td:parent")
选择所有的以td为父节点的元素数组
可视化过滤选择器
$("div:hidden")
选择所有的被hidden的div元素$("div:visible")
选择所有的可视化的div元素
属性过滤选择器
$("div[id]")
选择所有含有id属性的div元素$("input[name='newsletter']")
选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']")
选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']")
选择所有的name属性以'news'开头的input元素$("input[name$='news']")
选择所有的name属性以'news'结尾的input元素$("input[name*='news']")
选择所有的name属性包含'news'的input元素$("input[id][name$='news']")
可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以news结尾的元素
子元素过滤选择器
$("ul li:nth-child(2)")
,$("ul li:nth-child(odd)")
,$("ul li:nth-child(3n + 1)")
$("div span:first-child")
返回所有的div元素的第一个子节点的数组$("div span:last-child")
返回所有的div元素的最后一个节点的数组$("div button:only-child")
返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器
$(":input")
选择所有的表单输入元素,包括input, textarea, select 和 button$(":text")
选择所有的text input元素$(":password")
选择所有的password input元素$(":radio")
选择所有的radio input元素$(":checkbox")
选择所有的checkbox input元素$(":submit")
选择所有的submit input元素$(":image")
选择所有的image input元素$(":reset")
选择所有的reset input元素$(":button")
选择所有的button input元素$(":file")
选择所有的file input元素$(":hidden")
选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器
$(":enabled")
选择所有的可操作的表单元素$(":disabled")
选择所有的不可操作的表单元素$(":checked")
选择所有的被checked的表单元素$("select option:selected")
选择所有的select 的子元素中被selected的元素
例:$("A B")
查找A元素下面的所有子节点,包括非直接子节点$("A>B")
查找A元素下面的直接子节点$("A+B")
查找A元素后面的兄弟节点,包括非直接子节点$("A~B")
查找A元素后面的兄弟节点,不包括非直接子节点
例子
例子1:找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:[ <input name="name" />, <input name="newsletter" /> ]
例子2:匹配表单中所有的子级input元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:[ <input name="name" /> ]
例子3:匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:[ <input name="name" />, <input name="newsletter" /> ]
例子4:找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:[ <input name="none" /> ]
jquery/js特效代码总结(一):tab切换的更多相关文章
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- js鼠标点击版tab切换
代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...
- 分时段显示不同的提示的网页JS特效代码
脚本说明: 把如下代码加入body区域中 <SCRIPT> today=new Date(); var day; var date; var hello; var wel; hour=ne ...
- js特效代码-onmouseover/onclick 改变标签(背景)颜色
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- JS实现转动随机数抽奖的特效代码
JS实现转动随机数抽奖的特效代码 大家都玩过抽奖游戏,或者梦想抽到大奖吧.可是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码例如以下 <!Doct ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
- 小程序的tab切换事件
index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...
- 一款兼容pc 移动端的tab切换
利用touchslider.js插件来制作的tab切换,可任意修改很方便~~~ 样式: <style> .box-163css{ width:100%; position:relative ...
随机推荐
- php学习笔记:自定义函数的调用
PHP内置了超过1000个函数,因此函数使得PHP成为一门非常强大的语言.大多数时候我们使用系统的内置函数就可以满足需求,但是自定义函数通过将一组代码封装起来,使代码进行复用,程序结构与逻辑更加清晰. ...
- linux 下 整合 nginx 和 php
一.整合nginx 和 PHP: # vi /usr/local/php/etc/php-fpm.conf 如果该文件不存在,有可能是默认的php-fpm.conf.default 可以使用命令拷贝一 ...
- j2ee log4j集中式日志解决方案logpool v0.3
V0.3相对于v0.2的更新如下:
- java微信开发(wechat4j)——支持微信JS-SDK的jsapi_ticket中控服务器
jsapi_ticket是使用js-sdk必须要的一个凭证,需要配置在js中. jsapi_ticket获取 要获取jsapi_ticket可以使用如下的方法 String jsapi_ticket ...
- [Angularjs]视图和路由(四)
写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
- chenxi的html学习笔记
0.本文主体源自:http://www.cnblogs.com/coco1s/p/4034937.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.1.浏览器内核: 1.ie:triden ...
- 【转载】菜鸟Ubuntu下安装Android Studio
原文:http://forum.android-studio.org/forum.php?mod=viewthread&tid=236&extra=page%3D1%26filter% ...
- C语言-04-函数
函数 函数是一组一起执行任务的语句,函数是一个可执行C程序必不可少的条件(至少一个main()函数),函数的定义形式 returnType functionName() { bodyOf of the ...
- IOS之未解问题--给UITableView提取UITableViewDataSource并封装瘦身失败
前言:阅读了<更轻量的 View Controllers>,发现笔者这个优化重构代码的想法真的很不错,可以使得抽取的UITableViewDataSource独立写在一个类文件里,并且也写 ...
- android 进程/线程管理(四)----消息机制的思考(自定义消息机制)
关于android消息机制 已经写了3篇文章了,想要结束这个系列,总觉得少了点什么? 于是我就在想,android为什么要这个设计消息机制,使用消息机制是现在操作系统基本都会有的特点. 可是andro ...