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 学习笔记之语句
Jan 14 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP 金额数字转换成英文
2010/05/06 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
使用javascript做的一个随机点名程序
2014/02/13 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Python 开发Activex组件方法
2009/11/08 Python
Python常见文件操作的函数示例代码
2011/11/15 Python
python中遍历文件的3个方法
2014/09/02 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python实现ID3决策树算法
2017/12/20 Python
python3爬取数据至mysql的方法
2018/06/26 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
荷兰手表网站:Watch2Day
2018/07/02 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
酒店人事专员岗位职责
2015/04/07 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
企业宣传语大全
2015/07/13 职场文书
技术入股合作协议书
2016/03/21 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP