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 面向对象编程基础 多态
Aug 21 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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
如何将数据从文本导入到mysql
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php smarty函数扩展
2010/03/15 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
用python实现的线程池实例代码
2018/01/06 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
幼儿园大班评语大全
2014/04/17 职场文书
网络营销策划方案
2014/06/04 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL