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 相关文章推荐
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
Javascript动画效果(1)
Oct 11 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
基于react项目打包css引用路径错误解决方案
Oct 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 win下Socket方式发邮件类
2009/08/21 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
python得到单词模式的示例
2018/10/15 Python
pycharm配置git(图文教程)
2019/08/16 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python反转列表的三种方式解析
2019/11/08 Python
Python 解析简单的XML数据
2020/07/24 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
护理职业应聘自荐书
2013/09/29 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
管理专员自荐信
2014/01/26 职场文书
公司接待方案
2014/03/08 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
大型营销活动计划书
2014/04/28 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
工程技术员岗位职责
2015/04/11 职场文书
结婚纪念日感言
2015/08/01 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技