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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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连接操作access数据库实例
2015/03/30 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
理解javascript中的闭包
2017/01/11 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
大学英语专业求职信
2014/06/21 职场文书
企业员工集体活动方案
2014/08/17 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js