jQuery prev ~ siblings选择器使用介绍


Posted in Javascript onAugust 09, 2013

1、prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素
2、
(1)prev:任何有效选择器
(2)siblings:一个选择器,并且它作为第一个选择器的同辈
3、示例
(1)源码
siblings.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>prev ~ siblings选择器</title> 
<script type="text/javascript" src="jquery-2.0.3.js"></script> 
<style type="text/css"> 
body{ 
width:100%; 
height:100%; 
font-size:18px; 
color:#00FF00; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
//匹配所有元素 
$("*").css("background-color","#FFE4E1"); 
//prev ~ siblings选择器运用 
$("label ~ input").css("font-size","30px"); 
//点击事件,prev ~ siblings选择器运用 
$("#pwd").click(function(){ 
alert("我被选中!"); 
}); }); 
</script> 
</head> 
<body> 
<form id="form_body"> 
<label class="username">用户名:</label> 
<input type="text" id="username" name="username"/> 
<label class="password">密 码:</label> 
<input type="password" id="password" name="password"/> 
<input type="button" id="login" name="login" value="登录"/> 
<input type="reset" id="reset" name="reset" value="重置"/> 
<input type="checkbox" id="pwd" name="pwd"/>记住密码 
</form> 
</body> 
</html>

(2)显示结果如下
jQuery prev ~ siblings选择器使用介绍
Javascript 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
js回调函数仿360开机
Dec 26 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 #Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 #Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 #Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 #Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 #Javascript
jquery 实现上下滚动效果示例代码
Aug 09 #Javascript
15条JavaScript最佳实践小结
Aug 09 #Javascript
You might like
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
js中数组Array的一些常用方法总结
2013/08/12 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
javascript自执行函数
2017/02/10 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
opencv python 傅里叶变换的使用
2018/07/21 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python多进程编程常用方法解析
2020/03/26 Python
幼儿园大班家长评语
2014/04/17 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
廉政承诺书2015
2015/04/28 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Python中requests做接口测试的方法
2021/05/30 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python