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 相关文章推荐
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
js轮播图之旋转木马效果
Oct 13 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
Dedecms常用函数解析
2008/02/01 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php统计文章排行示例
2014/03/04 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python日志记录模块实例及改进
2017/02/12 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python如何实现代码检查
2019/06/28 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python脚本后台执行方式
2019/12/21 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Django操作session 的方法
2020/03/09 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书