zoukankan      html  css  js  c++  java
  • prev ~ siblings选择器(jQuery)

    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{
          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)显示结果如下



  • 相关阅读:
    AdvDataList分页 例码
    问一个关于生成静态页面的问题
    使用XMLDataSource简单实现多级下拉菜单
    简单的封装一个HTML 弹出对话框的空间
    JS 语言强大, 动态修改标准库
    Eclipse IDE 学习
    分布式程序的开发
    Http request Post pk Put
    Forward: X Forwarding with Putty on Windows
    转载: 颠覆了对于design 的认识
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315733.html
Copyright © 2011-2022 走看看