wangflood

精心维护一个技术blog，为了工作，也是爱好。
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  14 Posts :: 19 Stories :: 8 Comments :: 0 Trackbacks
jquey复习(二)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
    background-color: red;
}

.green {
    background: green;
}
</style>

<script type="text/javascript">
    $(function() {
        //pre元素下的所有子孙元素。
        //$("form input")选 中[ <input name="name" />, <input name="newsletter" /> ] 
        /*
         $("form input").hover(function() {
         $(this).addClass("green");
         }, function() {
         $(this).removeClass("green");
         });
         */
        //pre元素下的子元素。
        //[ <input name="name" /> ] 
        /*
        $("form>input").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */

        //pre元素后的next元素。pre 与next平级
        //[ <input name="name" />, <input name="newsletter" /> ] 
        /*$("label+input").hover(function() {
                $(this).addClass("green");
            }, function() {
                $(this).removeClass("green");
            });
         */

        //[ <input name="none" /> ] 
        //prev元素之后所有sibings元素
        //siblings和next不同，siblings返回的是，所有同辈元素的集合。next，仅是一个。
        /*
        $("form ~ input").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */

        //这就是next方式，选 中的只有一个。
        $("form +input").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });

    });
</script>
</head>
<body>
    <form>
        <label>Name:</label> <input name="name" />
        <fieldset>
            <label>Newsletter:</label> <input name="newsletter" />
        </fieldset>
    </form>
    <input name="none" />
    <input name="second" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
    background-color: red;
}

.green {
    background: green;
}
</style>

<script type="text/javascript">
    $(function() {

        //匹配找到的第一个元素
        //[ <tr><td>Header 1</td></tr> ] 
        /*
        $("tr:first").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */
        //匹配找到的最后一个元素
        //[ <tr><td>Value 2</td></tr> ] 
        /*
        $("tr:last").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */
        //能够 checked的input才有:checked
        /*
        $("input:not(:checked)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */
        //偶数元素，从0开始计数
        /*
        $("tr:even").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });*/
        //奇数元素，从0开始计数。
        /*
        $("tr:odd").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */
        //匹配给定的索引的元素。
        /*
        $("tr:eq(1)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });*/

        //大于给定索引的元素。
        /*
        $("tr:gt(1)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */

        //小于给定索引元素的。此时只匹配index=0
        /*
        $("tr:lt(1)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */
        //匹配H1,H2,H3之类的标题元素。
        // $(":header").css("background"."#EEE");
        //:animated 所有正在执行动画的元素
        $("#run").click(function() {
            $("div:not(:animated)").animate({
                height : 'toggle',
                opacity : 'toggle'
            }, "slow");
        });

    });
</script>
</head>
<body>
    <table>
        <tr>
            <td>Header 1</td>
        </tr>
        <tr>
            <td>Value 1</td>
        </tr>
        <tr>
            <td>Value 2</td>
        </tr>
    </table>


    <input type="checkbox" name="apple" />
    <input type="checkbox" name="flower" checked="checked" />

    <h1>Header 1</h1>
    <p>Contents 1</p>
    <h2>Header 2</h2>
    <p>Contents 2</p>

    <button id="run">Run</button>
    <div>love you</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery Content</title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
    background-color: red;
}

.green {
    background: green;
}
</style>

<script type="text/javascript">
    $(function() {

        //所有包含给定的文本的元素
        /*
        $("div:contains('John')").hover(function() {
            $(this).addClass("red");
        }, function() {
            $(this).removeClass("red");
        });
         */
        //不包含子元素或文本的元素。
        /*
        $("td:empty").hover(function() {
            $(this).text("afaf");
        }, function() {
            $(this).addClass("red");
        });
         */
        //has(selector)
        //匹配含有选择器的元素的元素。
        /*
        $("div:has(p)").hover(function() {
            $(this).addClass("red");
        }, function() {
            $(this).removeClass("red");
        });
         */
        //跟empty正好相反，含有子元素或文本的。
        $("td:parent").hover(function() {
            $(this).addClass("red");
        }, function() {
            $(this).removeClass("red");
        });
    });
</script>
</head>
<body>
    <div id="one">
        <p></p>
        John Resig
    </div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>
        J. Ohn

        <table>
            <tr>
                <td>Value 1</td>
                <td></td>
            </tr>
            <tr>
                <td>Value 2</td>
                <td></td>
            </tr>
        </table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可见性</title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
    background-color: red;
}

.green {
    background: green;
}
</style>

<script type="text/javascript">
    $(function() {
        $("tr:visible").hover(function() {
            $(this).css("display", "none");
            $("tr:hidden").show();
        });

    });
</script>
</head>
<body>
    <table>
        <tr style="display: none">
            <td>Value 1</td>
        </tr>
        <tr>
            <td>Value 2</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可见性</title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
    background-color: red;
}

.green {
    background: green;
}
</style>

<script type="text/javascript">
    $(function() {
        //包含给定属性的元素。
        /*
        $("div[id]").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         */
        //指定属性=value的元素。
        //$("input[name='newsletter']").attr("checked", true);
        //指定属性!=value的元素。
        //$("input[name!='newsletter']").attr("checked", true);
        //指定元素属性以xx开始的
        //$("input[name^='accept']").attr("checked", true);
        //指定元素属性以xx结束的
        //$("input[name$='r']").attr("checked", true);
        //指定元素属性以包含xx
        //$("input[name*='let']").attr("checked", true);
        //复合选择器
        $("input[id][name='newsletter']").attr("checked", true);
    });
</script>
</head>
<body>
    <div>
        <p>Hello!</p>
    </div>
    <div id="test2">has a id property</div>

    <input id="test3" type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />
    <input type="checkbox" name="acceptor" value="Sam Wang" />

</body>
</html>
posted on 2011-04-12 12:23 wangflood 阅读(286) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航: