1、代码
<!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>jQuery的添加分类内容的案例</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> //需求1: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; // 若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. $(function(){ //1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, //可以取消指定元素的默认行为. 比如 submit, a 等 //2. val() 方法, 相当于 attr("value"), 获取表单元素的 value 属性值. //3. $.trim(str): 可以去除 str 的前后空格. //4. jQuery 对象的方法的连缀: 调用一个方法的返回值还是调用的对象, 于是可以 //在调用方法的后面依然调用先前的那个对象的其他方法. $(":submit").click(function() { var $type = $(":radio[name='type']:checked"); if($type.length == 0) { alert("请选择类型"); return false; } var typeVal = $type.val(); var $name = $(":text[name='name']"); var nameVal = $.trim($name.val()); $name.val(nameVal); if(nameVal == "") { alert("请输入内容"); $name.focus(); return false; } $("<li>" + nameVal + "</li>").appendTo($("#"+typeVal)) .click(function() { alert($(this).text()); }); //取消sumit的默认行为 return false; }); $("li").click(function() { alert($(this).text()); }); }) </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj">北京</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-7.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>
2、原始界面
3、案例
相关推荐
教程名称:尚硅谷jQuery视频教程(25集)课程目录:【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10.尚硅谷_佟刚_jQuery_表单元素过滤选择器【】11.尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的...
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
尚硅谷关于jQuery学习的教学课件,有需要的可以下载参考(*^▽^*)
实现步骤: (1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 ...(7)每一个主体商品复选框被选中的时候判断全选按钮是否需要被选中
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ...
04_尚硅谷_jQuery_王振国 - 课堂笔记1
第七节:jQuery速成 - 内容对象的获取和对象可见性! 第八节:jQuery速成 - 对象获取进阶 第九节:jQuery速成 - 子元素的获取 第十节:jQuery速成 - 表单对象的获取 第十一节:jQuery速成 - 元素属性的设置与移除 第...
、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
AddTxtToCaret:添加文本到光标位置 jquery.colorbox:完美的jquery弹出层支持图片播放 jquery.contextmenu.r2:jquery右键菜单 jquery.cookie:jquery Cookie操作 jquery.form:jquery表单提交(ajax方式或其它方式...
插件描述:DateTimePicket jQuery插件:使用这个插件来悄悄地添加一个DateTimePicker,日期选择器或timepicker下拉到您的表单。
后端 核心框架:Spring Framework 4.2.5.RELEASE 安全框架:Apache Shiro 1.3.2 视图框架:Spring MVC 4.2.5.RELEASE 数据库连接池:Tomcat JDBC 缓存框架:Ehcache ORM框架:Spring Data ...表单验证 :jquery.vali
jQuery的Cookie插件 cookies cookies 是一个强大的 jQuery 用来操作 Cookie 的插件。除了常见的操作 $.cookies.set( 'sessid', 'dh3tr62fghe' ); var sessid = $.cookies.get( 'sessid' ); $.cookies.del( 'sessid...
练习2:使用jQuery美化英雄联盟简介页.zip,练习2:使用jQuery美化英雄联盟简介页.zip,练习2:使用jQuery美化英雄联盟简介页.zip
jquery50个经典案例
弹出框 jquery 真实案例
DateTimePicket jQuery插件:使用这个插件来悄悄地添加一个DateTimePicker,日期选择器或timepicker下拉到您的表单。
《jQuery全能权威指南:jQuery Core+jQuery Plugin+jQuery UI+jQuery Mobile》的阅读对象是具有一些HTML、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin、...
资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...
jquery 50个案例, jquery 50个案例,jquery 50个案例