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>
分享到:
相关推荐
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。 jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。本教程将告诉您如何使用 jQuery EasyUI 框架创建应用。...
这是Jquery的一个浮动层插件,比较实用。压缩包中有4个文件夹和我整理说明的一个文档。这四个文件夹分别是4种浮动层样式。
实现图片的轮播!代码简单。容易学习,到入项目就可以直接看到功能的实现了。
jQuery开发jQuery开发jQuery开发jQuery开发jQuery开发jQuery开发
不进行页面跳转,主要是练习运用jquerty,ajax,里面包含数据库,只是界面不太美观,如果要嵌入别到的网页上,出现问题欢迎在我的博客留言,或者加我qq1005089371,嵌入到别的网页如果部分列表或功能无法实现,请尝试...
78个个常用的jquery,里面包括自己收集28个插
jQuery基于JSON九宫格转盘特效是一款简单的九宫格抽奖实例。注意:加载外部json数据文件,请在服务端查看效果。
原理很简单: 获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度...
jQuery常用技巧详细介绍,结合实例让您更加快速、准确地掌握它!
Internet中的Windy Secker的页面查看器(风擎天下的网页查看器)/抑或是我的网址导航(持续开发中)基于HTML5 / CSS3 / JavaScript / SCSS / Ruby / JQuerty的网址导航 版权所有:copyright:2020风擎天下(Windy_S...
html5与css权威指南、jquery权威指南,两本电子书,中文的,分享给大家