jQuerty练习题四 _Web前端

jQuerty练习四

ex-4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
        <script type="text/javascript">
            
            //****知识: 在 js 中 null, undefined, 0, false 都可以作为 false 使用, 除此以外可以作为 true 使用
            
            //需求: 点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型"; 
            //                        检查文本框中是否有输入(可以去除前后空格), 若没有输入,　则给出提示: "请输入内容"; 
            //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 
           $(document).ready(function(){
		   	
			//点击现实文本信息
			function showContent(li){
				alert("^_^" + $(li).text()) ;
			} 
			
			//给 li 节点增加方法
			$("li").click(function(){
				showContent(this) ;				
			}) ;
			
		   		$("#submit").click(function(){
					
					//获取 radio 的状态类型，并进行判断
					var $type = $(":radio[name='type']:checked") ;
					if($type.length == 0) {
						alert("请选择类型") ;
						return false ;
					}
					
					//获取 text 的内容.并进行加工处理
					var $content = $(":text[name='name']").val() ;
					$content = $.trim($content) ;
					$(":text[name='name']").val($content) ;
					
					//判断文本信息是否为 ""
					if($content == "") {
						alert("请输入内容");
						return false ;
					}
					
					//将新输入的文本信息，增加到相应的类型中, 并给新增加的节点添加方法
					$("<li>" + $content + "</li>").appendTo($("#" + $type.val())).click(function(){
						showContent(this) ;
					}) ;

					//禁止了 submit 的自动提交
					return false ;
				}) ;
		   }) ;
            
            
        </script>
    </head>
    <body>
        <p>
            你喜欢哪个城市?
        </p>
        <ul id="city">
            <li id="bj" name="BeiJing">
                北京
            </li>
            <li>
                上海
            </li>
            <li>
                东京
            </li>
            <li>
                首尔
            </li>
        </ul>
        <br>
        <br>
        <p>
            你喜欢哪款单机游戏?
        </p>
        <ul id="game">
            <li id="rl">
                红警
            </li>
            <li>
                实况
            </li>
            <li>
                极品飞车
            </li>
            <li>
                魔兽
            </li>
        </ul>
        <br>
        <br>
        <form action="dom-5.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" value="Submit" id="submit"/>
        </form>
    </body>
</html>