JQuery选择器

来源：互联网发布：淘宝旺旺客服代码编辑：程序博客网时间：2024/06/05 08:07

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JQuery选择器</title>
    <script src="js/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        //ID选择器
        $(function () { $("#div1").css("background", "red"); });
        $(function () { alert($("#div1").val()); });
        $(function () { $("#reShow").click(function () { $("#div1").css("background","blue")}); });
        //Name选择器
        $(function () {
            $("p").click(function () { alert("我是P"); })//隐式迭代，给所有选择出来的元素增加click事件
            $("input").click(function () { alert("我是input"); })
        });
        //CSS选择器
        $(function () {
            $(".pStyle").click(function () {//注意千万不能忘记点
                alert($(this).text());
            });
        });
        //多条件选择器
        //$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素
        //注意：选择器表达式中的空格不能多不能小，易错
        //（1）:$("div li")获取div的所有li元素（后代，子，子子代元素）也也是说全部的全速都能获取
        //（2）:$("div > li")获取div下的直接li子元素（也就是说只能获取div下的li，其他的不能得到）注意空格必须有，但不能增加，否则报错
        //（3）:$(".document+ div")获取样式名为menuitem之后的第一个div元素（不常用），样式名前的.不能忘记
        // (4) :$(".munuitem ~ div")获取样式名为menuitem之后所有的div元素(不常用)
    </script>
    <style type="text/css">
        .pStyle
        {
            background:url("images/13.jpg");
        font:23px;
        color:Yellow;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="reset" id="reShow" value="改变颜色" />
        <div id="div1">aaa</div>
        <p class="pStyle">1</p>
        <p class="pStyle">2</p>
        <p class="pStyle">3</p>
        <p class="pStyle">4</p>
        <p class="pStyle">5</p>
        <p class="pStyle">6</p>
        <p class="pStyle">7</p>
        <input class="pStyle" type="text" value="o my gard!" id="txtShow"/>

</div>
</form>
</body>
</html>