JQuery 节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //1.操作文本节点：通过jquery对象的text（）方法
            alert($("#bj").text());
            $("#bj").text("南京");
            //2.操作属性节点：通过jquery对象的attr()方法
            alert($(":text[name='username']").attr("value"));
            $(":text[name='username']").attr("value","电饭锅");

            //创建节点并插入节点到指定的节点中
            /*
            1.创建节点：使用$(html)方式即可，返回对应节点的jquery对象：
             $("<li id='js'>江苏</li>")

            2.添加节点：
            1).appendTo 和 append：主语和宾语的位置不同：
             $("<li id='js'>江苏</li>").appendTo($("#city"));
             $("#city").append("<li id='js'>江苏</li>");

            2).prependTo 和 prepend：主语和宾语的位置不同：
             $("<li id='js'>江苏</li>").prependTo($("#city"));
             $("#city").prepend("<li id='js'>江苏</li>");
             */
            //$("<li id='js'>江苏</li>").appendTo($("#city"));
            $("#city").append("<li id='js'>江苏</li>");
            //$("<li id='js'>江苏</li>").prependTo($("#city"));
            $("#city").prepend("<li id='js'>江苏</li>");
        })
    </script>
</head>
<body>
    <p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li>上海</li>
        <li id="nb">宁波</li>
    </ul>
    <br><br>

    <p>你喜欢什么运动?</p>
    <ul id="game">
        <li id="ps">爬山</li>
        <li id="pb">打篮球</li>
        <li id="pf">踢足球</li>
    </ul>

    <br><br>
    gender:
        <input type="radio" name="gender" value="male">Male
        <input type="radio" name="gender" value="female">Female
    <br><br>
    name: <input type="text" name="username" value="miss">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(function(){

            function showContent(li){
                alert($(li).text());
            }
            $("li").click(function(){
               showContent(this);
            });

            //1.同JS的响应函数一样，jquery对象的响应函数若返回false，
            //可以取消指定元素的默认行为，比如submit,a等
            //2.val()方法，相当于attr（"value"）,获取表单元素的value属性值。
            //3.jquery对象的方法的连缀：调用一个方法的返回值还是调用的对象，于是
            //可以在调用方法的后面依然调用先前的那个对象的其他方法。
            $(":submit").click(function(){
                var $type=$(":radio[name='type']:checked");
                if($type.length == 0){
                    alert("请选择类型");
                    return false;
                }
                var type = $type.val();
                var $name = $(":text[name='name']");
                var name = $name.val();

                //$.trim(str):可以去除str的前后空格.
                name = $.trim(name);
                $name.val(name);
                if(name == ""){
                    alert("请输入内容");
                    return false;
                }
                $("<li>" + name + "</li>").appendTo($("#"+type))
                        .click(function(){
                            showContent(this);
                        });

                return false;
            });

        })
    </script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
    <li id="bj">北京</li>
    <li>上海</li>
    <li id="nb">宁波</li>
</ul>
<br><br>

<p>你喜欢什么单机游戏?</p>
<ul id="game">
    <li id="rl">红警</li>
    <li>极品飞车</li>
    <li>实况足球</li>
</ul>

<br><br>
<form action="case1.html" name="myform">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏

name: <input type="text" name="name">
    <input type="submit" id="Submit" value="submit">
</form>
</body>
</html>

//1.为#city的每一个li添加click响应函数：点击时，li被删除
$("city li").click(function(){
    $(this).remove();
});
//jquery对象的remove（）方法：将把jquery对象对应的dom对象节点删除
$("#bj").remove();

//2.清空#game节点
//jquery对象的empty（）方法：清空jquery对象对应的dom对象所有的子节点
alert("马上要清空了!");
$("#game").empty();

posted @ 2016-03-16 13:55 HOPE男孩阅读(513) 评论(0) 收藏举报

刷新页面返回顶部

HOPE男孩

JQuery 节点

公告