• jQuery基本选择器 (实例及表单域 value 的获取)


    jQuery基本选择器包括 CSS选择器、层级选择器和、表单域选择器。

    1.CSS选择器

    (1)标签选择器

      $("div")  $("p")  $("table") 等一系列 HTML 标签

    (2)ID选择器

      <input id="user" type="text">

      获取该标记的值:$("#user").val();

    (3)类选择器

      <input type="text" class="t">

      给该文本框添加样式:$(".t").css("border","2px solid blue");

    (4)通用选择器

      $("*").css("color","red"); //给所有元素设置样式

    (5)群组选择器

      $("div,span,p .styleClass").css("border","1px solid red"); //对所有div、span 及应用 styleClass 类的 p 元素设置边框属性

    2.层级选择器

    (1)子元素选择器

      $("parent > child");

      查找父元素下面的所有子元素,不包括孙元素等。

    (2)后代元素选择器

      $("ancestor descedant");

      查找 ancestor 元素的所有子元素、孙元素、重孙元素等。

    (3)紧邻同辈元素选择器

      $("prev+next");

      同辈,且紧跟在 prev 元素后面的元素 next 元素

    (4)相邻同辈元素选择器

      $("prev~siblings");

      跟在 prev 后且同辈的所有 siblings 元素

    3.表单域选择器

    (1) :input 选择器

      $(":input");

      选择所有 input, textarea, select, button 元素。

    (2) :text 选择器

      $(":text");

      选择所有单行文本框 (<input type="text"/>).

    (3) :password 选择器

      $(":password");

      选择所有密码框 (<input type="password"/>).

    (4) :radio 选择器

      $(":radio");

      选择所有单选按钮 (<input type="radio"/>).

    (5) :checkbox 选择器

      $(":checkbox");

      选择所有复选框 (<input type="checkbox"/>).

    (6) :file 选择器

      $(":file");

      选择所有文件域 (<input type="file"/>).

    (7) :iamge 选择器

      $(":iamge");

      选择所有图像域 (<input type="iamge"/>).

    (8) :hidden 选择器

      $(":hidden");

      选择所有隐藏域 (<input type="hidden"/>) 及 所有不可见元素(CSS display 属性值为 none)。

    (9) :button 选择器

      $(":button");

      选择所有按钮 (<input type="button"/>) 和 <button>...</button>

    (10) :submit 选择器

      $(":submit");

      选择所有提交按钮 (<input type="submit"/>) 和 <button>...</button>

    (11) :reset 选择器

      $(":reset");

      选择所有重置按钮 (<input type="reset"/>) 和 <button>...</button>

    对于表单域选择器,上述均为获取所有某一类型的元素。获取其中某个元素的值,在下面的实例中体现。该实例的运行效果图和代码如下:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
     6     <title>表单域选择器应用示例</title>
     7     <script language="javascript" type="text/javascript">
     8         $(document).ready(function(){
     9                $(":text").attr("value","文本框");     //给文本框添加文本
    10                $(":password").attr("value","密码框"); //给密码框添加文本
    11                $(":radio:eq(1)").attr("checked","true");    //将第2个单选按钮设置为选中
    12                $(":checkbox").attr("checked","true");       //将复选框全部选中
    13               $(":image").attr("src","wedding.jpg"); //给图像指定路径
    14               $(":file").css("width","200px");             //给文件域设置宽度
    15                $(":hidden").attr("value","已保存的值");      //给隐藏域添加文本
    16                $("select").css("background","#FCF");          //给下拉列表设置背景色
    17                $(":submit").attr("id","btn1");                //给提交按钮添加id属性
    18                $(":reset").attr("name","btn");                //给重置按钮添加name属性
    19                $("textarea").attr("value","文本区域");         //给文本区域添加文字 
    20            });
    21            function submitBtn(){
    22                //下面两个语句用来获取复选框选中的所有值
    23                var checkbox = "";
    24                $(":checkbox[name='hate'][checked]").each(function(){
    25                    checkbox += $(this).val() + " ";
    26                });
    27                alert($(":text").val()+"\n"
    28                 +$(":password").val()+"\n"
    29                 +$(":radio[name='habbit'][checked]").val()+"\n"
    30                 +checkbox+"\n"
    31                 +$(":file").val()+"\n"    //获得所选文件的绝对路径
    32                 +$(":hidden[name='hiddenarea']").val()+"\n"
    33                 +$("select[name='selectlist'] option[selected]").text()+"\n"
    34                 +$("textarea").val()+"\n"
    35             );
    36            }
    37 
    38     </script>
    39 </head>
    40 
    41 <body>
    42 <table width="730" height="145" border="1">
    43   <tr>
    44     <td width="113" height="23">文本框</td>
    45     <td width="209"><input type="text"/></td>
    46     <td width="93">密码框</td>
    47     <td width="287"><input type="password" /></td>
    48   </tr>
    49   <tr>
    50     <td height="24">单选按钮</td>
    51     <td>
    52         <input type="radio" name="habbit" value="是"/>53         <input type="radio" name="habbit" value="否"/>54     </td>
    55     <td>复选框</td>
    56     <td>
    57         <input type="checkbox" name="hate" value="水果"/>水果
    58         <input type="checkbox" name="hate" value="蔬菜"/>蔬菜
    59     </td>
    60   </tr>
    61   <tr>
    62     <td height="50">图像</td>
    63     <td><input type="image" width="50" height="50"/></td>
    64     <td>文件域</td>
    65     <td><input type="file" /></td>
    66   </tr>
    67   <tr>
    68     <td height="23">隐藏域</td>
    69     <td><input type="hidden" name="hiddenarea"/>(不可见)</td>
    70     <td>下拉列表</td>
    71     <td>
    72         <select name="selectlist">
    73             <option value="选项一">选项一</option>
    74             <option value="选项二" >选项二</option>
    75             <option value="选项三">选项三</option>
    76         </select>
    77     </td>
    78   </tr>
    79   <tr>
    80     <td height="25">提交按钮</td>
    81     <td><input type="submit" onclick="submitBtn()"/></td>
    82     <td>重置按钮</td>
    83     <td><input type="reset" /></td>
    84   </tr>
    85   <tr>
    86      <td valign="top">文本区域:</td>
    87      <td colspan="3"><textarea cols="70" rows="3"></textarea></td>
    88   </tr>
    89 </table>
    90 
    91 </body>
    92 </html>

    点击【提交】按钮之后弹出的对话框如下:

  • 相关阅读:
    Android学习 反编译APK文件
    全面剖析C#之String对象
    Retrieving the COM class factory for component with CLSID {0006F03A00000000C000000000000046} failed due to the following error: 80080005
    面向对象的函数式编程语言Scala 简介安装
    Export/Import相关操作
    Windows Server 2008 R2(64位)下安装SQL Server 2005
    C#操作FTP总结
    Windows Server 2008 R2(64位)下IIS7.5操作
    Quartz.Net 学习随手记之01 初步介绍
    差分约束系统
  • 原文地址:https://www.cnblogs.com/lihuiyy/p/2577754.html
Copyright © 2020-2023  润新知