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 框架创建应用。...
4. **优化与扩展**： - **无限循环**：为了实现无限轮播的效果，我们可以让索引在图片数组长度范围内循环。 - **触摸事件**：对于移动设备，我们可以添加对触摸滑动事件的支持，使得用户可以通过手势来切换图片。 ...
4. **自定义样式**：根据项目需求完全自定义的样式，可以包括更复杂的布局和交互元素。 **三、使用示例与配置** 1. **基本使用**：只需选择要作为模态的元素并调用`.modal('show')`即可打开模态，`.modal('hide')`...
jQuery开发jQuery开发jQuery开发jQuery开发jQuery开发jQuery开发
不进行页面跳转，主要是练习运用jquerty,ajax，里面包含数据库，只是界面不太美观，如果要嵌入别到的网页上，出现问题欢迎在我的博客留言，或者加我qq1005089371,嵌入到别的网页如果部分列表或功能无法实现，请尝试...
4. **轮播和幻灯片插件**：比如Bootstrap Carousel、Slick Slider等，能够轻松实现图片或内容的轮播展示，吸引用户的注意力。 5. **弹出框和模态对话框**：jQuery UI的Dialog和Bootstrap的Modal，可用于创建提示、...
### 4. 九宫格布局 实现九宫格布局通常可以使用CSS的`display: grid`属性。在HTML结构中，我们需要一个包含九个子元素的容器，然后设置CSS样式，使每个子元素占据相等的空间。 ```css #grid { display: grid; ...
原理很简单： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度...
4. 同一函数实现set和get 许多jQuery方法支持设置和获取属性。例如，`html()` 用于获取或设置元素的HTML内容，`text()` 用于获取或设置文本内容，`height()` 和 `width()` 用于获取或设置元素的尺寸，`val()` 用于...
Internet中的Windy Secker的页面查看器（风擎天下的网页查看器）/抑或是我的网址导航（持续开发中）基于HTML5 / CSS3 / JavaScript / SCSS / Ruby / JQuerty的网址导航 版权所有:copyright:2020风擎天下（Windy_S...
在这两本权威指南中，我们将会深入探讨这些关键领域的核心概念、语法以及最佳实践。 ...例如，`<canvas>`元素提供了在浏览器内绘制图形的能力，`<video>`和`<audio>`元素使得嵌入视频和音频内容变得简单。...