jquey復習(三) – JAVA編程語言程序開發技術文章

<!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() {
        //以元素在html文檔中出現的順序來排序。而不是簡單的添加。
        //$(“p”).add(“span”).addClass(“green”);
        //動態生成一個元素添加至匹配的元素中。
        /*
        $(“p”).add(“<span>second</span>”).text(function(index, html) {
            alert(html);//打印Hello,second
        });
         */


        $(“p>p”).add(document.getElementById(“a”)).html(function(index,html){
        alert(html);
        });
    });
</script>
</head>
<body>
    <p>Hello</p>
    <span>Hello Again</span>
    <p>
        <p>Hello</p>
        <p>
            <span id=”a”>Hello Again</span>
        </p>
    </p>
</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() {
        //取得一個包含元素集合中的每一個元素的的所有子元素的元素集合。
        $(“.one”).children().hover(function() {
            $(this).addClass(“green”);
        });


        /*
        $(“p”).children(“.selected”).html(function() {
        alert($(this).text());
        });
         */
        /*
         $(document).bind(“click”, function(e) {
         $(e.target).closest(“li”).toggleClass(“green”);
         });
         */


    });
</script>
</head>
<body>
    <p>Hello</p>
    <p class=”one”>
        <span><font>Hello Again</font> </span>
        <p>I love</p>
        <p class=”two”>two</p>
        <p class=”three”>three</p>
    </p>
    <p>And Again</p>


    <p>
        <span>Hello</span>
        <p class=”selected”>Hello Again</p>
        <p>And Again</p>
    </p>
    <ul>
        <li><b>Click me!</b></li>
        <li>You can also <b>Click me!</b></li>
    </ul>


</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() {
        //查找匹配元素內部所有子節點,如果不iframe,則查找文檔內容。
        //find()搜索與指定表達式匹配的元素。一般用來找出正在處理元素的 後代元素。
        //$(“p”).contents().not(“[nodeType=1]”).wrap(“<b/>”);
        $(“iframe”).contents().find(“body”).append(“Im in an iframe!”);
    });
</script>
</head>
<body>
    <p>
        Hello <a href=”Johnhttp://ejohn.org/”>John</a>, how are you doing?
    </p>
    <iframe src=”/demo.html” width=”300″ height=”100″></iframe>
</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() {
        //查找當前元素之後 的所有元素,直到遇到匹配的那個元素為止。
        //$(“#term-2”).nextUntil(“dt”).addClass(“green”);
        //$(“#term-2”).parent();//所有匹配元素的唯 一父元素的元素集合。
        //$(“#term-2”).parents();//所有匹配元素的祖 先元素的元素集合(不含根元素。)
        //匹配所有元素的同級的前一個元素的集合。
        $(“p”).prev();
        //包含匹配元素集合中每個元素的所有唯一同輩元素的元素集合。
        $(“p”).siblings();


    });
</script>
</head>
<body>
&

發佈留言