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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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统计字符串中中英文字符的个数
2013/06/23 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python 获取项目根路径的代码
2019/09/27 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
2014年女职工工作总结
2014/11/27 职场文书
小学生交通安全寄语
2015/02/27 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
外出学习心得体会范文
2016/01/18 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL