wangflood

精心维护一个技术blog，为了工作，也是爱好。
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  14 Posts :: 19 Stories :: 8 Comments :: 0 Trackbacks
jquery复习(四)
<!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内容。不能用于xml，但可以用于xhtml
        //alert($("div").html());
        //设置每个元素的 html内容。
        //$("div[id='test2']").html("Hello World");
        $("div").html(function(index, html) {
            return html + index;
        });
    });
</script>
</head>
<body>
    <div>
        <p>Hello</p>
    </div>
    <div id="test2">中华</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></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,xml都有效。
        //text()取得所有匹配元素的内容 ，包括子元素。
        //text()<b></b>转化为实体。
        $("div").text(function(index, text) {
            return $("p").text() + text + index + "<b>我靠</b";
        });
    });
</script>
</head>
<body>
    <p>
        <b>Test</b> Paragraph.
    </p>
    <p>Paraparagraph</p>
    <div>我是div:</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></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() {
        //获得单个select 的值和多选select的值。
        /*
        $("p").append(
                "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> "
                        + $("#multiple").val().join(", "));
        
         */

        //    alert($("input").val());
        //设置文本框 的值。
        $("input[id]").val("hello World");

        $("#single").val("Single2");
        $("#multiple").val([ "Multiple", "Multiple3" ]);
        $("input").val([ "check2", "radio1" ]);

        $(":text.items").val(function() {
            return this.value + " " + this.className;
        });
    });
</script>
</head>
<body>
    <p></p>
    <br />
    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>

    <input type="text" value="some text" />
    <input id="test2" type="text" />
    <input type="checkbox" value="check1" /> check1
    <input type="checkbox" value="check2" /> check2
    <input type="radio" value="radio1" /> radio1
    <input type="radio" value="radio2" /> radio2

    <input type="text" class="items" />
</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() {

        //想把dom文档中元素副本加到其他元素上时很有用。
        //$("b").clone().prependTo("p");
        //clone(true)，深copy
        $("button").click(function() {
            $(this).clone(true).insertAfter(this);
        });
    });
</script>
</head>
<body>
    <b>Hello</b>
    <p>, how are you?</p>
    <button>Clone Me!</button>
</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() {
        //alert($("p").css("color"));
        //如果属性名包含 "-"的话，必须使用引号: 
        /*
         $("p").css({
         color : "#ff0011",
         background : "blue"
         });
         */
        //$("p").css({ "margin-left": "10px", "background-color": "blue" }); 
        //$("p").css("color", "red");
        $("div").click(function() {
            $(this).css({
                width : function(index, value) {
                    return parseFloat(value) * 1.2;
                },
                height : function(index, value) {
                    return parseFloat(value) * 1.2;
                },
                background : "green"
            });
        });

    });
</script>
</head>
<body>
    <p>how are you</p>
    <div>how</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></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() {

        //请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

        //可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

        //获取匹配元素在当前窗口的相对偏移。top left
        /*var p = $("p:last");
        var offset = p.offset();
        p.html("left: " + offset.left + " ,top " + offset.top);
        p.offset({
            top : 10,
            left : 30
        });
         */

        //position元素相对于父元素的偏移。只对可见元素有效。
        //$("p:last").html($("p:first").position().left);
        //相对滚动条顶部的偏移。
        //$("p:last").html($("p:first").scrollTop());
        //$("p:first").scrollLeft(300);
        //$("p:last").html($("p:first").height());//19
        //内部区域的高度。
        //$("p:last").html($("p:first").innerHeight());//19
        $("p:last").html($("p:first").outerHeight());//19
    });
</script>
</head>
<body>
    <p>Hello</p>
    <p>2nd Paragraph</p>

    请确保在 body元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

    //可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
</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 class="wrap"><p>Test Paragraph.</p></div> 
        //$("p").wrap("<div class='green'></div>");
        //$("p").wrap(document.getElementById("content"));
        /*$("p").wrap(function() {
            return "<div class='green'/>"
        });
         */

        //$("p").unwrap();
        //将每个匹配元素的子内容包裹起来。
        $("p").wrapInner("<b></b>");
    });
</script>
</head>
<body>
    <p>Test Paragraph.</p>
    <div id="content" class="green"></div>
    <div>
        <p>Hello</p>
        <p>cruel</p>
        <p>World</p>
    </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></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() {
        //$("p").empty();
        //$("p").remove();//how are 没删除
        $("p").remove(".hello");//删除class="hello"
        //这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素
        //detach表示游离态。
        $("p").detach();
    });
</script>
</head>
<body>
    <p>
        Hello, <span>Person</span> <a href="#">and person</a>
    </p>
    <p class="hello">Hello</p>
    how are
    <p>you?</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() {
        //$("p").append("<b>Hello</b>");
        /*
        $("p").append(function(index, html) {
            return html + "   append"
        });
         */

        //注意之前    <p>I would like to say:</p>这一段就不存在了。
        //$("p").appendTo("div");
        //$("<p/>").appendTo("div").addClass("green").end().addClass("red");
        
        //[ <p><b>Hello</b>I would like to say: </p> ] 
        //$("p").prepend("<b>Hello</b>");
    });
</script>
</head>
<body>
    <p>I would like to say:</p>
    <div></div>
    <div></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></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() {

        //$("p").replaceWith("<b>Paragraph</b>")
        $("<b>Paragraph</b>").replaceAll("p");
    });
</script>
</head>
<body>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</body>
</html>
posted on 2011-04-14 13:00 wangflood 阅读(1784) 评论(2)  编辑  收藏

Feedback

# re: jquey复习(四) 2011-04-14 13:38 孤城网络
顶你的。  回复  更多评论
  

# re: jquery复习(四) 2011-04-22 18:40 wshsdlau
写的太多了，你就不会精炼一点吗?  回复  更多评论
  


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