zoukankan      html  css  js  c++  java
  • JQuery[03] 选择器

    id选择器:

    $("#对象ID")

    标签选择器:

    $("标签名")

    CSS选择器

    $(".class名")

    多条件选择器

    $(p,div,input.abc) 选择所有p,div以及classname="abc"的input对象

    层次选择器

    $("ol li") 选择ol对象下所有的li对象(包括子对象以及子对象的子对象)

    $("ol > li") 选择ol下直接的li对象、即子对象的子对象不会被选择

    以下演示代码Chrome、IE9测试结果一致
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title>选择器</title>
    5 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    6 <script type="text/javascript">
    7 $(document).ready(function () {
    8 //标签选择器、为所有p标签添加文本
    9 $("p").each(function (item) {
    10 $(this).text("文本" + item);
    11 });
    12
    13 //id选择器,单击此p标签弹出文本提示
    14 $("#pTag").click(function () {
    15 alert($(this).text());
    16 });
    17
    18 //css选择器
    19 $(".redColor").click(function () {
    20 alert("通过css选择器进行的事件绑定");
    21 });
    22
    23 //多条件选择器,选择所有input标签和class为redColor的span标签
    24 //text用来修改span标签、input没有innerText属性、修改其value属性
    25 $("input,span.redColor").text("多条件选择器").val("多条件选择器");
    26
    27 //层次选择器
    28 $("#test1 li").css("color", "red");
    29 //为了防止css属性的继承、先把所有文字刷成绿色
    30 $("#test2 li").css("color", "green");
    31 $("#test2 > li").css("color", "blue");
    32 });
    33 </script>
    34
    35 <style type="text/css">
    36 .redColor
    37 {
    38 background-color:Black;
    39 color:Red;
    40 }
    41 </style>
    42 </head>
    43 <body>
    44 <p class="redColor"></p>
    45 <p id="pTag"></p>
    46 <p></p>
    47 <p></p>
    48 <p></p>
    49 <p></p>
    50 <p></p>
    51 <p></p>
    52 <input type="button" value="btn1" />
    53 <input type="button" value="btn2" />
    54 <input type="button" value="btn3" />
    55 <input type="button" value="btn4" />
    56 <span class="redColor">span1</span>
    57 <span>span2</span>
    58 <span>span3</span>
    59 <span>span4</span>
    60 <span>span5</span>
    61
    62 <ul id="test1">
    63 <li>经理</li>
    64 <li>人事部</li>
    65 <li>营销部</li>
    66 <li>广告部</li>
    67 </ul>
    68
    69 <ul id="test2">
    70 <li>经理</li>
    71 <li>人事部</li>
    72 <li>营销部</li>
    73 <li>
    74 广告部
    75 <ul>
    76 <li>小张</li>
    77 <li>小李</li>
    78 <li>小王</li>
    79 </ul>
    80 </li>
    81 </ul>
    82 </body>
    83 </html>

      

    My New Blog : http://blog.fdlife.info/ The more you know, the less you believe.
  • 相关阅读:
    2021/4/6
    2021/4/5
    2021/4/2
    2021/4/1
    2021/3/31
    2021/3/30
    2021/3/29重构
    总结
    js 座机正则
    uni-app 条件编译
  • 原文地址:https://www.cnblogs.com/ForDream/p/2130546.html
Copyright © 2011-2022 走看看