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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
Python的信号库Blinker用法详解
2020/12/31 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
大学新生军训个人的自我评价
2013/10/03 职场文书
顶岗实习计划书
2014/01/10 职场文书
民事二审代理词
2015/05/25 职场文书
雷锋的故事观后感
2015/06/10 职场文书
红色经典观后感
2015/06/18 职场文书