您的位置：首页 > Web前端 > JQuery

jQuery总结第三天（实用案例介绍）

2020-01-12 22:18 127 查看

1.窗体运行就加载函数的dom写法与jQuery的区别与jQuery的三种写法

[plain] view plaincopy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<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>

转载于:https://www.cnblogs.com/zhangguoliang521/archive/2013/03/21/3057475.html

点赞
收藏
分享
文章举报

diaoyinji6441 发布了0 篇原创文章 · 获赞 0 · 访问量 234 私信关注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

张国亮总结第三季