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自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
ES6中的类(Class)示例详解
Dec 09 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
js自定义回调函数
2015/12/13 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
python人人网登录应用实例
2014/09/26 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Django重设Admin密码过程解析
2020/02/10 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Python接收手机短信的代码整理
2020/08/02 Python
python破解同事的压缩包密码
2020/10/14 Python
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
转党组织关系介绍信
2014/01/08 职场文书
函授自我鉴定范文
2014/02/06 职场文书
员工培训协议书
2014/09/15 职场文书
教师求职信怎么写
2015/03/20 职场文书
如何用python插入独创性声明
2021/03/31 Python