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停止输出代码
Jul 20 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
TypeScript 中接口详解
Jun 19 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
js实现移动端轮播图滑动切换
Dec 21 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 foreach正序倒序输出示例代码
2014/07/01 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
angular2使用简单介绍
2016/03/01 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python 列表list使用介绍
2014/11/30 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python中Apriori算法实现讲解
2017/12/10 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
受欢迎的大学生自我评价
2013/12/05 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
物业管理工作方案
2014/05/10 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书