正如标题所言其所用为匹配 prev 元素之后的所有 siblings 元素,下面为大家分享个示例,不了解的朋友可以学习下
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)显示结果如下
Atas ialah kandungan terperinci jQuery中prev ~ siblings选择器使用介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!