[php学习十六]JQuery练习1－选择器_练习1:选择器练习-CSDN博客

本文链接：https://blog.csdn.net/liyanq528/article/details/52078591
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery随便练习1</title>
    <script src="jquery-3.1.0.min.js"></script>
    <style>
        .pclass1{background-color: #FFA500}
    </style>
    <script>
        /*注意点1:这两种写法效果一样。~*/
        $(function () {

        });
        $(document).ready(function () {

        });

        $(document).ready(function () {
            $("#btnSetAllColor").click(function () {
                /*注意点2:$("*")选择所有标签,但利用JQurey设置标签的CSS属性,不太好,没有输入提示,而且格式还不顺~*/
                $("*").css({"background-color":"yellow"});
            });
            /*注意点3:这个click写法也是没谁了,而且还提示不需要参数。~*/
            $("#btnSetChangeColor").click(function () {
                /*注意点4:这里竟然不用each()就能设置每个标签的点击事件~!*/
                $("*").click(function () {
                    $(this).css({"background-color":"red"});
                });
            });
            /*注意点5:选择所有p标签并且用pclass1样式的标签,如果不加p,就是所有pclass1样式的标签~!*/
            $(".pclass1").click(function () {
                alert($(this).text());
            });

            $("ul li:first").click(function () {
                alert($(this).text());
            });
            /*注意点6:first-child意思是作为第一个子元素的XX标签,如果XX标签不是第一个子标签,那么就选不到。~
            *        而first意思是只要集合中有XX标签,就能选到,不论是否为第一个。~*/
            $("ul:first-child li:first-child").mousedown(function () {
                alert("div" + $(this).text());
            });
            /*注意点7:属性选择器意思是设置了XXX属性后的元素,如果没有设置,则不会选到.属性选择用的少吧~!~*/
            $("a[href != 'http://www.baidu.com']:first").css({"font-size": "20px"});
            /*注意点8:这里找的是所有button类型的标签,包括Form里的,单Google不支持From里面的,火狐支持~!*/
            $(":button").css({"font-size": "20px"});
            /*注意点9:even偶数,从0开始的。*/
            $("ul li:even").css({"background-color":"green"});
            $("ul li:odd").css({"background-color":"blue"});
        });
    </script>
</head>
<body>
<h1 class="pclass1">这是一个H1标签</h1>
<p class="pclass1">这是一个P标签</p>
<span>这是一个Span标签</span>
<div>这是一个Div标签</div>
<a href="http://www.baidu.com">这是一个A标签</a><br>
<a href="http://www.baidu.com">这是第二个A标签</a><br>
<a href="http://www.sina.com">这是第三个A标签</a><br>
<ul>这是一个无序表
    <li><strong>这是无序表第一项(可点)</strong></li>
    <li>这是无序表第二项</li>
    <li>这是无序表第三项</li>
</ul>
<div>
    <ul>这是一个作为Div第一个元素的无序表
        <li><strong>这是无序表第一项(可点)</strong></li>
        <li>这是无序表第二项</li>
        <li>这是无序表第三项</li>
    </ul>
</div>

<form>这是一个From标签
    <label for="check1">复选框</label><input id="check1" type="checkbox" title="check1" >
    <label for="radio1">单选框</label><input id="radio1" type="radio" title="radio1">
    <input type="button" name="按钮" value="按钮">
</form>
<table border="1px">
    <caption>这是一个Table</caption>
    <thead>
    <tr>
        <th colspan="2">这是一个表头Thead</th>
    </tr>
    </thead>
    <tr>
        <th colspan="2">这是个列头th</th>
    </tr>
    <tr>
        <td>这是一个Td</td>
        <td>这是一个Td</td>
    </tr>
    <tfoot>
    <tr>
        <th colspan="2">这是一个表底Tfoot</th>
    </tr>
    </tfoot>
</table>
<hr>
<p class="pclass1"><small>设置所有标签的背景色</small></p>
<button id="btnSetAllColor">设置全部标签背景色</button>
<hr>
<p><small>设置点击标签后改变背景色</small></p>
<button id="btnSetChangeColor">设置全部标签背景色</button>
</body>
</html>