jQuery总结第三天（实用案例介绍）
2013-03-21 20:14
441 查看
1.窗体运行就加载函数的dom写法与jQuery的区别与jQuery的三种写法
[plain]
view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<!-- 引入jQuery的库 -->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 第一种写法：第二种winod.onload会覆盖第一种
window.onload = function(){
alert("one");
};
window.onload = function(){
alert("two");
}; */
/* 第二种写法：同样后面的也会覆盖前面的
var one=function one(){
alert("one");
};
var two=function one(){
alert("two");
};
window.onload = one;
window.onload = two; */
//下面三种jQuery的写法，可以同时加载触发事件
/* //第一种：
$(function(){
alert("one");
});
$(function(){
alert("two");
});
//第二种：
$(document).ready(function(){
alert("hello one");
});
$(document).ready(function(){
alert("hello two");
});
*/
//第三种：
$().ready(function(){
alert("hello one");
});
$().ready(function(){
alert("hello two");
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
2.仿各大网站的注册插件之jquery编写的条款多选框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo2.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //当窗体加载完毕触发匿名函数
//id选择器
var $submitBtn = $("#submitBtn");
/* //为按钮注册点击事件
$submitBtn.click(function(){
alert("点击");
}); */
/* //通过jQuery对象与dom对象相互转换完成操作
//为按钮绑定点击事件;第一个参数是绑定事件的类型，第二个参数是触发的函数
$submitBtn.bind("click",function(){
var $ckb = $("#agreeckb"); //获取checkbox的元素对象
//把jQuery对象转换成dom对象
var ckbDom = $ckb[0]; //通过数组下表获取，还有一种通过get（index）；
if(ckbDom.checked){
alert("同意注册");
}else{
alert("请选择同意条款");
}
}); */
//直接通过jQuery对象的操作实现操作
$submitBtn.click(function(){
var $ckb = $("#agreeckb");
//:checked 是表单过滤器必须这样写！
if($ckb.is(":checked")){
alert("同意注册");
}else{
alert("请选择同意条款");
}
});
});
</script>
</head>
<body>
注册条款：<input type="checkbox" id="agreeckb"/>我已仔细阅读并接受注册条款
<input type="button" value="注册" id="submitBtn"/>
</body>
</html>
3.Jquery的左右移动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo3.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//获取按钮的元素对象
var $lromve = $("#lromve");
var $lromves = $("#lromves");
//右移操作
//绑定click事件，选中的右移
$lromve.bind("click", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#lopt>option:selected");
//在id=ropt的的select中添加option对象集合
$("#ropt").append($opts);
});
//绑定click事件；全部右移
$lromves.bind("click", function() {
var $opts = $("#lopt>option");
$("#ropt").append($opts);
});
//双击的右移操作
$("#lopt").bind("dblclick", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#lopt>option:selected");
//在id=ropt的的select中添加option对象集合
$("#ropt").append($opts);
});
//左移操作
//获取按钮的元素对象
var $rromve = $("#rromve");
var $rromves = $("#rromves");
//绑定click事件
$rromve.bind("click", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#ropt>option:selected");
//alert($opts.text);
//在id=ropt的的select中添加option对象集合
$("#lopt").append($opts);
});
//绑定click事件
$rromves.bind("click", function() {
var $opts = $("#ropt>option");
$("#lopt").append($opts);
});
//双击的左移操作
$("#ropt").bind("dblclick", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#ropt>option:selected");
//在id=ropt的的select中添加option对象集合
$("#lopt").append($opts);
});
});
</script>
</head>
<body>
<div>
<div style="float: left; width: 200px; height: 300px; background-color: lightsteelblue; text-align: center;">
<select id="lopt" multiple="multiple" size="9" style="width:80px;">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
</select><br><br><input type="button" id="lromves" value="全部右移"
style="width: 80px;" /><input type="button" id="lromve"
value="选中的右移" style="width: 80px;" />
</div>
<div style="width: 200px; height: 300px; background-color: red; text-align: center;">
<select id="ropt" multiple="multiple" size="9" style="width: 80px;">
</select><br><br><input type="button" id="rromves" value="全部左移"
style="width: 80px;" /><input type="button" id="rromve"
value="选中的左移" style="width: 80px;" />
</div>
</div>
</body>
</html>
4.jquery的多选反选和全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo4.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//全选
$("#ckbAll").click(function() {
$("input[name='fav']").each(function() {
this.checked = true; //dom对象写法
});
//$("input[name='fav']").attr("checked", true); //jQuery对象写法，有bug，点击两回之后就不起作用了
});
//选不选
$("#ckbNo").click(function() {
$("input[name='fav']").attr("checked", false);
});
//反选
$("#ckbRec").click(function() {
$("input[name='fav']").each(function() {
//$(this).attr("checked", !$(this).attr("checked")); //jQuery对象的写法
this.checked = !this.checked; //dom对象写法
});
});
});
</script>
</head>
<body>
<div>
<input type="checkbox" name="fav" value="看书1" />看书1 <input
type="checkbox" name="fav" value="看书2" />看书2 <input type="checkbox"
name="fav" value="看书3" />看书3 <input type="checkbox" name="fav"
value="看书4" />看书4 <input type="checkbox" name="fav" value="看书5" />看书5
</div>
<div>
<input type="button" value="全选" id="ckbAll"/>
<input type="button" value="全不选" id="ckbNo" />
<input type="button" value="反选" id="ckbRec" />
</div>
</body>
</html>
5.仿各大网站的注册移走光标变色操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo5.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* $("input").bind("blur",function(){
}); */
//:input获取的是所有input标签中的各种类型的元素对象,以及textarea、select等多种标签；input只获取前者，即input标签所属的属性
$(":input").blur(function(){
$(this).each(function(){
//if(""==this.value.trim()){
if(""==$(this).val().trim()){
$(this).addClass("blur");
}else{
$(this).removeClass("blur");
}
});
});
});
</script>
<style type="text/css">
.blur{
border:1px solid red;
}
</style>
</head>
<body>
<form action="">
用户名：<input type="text" name="ubane"/><br><br>
密 码：<input type="password" name="ubane"/><br><br>
邮 箱：<input type="text" name="ubane"/><br><br>
个人介绍：<textarea rows="10" cols="30"></textarea>
</form>
</body>
</html>
6.tbody交替变色操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo2.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
//当文档加载完毕触发匿名函数
$(document).ready(function(){
//有点区别，研究一下
$("tbody tr:even").css("background-color","blue");
$("tbody>tr:nth-child(even)").css("background-color","yellow");
$("tbody>tr:nth-child(odd)").css("background-color","red"); //会替换红颜色
});
</script>
</head>
<body>
<table border="1" bordercolor="teal">
<thead>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
</thead>
<tbody>
<tr id="row1" bgcolor="red" title="aa">
<td>1</td>
<td>redarmy</td>
<td>M</td>
<td>僵尸</td>
</tr>
<tr id="row2">
<td>2</td>
<td>kai</td>
<td>M</td>
<td>牛掰</td>
</tr>
<tr id="row3">
<td>3</td>
<td>redarmy2</td>
<td>M</td>
<td>僵尸</td>
</tr>
<tr id="row4">
<td>4</td>
<td>redarmy3</td>
<td>M</td>
<td>僵尸</td>
</tr>
<tr>
<td>5</td>
<td>redarmy4</td>
<td>M</td>
<td>僵尸</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<!-- 引入jQuery的库 -->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 第一种写法：第二种winod.onload会覆盖第一种
window.onload = function(){
alert("one");
};
window.onload = function(){
alert("two");
}; */
/* 第二种写法：同样后面的也会覆盖前面的
var one=function one(){
alert("one");
};
var two=function one(){
alert("two");
};
window.onload = one;
window.onload = two; */
//下面三种jQuery的写法，可以同时加载触发事件
/* //第一种：
$(function(){
alert("one");
});
$(function(){
alert("two");
});
//第二种：
$(document).ready(function(){
alert("hello one");
});
$(document).ready(function(){
alert("hello two");
});
*/
//第三种：
$().ready(function(){
alert("hello one");
});
$().ready(function(){
alert("hello two");
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>
2.仿各大网站的注册插件之jquery编写的条款多选框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo2.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //当窗体加载完毕触发匿名函数
//id选择器
var $submitBtn = $("#submitBtn");
/* //为按钮注册点击事件
$submitBtn.click(function(){
alert("点击");
}); */
/* //通过jQuery对象与dom对象相互转换完成操作
//为按钮绑定点击事件;第一个参数是绑定事件的类型，第二个参数是触发的函数
$submitBtn.bind("click",function(){
var $ckb = $("#agreeckb"); //获取checkbox的元素对象
//把jQuery对象转换成dom对象
var ckbDom = $ckb[0]; //通过数组下表获取，还有一种通过get（index）；
if(ckbDom.checked){
alert("同意注册");
}else{
alert("请选择同意条款");
}
}); */
//直接通过jQuery对象的操作实现操作
$submitBtn.click(function(){
var $ckb = $("#agreeckb");
//:checked 是表单过滤器必须这样写！
if($ckb.is(":checked")){
alert("同意注册");
}else{
alert("请选择同意条款");
}
});
});
</script>
</head>
<body>
注册条款：<input type="checkbox" id="agreeckb"/>我已仔细阅读并接受注册条款
<input type="button" value="注册" id="submitBtn"/>
</body>
</html>
3.Jquery的左右移动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo3.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//获取按钮的元素对象
var $lromve = $("#lromve");
var $lromves = $("#lromves");
//右移操作
//绑定click事件，选中的右移
$lromve.bind("click", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#lopt>option:selected");
//在id=ropt的的select中添加option对象集合
$("#ropt").append($opts);
});
//绑定click事件；全部右移
$lromves.bind("click", function() {
var $opts = $("#lopt>option");
$("#ropt").append($opts);
});
//双击的右移操作
$("#lopt").bind("dblclick", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#lopt>option:selected");
//在id=ropt的的select中添加option对象集合
$("#ropt").append($opts);
});
//左移操作
//获取按钮的元素对象
var $rromve = $("#rromve");
var $rromves = $("#rromves");
//绑定click事件
$rromve.bind("click", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#ropt>option:selected");
//alert($opts.text);
//在id=ropt的的select中添加option对象集合
$("#lopt").append($opts);
});
//绑定click事件
$rromves.bind("click", function() {
var $opts = $("#ropt>option");
$("#lopt").append($opts);
});
//双击的左移操作
$("#ropt").bind("dblclick", function() {
//选取id=lopt下面的所有子元素为option的并且被选中的option对象的集合
var $opts = $("#ropt>option:selected");
//在id=ropt的的select中添加option对象集合
$("#lopt").append($opts);
});
});
</script>
</head>
<body>
<div>
<div style="float: left; width: 200px; height: 300px; background-color: lightsteelblue; text-align: center;">
<select id="lopt" multiple="multiple" size="9" style="width:80px;">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
</select><br><br><input type="button" id="lromves" value="全部右移"
style="width: 80px;" /><input type="button" id="lromve"
value="选中的右移" style="width: 80px;" />
</div>
<div style="width: 200px; height: 300px; background-color: red; text-align: center;">
<select id="ropt" multiple="multiple" size="9" style="width: 80px;">
</select><br><br><input type="button" id="rromves" value="全部左移"
style="width: 80px;" /><input type="button" id="rromve"
value="选中的左移" style="width: 80px;" />
</div>
</div>
</body>
</html>
4.jquery的多选反选和全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo4.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//全选
$("#ckbAll").click(function() {
$("input[name='fav']").each(function() {
this.checked = true; //dom对象写法
});
//$("input[name='fav']").attr("checked", true); //jQuery对象写法，有bug，点击两回之后就不起作用了
});
//选不选
$("#ckbNo").click(function() {
$("input[name='fav']").attr("checked", false);
});
//反选
$("#ckbRec").click(function() {
$("input[name='fav']").each(function() {
//$(this).attr("checked", !$(this).attr("checked")); //jQuery对象的写法
this.checked = !this.checked; //dom对象写法
});
});
});
</script>
</head>
<body>
<div>
<input type="checkbox" name="fav" value="看书1" />看书1 <input
type="checkbox" name="fav" value="看书2" />看书2 <input type="checkbox"
name="fav" value="看书3" />看书3 <input type="checkbox" name="fav"
value="看书4" />看书4 <input type="checkbox" name="fav" value="看书5" />看书5
</div>
<div>
<input type="button" value="全选" id="ckbAll"/>
<input type="button" value="全不选" id="ckbNo" />
<input type="button" value="反选" id="ckbRec" />
</div>
</body>
</html>
5.仿各大网站的注册移走光标变色操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo5.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* $("input").bind("blur",function(){
}); */
//:input获取的是所有input标签中的各种类型的元素对象,以及textarea、select等多种标签；input只获取前者，即input标签所属的属性
$(":input").blur(function(){
$(this).each(function(){
//if(""==this.value.trim()){
if(""==$(this).val().trim()){
$(this).addClass("blur");
}else{
$(this).removeClass("blur");
}
});
});
});
</script>
<style type="text/css">
.blur{
border:1px solid red;
}
</style>
</head>
<body>
<form action="">
用户名：<input type="text" name="ubane"/><br><br>
密 码：<input type="password" name="ubane"/><br><br>
邮 箱：<input type="text" name="ubane"/><br><br>
个人介绍：<textarea rows="10" cols="30"></textarea>
</form>
</body>
</html>
6.tbody交替变色操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo2.html</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
//当文档加载完毕触发匿名函数
$(document).ready(function(){
//有点区别，研究一下
$("tbody tr:even").css("background-color","blue");
$("tbody>tr:nth-child(even)").css("background-color","yellow");
$("tbody>tr:nth-child(odd)").css("background-color","red"); //会替换红颜色
});
</script>
</head>
<body>
<table border="1" bordercolor="teal">
<thead>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
</thead>
<tbody>
<tr id="row1" bgcolor="red" title="aa">
<td>1</td>
<td>redarmy</td>
<td>M</td>
<td>僵尸</td>
</tr>
<tr id="row2">
<td>2</td>
<td>kai</td>
<td>M</td>
<td>牛掰</td>
</tr>
<tr id="row3">
<td>3</td>
<td>redarmy2</td>
<td>M</td>
<td>僵尸</td>
</tr>
<tr id="row4">
<td>4</td>
<td>redarmy3</td>
<td>M</td>
<td>僵尸</td>
</tr>
<tr>
<td>5</td>
<td>redarmy4</td>
<td>M</td>
<td>僵尸</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery总结第三天（实用案例介绍）
- jQuery总结第三天（实用案例介绍）
- jQuery实用函数用法总结
- Linux集群服务知识点总结及通过案例介绍如何实现高性能web服务（三）
- jQuery心得4--jQuery案例剖析2-开发实用案例
- jquery的事件总结实用篇（持续更新）
- <学习CSS>第三天笔记-css外观属性（颜色、行间距、对齐、首行缩进、字间距、单词间距 、颜色半透明、阴影）快捷方式、综合案例、引入CSS样式表（内部样式表、行内式、外部样式表）、三种样式表总结
- jQuery插件autoComplete介绍(10级学员 张帅鹏总结)
- Linux集群服务知识点总结及通过案例介绍如何实现高性能web服务
- 史上最全最实用的CCNA实验案例（总结）
- jQuery实用的语法总结
- 用一个案例介绍jQuery插件的使用和写法
- SQL Delta实用案例介绍
- 转 实用的中文版jQuery语法总结及注意事项
- SQL Delta实用案例介绍
- jQuery学习大总结(二)jQuery选择器完整介绍
- 前端 jquery-ajax 的简单案例分析和总结
- jquery,tree无限级树形菜单+简单实用案例
- jQuery移动和复制dom节点实用DOM操作案例
- jQuery实用基础超详细介绍