jQuery的DOM操作小案例
案例一：下拉列表左右选择
<body>
<div>
<select style="width:60px" multiple size="10" id="leftID">
<option>选项A</option>
<option>选项B</option>
<option>选项C</option>
<option>选项D</option>
<option>选项E</option>
</select>
</div>
<div style="position:absolute;left:100px;top:60px">
<input type="button" value="批量右移" id="rightMoveID" />
</div>
<div style="position:absolute;left:100px;top:90px">
<input type="button" value="全部右移" id="rightMoveAllID" />
</div>
<div style="position:absolute;left:220px;top:20px">
<select multiple size="10" style="width:60px" id="rightID"></select>
</div>
</body>
<script type="text/javascript">
//双击右移
//定位左边的下拉框，同时添加双击事件
$("#leftID").dblclick(function() {
//获取双击时选中的option标签
var $option = $("#leftID option:selected");
//将选中的option标签移动到右边的下拉框中
$("#rightID").append($option);
});
//批量右移
//定位批量右移按钮，同时添加单击事件
$("#rightMoveID").click(function() {
//获取左边下拉框中选中的option标签
var $option = $("#leftID option:selected");
//将选中的option标签移动到右边的下拉框中
$("#rightID").append($option);
});
//全部右移
//定位全部右移按钮，同时添加单击事件
$("#rightMoveAllID").click(function() {
//获取左边下拉框中所有的option标签
var $option = $("#leftID option");
//将选中的option标签移动到右边的下拉框中
$("#rightID").append($option);
});
</script>
案例二：动态添加标签事件
<body>
<table id="tableID" border="1" align="center" width="60%">
<tr>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
<tbody id="tbodyID"></tbody>
</table>
<hr />
用户名：
<input type="text" id="usernameID" /> 密码：
<input type="text" id="passwordID" />
<input type="button" value="增加" id="addID" />
</body>
<script type="text/javascript">
//定位"增加"按钮，同时添加单击事件
$("#addID").click(function() {
//获取用户名和密码的值
var username = $("#usernameID").val();
var password = $("#passwordID").val();
//去掉二边的空格
username = $.trim(username);
password = $.trim(password);
//如果用户名或密码没有填
if (username.length == 0 || password.length == 0) {
//提示用户
alert("用户名或密码没有填");
} else {
//创建1个tr标签
var $tr = $("<tr></tr>");
//创建3个td标签
var $td1 = $("<td>" + username + "</td>");
var $td2 = $("<td>" + password + "</td>");
var $td3 = $("<td></td>");
//创建input标签，设置为删除按钮
var $del = $("<input type='button' value='删除'>");
//为删除按钮动态添加单击事件
$del.click(function() {
//删除按钮所有的行，即$tr对象
$tr.remove();
});
//将删除按钮添加到td3标签中
$td3.append($del);
//将3个td标签依次添加到tr标签中
$tr.append($td1);
$tr.append($td2);
$tr.append($td3);
//将tr标签添加到tbody标签中
$("#tbodyID").append($tr);
//清空用户名和密码文本框中的内容
$("#usernameID").val("");
$("#passwordID").val("");
}
});
</script>
案例三：全选反选
<body>
<table border="1" align="center">
<tr>
<th>状态</th>
<th>用户名</th>
</tr>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>赵</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>钱</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>孙</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="checkbox" /> 全选</td>
<td><input type="button" value="全反选" /></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
//全选中和全取消
//定位tfoot中的全选复选框，同时添加单击事件
$("tfoot input:checkbox").click(function() {
//获取该全选复选框的状态
var flag = this.checked;
//如果选中
if (flag) {
//将tbody中的所有复选框选中
$("tbody input:checkbox").attr("checked", "checked");
//如果未选中
} else {
//将tbody中的所有复选框取消
$("tbody input:checkbox").removeAttr("checked");
}
});
//全反选
//定位tfoot标签中的全反选按钮，同时添加单击事件
$("tfoot input:button").click(
function() {
//将tbody标签中的所有选中的复选框失效
$("tbody input:checkbox:checked").attr("disabled",
"disabled");
//将tbody标签中的所有生效的复选框选中
$("tbody input:checkbox:enabled")
.attr("checked", "checked");
//将tbody标签中的所有生效的复选框生效且设置为未选中
$("tbody input:checkbox:disabled").removeAttr("disabled")
.removeAttr("checked");
});
</script>
</body>
案例四：输入框暗影提示
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.myClass {
color: inactivecaption
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="1" align="center">
<tr>
<th>用户名</th>
<td><input type="text" value="输入用户名" /></td>
</tr>
</table>
<script type="text/javascript">
//当浏览器加载web页面时
$(function() {
//将文本框中的文本样式改变
$(":text").addClass("myClass");
});
//当光标定位文本框时
$(":text").focus(function() {
//清空文本框中的内容
$(this).val("");
//删除文本框的样式
$(this).removeClass("myClass");
});
//当文本框失去焦点时
$(":text").blur(function() {
//获取文本框中填入的内容
var content = $(this).val();
//去二边的空格
content = $.trim(content);
//如果没填了内容
if (content.length == 0) {
//在文本框显示提示信息
$(":text").val("输入用户名");
//设置文本框中文本的样式
$(":text").addClass("myClass");
}
});
</script>
</body>
jQuery的DOM操作小案例的更多相关文章
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js，jQuery和DOM操作的总结（一）
废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...
随机推荐
- js数值计算
js在小数数值计算时会出现误差,比如0.19+15.02=15.20999999999999,出现此问题的原因,百度上有,为了避免误差产生可以这样做:(0.19*100+15.02*100)/100.
- css清除浮动的几种方法整理
四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...
- google 开放I/O源码
在这款应用程序中谷歌对部分功能.API和设计架构进行了非常详细的阐述,其中包括碎片.程序加载.服务.广播.接收器.警告.通知.SQLite数据库.内容提供商.Action Bar.导航Drawer和G ...
- The working copy at 'xxx' is too old 错误解决
使用svn update更新时候提示: svn: E155036: The working copy at 'xxx' is too old (format 29) to work with clie ...
- Android WebView 开发详解(一)
转载请注明出处 http://blog.csdn.net/typename/article/details/39030091 powered by meichal zhao 概览: Android ...
- [OJ] Wildcard Matching (Hard)
LintCode 192. Wildcard Matching (Hard) LeetCode 44. Wildcard Matching (Hard) 第二次刷还是被这题虐. 其实就是跪在一个地方, ...
- [译]GotW #6b Const-Correctness, Part 2
const和mutable对于书写安全代码来说是个很有利的工具,坚持使用它们. Problem Guru Question 在下面代码中,在只要合适的情况下,对const进行增加和删除(包括 ...
- [译]GotW #4 Class Mechanics
你对写一个类的细节有多在行?这条款不仅注重公然的错误,更多的是一种专业的风格.了解这些原则将会帮助你设计易于使用和易于管理的类. JG Question 1. 什么使得接口“容易正确使用,错误使用却很 ...
- paip.无线路由器的无线接入WAN方式WDS设置大法
paip.无线路由器的无线接入WAN方式WDS设置大法 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn. ...
- FreeBSD方式安装 MAC OSX
首先你的电脑需要支持硬件虚拟化,可以用securable进行检测,如图所示即为支持,说明可以再你电脑的虚拟机里面安装苹果系统,如果有其中一项为NO,那么不好意思,你就没法安装了 2 其次你的电脑要提前 ...