zoukankan      html  css  js  c++  java
  • JQuery[06] 过滤器、相对选择器

    $(a,b) 第二个参数传递一个JQuery对象、则以该对象为容器查找指定元素

    -

    属性过滤器

    -

    $("div[id]") 选择有ID属性的DIV元素

    $("div[name=test]")  选择name为test的div元素(效果可以做到与原生的getElementsByName效果)

    $("div[name!=test]")  选择name不为test的div元素

    -

    表单对象选择器

    $("#form1:enabled") 选择id为form1的表单内所有启用的

    $("#form1:disabled") 选择id为form1的表单内所有禁用的

    $("input:checked") 选择所有选中的元素(还可以是radio,checkbox)

    $("select:selected") 选择所有选中的元色素

    -

     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 $(function () {
    8 //表格赋值
    9 $("td").each(function (item) {
    10 $(this).text("文本" + item);
    11 });
    12
    13 //实现高亮鼠标指向行的单元格(是单元格、不是行高亮)
    14 $("#tb1 tr").mouseenter(function () {
    15 $("td", $(this)).css("background-color", "red");
    16 }).mouseleave(function () {
    17 $("td", $(this)).css("background-color", "white");
    18 });
    19
    20 /*******************************************************/
    21
    22 $("#btn1").click(function () {
    23 //选择拥有id属性的p元素
    24 $("p[id]").css("background", "red");
    25 });
    26
    27 $("#btn2").click(function () {
    28 //只选择name为d3、没有对元素类型做选择
    29 $("[name=d3]").css("background", "green");
    30 });
    31
    32 $("#btn3").click(function () {
    33 //选择name不为d3的p元素
    34 $("p[name!=d3]").css("background", "blue");
    35 });
    36
    37 /*************************************************/
    38 $("#frm1 input[type=button]").click(function () {
    39 alert("你选择了 " + $("input:checked[name=sex]").val());
    40 });
    41 });
    42 </script>
    43 </head>
    44 <body>
    45 <table id="tb1">
    46 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    47 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    48 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    49 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    50 <tr><td></td><td></td><td></td><td></td><td></td></tr>
    51 </table>
    52 <br /><br />
    53 <p id="d1">文本文本文本文本文本文本</p>
    54 <p id="d2">字体字体字体字体字体字体</p>
    55 <p name="d3">字号字号字号字号字号字号</p>
    56
    57 <br /><br />
    58 <input id="btn1" type="button" value="选择有id属性的" />
    59 <input id="btn2" type="button" value="选择指定name的" />
    60 <input id="btn3" type="button" value="选择不是指定name的" />
    61
    62 <form id="frm1" action="">
    63 <input type="radio" value="男" checked="checked" name="sex" /><br />
    64 <input type="radio" value="女" name="sex" /><br />
    65 <input type="button" value="提交" />
    66 </form>
    67 </body>
    68 </html>

      

    My New Blog : http://blog.fdlife.info/ The more you know, the less you believe.
  • 相关阅读:
    【转】Linux Nginx负载均衡【精】
    网上找的模拟POST提交上传图片类
    (原)二、CentOS Linux 下配制Nginx实现简单的负载均衡配置
    (原)一、CenOS Linux安装nginx
    IOS上传图片方法类
    Objectivec和Java下DES加密解密保持一致
    ubuntu 10.10下面添加samba实现和windows共享文件
    几道位移运算题
    jQuery event(下)
    jQuery ajax —— Baidu ajax
  • 原文地址:https://www.cnblogs.com/ForDream/p/2131718.html
Copyright © 2011-2022 走看看