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 ...
随机推荐
- matlab高斯模板生成，K是归一化系数，上面是一个半径200的高斯模板用来做MSR
R3=; F=zeros(*R3+,*R3+); sigma=R3/; r=; :*R3+ :*R3+ r=(x-R3)*(x-R3)+(y-R3)*(y-R3); ...
- Mysql的列索引和多列索引（联合索引）
转自:http://blog.chinaunix.net/uid-29305839-id-4257512.html 创建一个多列索引:CREATE TABLE test ( id ...
- 如何解决eclipse中的中文乱码问题：
方法一:代码里面进行改变编码 1. 编码方式的gbk和utf不同,不可以互相转换,只有byte和utf或者byte和gbk之间的转换,之间的转码如下:
- [AC自动机]HDOJ3695 Computer Virus on Planet Pandora
题意:给t.n,t个案例,n个字符串 下面给n+1个字符串,n个互不相同的小串,最后一个是模式串 模式串会出现[qx]的形式,q为数字,x为一个字母 问n个小串在模式串中出现的个数,正着出现.反着出现 ...
- win7安装IIS及将网站发布到IIS上
1. WIN7安装IIS: 控制面板----程序和功能-----打开或关闭windows功能,如图 展开Internet信息服务,按照下图方式进行选择,然后单击"确定",等待几分 ...
- shell脚本ssh自动登陆服务器
#!/bin/shsshpass -p "your password" ssh user@ip 注意: 需要先安装sshpass: 源码下载地址:http://sourceforg ...
- Linux进程创建和结束
在Linux中,进程的创建由系统调用fork和vfork完成.它们生成一个子进程并且子进程是父进程的一个复制品. Fork系统调用对应的kernel函数是sys_fork,此函数简单的调用kernel ...
- Oracle备忘录
习惯是一个数据库中有多个用户,但是一个用户对应一个系统 数据库管理员主要职责: 每个Oracle数据库应该至少有一个数据库管理员(dba),对于一个小的数据库,一个dba就够了,但是对于一个大的数据库 ...
- POJ1699Best Sequence(DFS)
链接 这题其实是由bug的 一个串包含其它两个串的数据没有 所以就这么水了它吧 只处理两个串的关系就行了 回来补点..看了huge的博客 发现其实不是有Bug 题意没读清楚 必须首尾相连 像AGCT ...
- new Option及用法
op.sclassnumber.options.add(new Option(secondMenuClassNumber[0]+":"+secondMenuText[0]),se ...