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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
Symfony的安装和配置方法
2016/03/17 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
无阻塞加载脚本分析[全]
2011/01/20 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
AURALog面试题软件测试方面
2013/10/22 面试题
创意活动策划书
2014/01/15 职场文书
人事代理委托书
2014/09/27 职场文书
工厂标语大全
2014/10/06 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python