zoukankan      html  css  js  c++  java
  • jQuery中的并集、交集、全局、后代、子、同辈、属性选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>jQuery中的并集、交集、全局、后代、子、同辈、属性选择器</title>
            <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    //并集选择器。使用“,”区分开
                    $("th,td").css("border", "blue double 3px");
                    //交集选择器。直接把多个选择器连接在一起
                    //$("input.txtBox#userName").css("border", "black none 0px").css("background-color", "lightgreen");
                    $("input.txtBox").css("border", "black none 0px").css("background-color", "lightgreen");
                    //全局选择器。使用"*"表示选择页面上所有的元素
                    $("*").css("font", "微软雅黑").css("font-size", "11pt");
                    //网站上常用的字体:
                    //正文:宋体9pt,宋体10pt
                    //标题:微软雅黑10pt,微软雅黑11pt
                    //后代选择器。选择的是子元素,使用“ ”(空格)隔开
                    $("tr th").css("background-color", "lightcyan");
                    //子选择器。选择的是子元素,使用“>”隔开
                    $("tr>th").css("background-color", "lightcyan");
                    //相邻选择器。选择的是相邻的一个元素,使用“+”隔开
                    $("#item1+li").css("color", "green");
                    //同辈选择器。选择的是同一级别的元素,使用“~”隔开
                    $("#item1+li~li").css("font-weight", "bold");
                    //属性选择器。
                    $("input[type='submit']").css("background-color", "red").css("color", "white");
                    $("[id^='user']").css("font-size","20pt");
                });
            </script>
        </head>

        <body>
            <table border="0" cellspacing="2" cellpadding="0">
                <tr>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                </tr>
                <tr>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                    <td>Data</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                        帐号:
                    </td>
                    <td>
                        <input type="text" class="txtBox" id="userName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        密码:
                    </td>
                    <td>
                        <input type="password" class="txtBox" id="userPass" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="登录" />
                    </td>
                </tr>
            </table>

            <ul type="none">
                <li id="item1">项目一</li>
                <li>项目二</li>
                <li>项目三</li>
                <li>项目四</li>
                <li>项目五</li>
            </ul>
        </body>

    </html>

  • 相关阅读:
    Window安装Redis并设置为开机启动
    大佬为你揭秘微信支付的系统架构,你想知道的都在这里了
    想要设计自己的微服务?看这篇文章就对了
    破局人工智能:构建AI,与腾讯云一起探索语音应用场景
    巧用机器学习定位云服务器故障
    重磅发布 | 黑镜调查:深渊背后的真相之「DDoS 威胁与黑灰产业调查报告」
    5分钟内看懂机器学习和深度学习的区别
    如何防范和应对Redis勒索,腾讯云教你出招
    Redis勒索事件爆发,如何避免从删库到跑路?
    作为一个编程新手,我再也不怕Flink迷了我的眼!
  • 原文地址:https://www.cnblogs.com/zhouguoshuai/p/8192167.html
Copyright © 2011-2022 走看看