正如標題所言其所用為匹配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)顯示結果如下
以上是jQuery中prev ~ siblings選擇器使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!