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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
JS实现可控制的进度条
Mar 25 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
深入理解python try异常处理机制
2016/06/01 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python获取中文字符串长度的方法
2018/11/14 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
自我评价个人范文
2013/12/16 职场文书
毕业生自荐书
2013/12/18 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技