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 24 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Express框架之connect-flash详解
May 31 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
React如何避免重渲染
Apr 10 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
浅析JavaScript 函数柯里化
Sep 08 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
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
面包屑导航详解
2017/12/07 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python中的index()方法使用教程
2015/05/18 Python
python中管道用法入门实例
2015/06/04 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python wsgiref源码解析
2021/02/06 Python
优秀的茶餐厅创业计划书
2014/01/03 职场文书
迎新晚会主持词
2014/03/24 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
大学生见习总结报告
2015/06/24 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
使用Python解决图表与画布的间距问题
2022/04/11 Python