================================================================================================================================================================
//评分控件,心得体会:1.text() 和val()的区别 2.addClass() 和 .css() 两个用法的比较 3.学会使用标识
================================================================================================================================================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JQuery/1.7.1/jquery-1.7.1.js"></script>
<style>
#dv span
{
font-size: 50px;
width: 260px;
background-color: #cccccc;
color: Yellow;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function () {
var isChecked;
$("#dv>span").mousemove(function () {
if (!isChecked) {
$(this).text("★").prevAll().text("★").end().nextAll().text("☆");
}
}).mouseout(function () {
if (!isChecked) {
$("#dv>span").text("☆");
}
}).click(function () {
isChecked = this;
})
})
//心得体会
</script>
</head>
<body>
<div id="dv">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>
</body>
</html>
================================================================================================================================================================
//在布局的时候遇到了问题,float:left;要让两个都在同一排,必须同时float:XXX;
================================================================================================================================================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.power
{
width:150px;
height:100px;
}
.f {float:left;}
#ctrl input {width:50px;}
#ctrl {margin-left:20px;margin-right:20px;}
</style>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
// 子.appendTo(父)
$(function () {
$("#btn1").click(function () {
$("#from :selected[jk!=has]").attr("jk", "has").clone().appendTo("#to");
});
})
</script>
</head>
<body>
<form method="post">
<select id="from" size="8" multiple="multiple" class="power f">
<option value="admin">管理员</option>
<option value="teacher">教师</option>
<option value="student">学员</option>
<option value="other">游客</option>
<option value="others">其他...</option>
</select>
<div id="ctrl" class="f">
<input type="button" name="name" value=">" id="btn1" /><br />
<input type="button" name="name" value="<" id="btn2" /><br />
<input type="button" name="name" value=">>" id="btn3" /><br />
<input type="button" name="name" value="<<" id="btn4" />
</div>
<select id="to" size="8" multiple="multiple" class="power f">
</select>
</form>
</body>
</html>
================================================================================================================================================================
//1.美女图片切换,使用了animate(),注意他的用法,//2.产生动画的图片,position:relative 必须设置成相对定位才出现效果 //3.选择器和过滤器的用法,注意区分
================================================================================================================================================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jquery/jquery-1.7.1.js"></script>
<style>
#show
{
width: 448px;
height: 280px;
overflow: hidden;
}
img
{
position: relative;
}
#sel li
{
list-style-type: none;
border: 1px solid green;
width: 180px;
margin-bottom:5px;
padding-left: 100px;
}
</style>
<script type="text/javascript">
$(function () {
$("ul li").mouseover(function () {
//停止上一次的操作
$("#show :animated").stop();
//$("#div :animated").stop();
var $i = $(this).attr("title");
$("#show img").animate({ left: -(parseInt($i) - 1) * 448 + "px" }, 200);
// $("#show img").animate({ left: -($(this).text() - 1) * 448 + "px"}, 200);
})
})
</script>
</head>
<body>
<div id="sel">
<ul>
<li title="1">图片1</li>
<li title="2">图片2</li>
<li title="3">图片3</li>
<li title="4">图片4</li>
<li title="5">图片5</li>
<!-- <li title="1">1</li>
<li title="2">2</li>
<li title="3">3</li>
<li title="4">4</li>
<li title="5">5</li>-->
</ul>
</div>
<div id="show">
<img src="images/animation.gif" />
</div>
</body>
</html>
================================================================================================================================================================
//播放器第一个版本 布局问题 选择器标签的用法
================================================================================================================================================================
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jquery/jquery-1.7.1.js"></script>
<style type="text/css">
#btns input
{
float: left;
margin-left: 8px;
margin-top: 15px;
}
#options
{
background-color: pink;
}
#options li
{
list-style-type: none;
cursor: pointer;
border: 1px solid green;
}
#list ul
{
display: none;
}
</style>
<script type="text/javascript">
$(function () {
//显示和隐藏功能模块
$("#list>*:even").toggle(function () {
$(this).next().slideDown("normal");
$(this).attr("tagopen", "open");
}, function () {
$(this).next().slideUp("normal");
$(this).removeAttr("tagopen");
})
//全选
$("#selectAll").click(function () {
$("#list>li[tagopen='open']+ul input").removeAttr("tag").attr("checked", "checked")
});
//全不选
$("#selectNon").click(function () {
if (true) {
$("#list>li[tagopen='open']+ul input").removeAttr("checked").removeAttr("tag");
}
});
//反选
$("#selectRe").toggle(function () {
//先标记区分一下,在全选和反选里面去掉标记
$("#list input:[checked='checked']").attr("tag", "remove").removeAttr("checked");
//没有被选择
$("#list input:not[:checked]:[tag!=remove]").attr("checked", "checked");
},function () {
$("#list input:[checked='checked']:[tag!=remove]").removeAttr("checked");
//没有被选择
$("#list input:not[:checked]:[tag=remove]").attr("checked", "checked");
}
);
})
</script>
</head>
<body>
<div id="main" style="margin-left: 100px; border: 1px solid green; width: 200px">
<div id="btns">
<input type="button" value="全选" id="selectAll" />
<input type="button" value="反选" id="selectRe" />
<input type="button" value="全不选" id="selectNon" />
</div>
<hr style="border: 4px groove green; clear: both" />
<div id="options">
<ul id="list">
<li id="group1">经典歌曲</li>
<ul>
<li>
<input type="checkbox" value="天使的翅膀" />天使的翅膀<br />
</li>
<li>
<input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
</li>
<li>
<input type="checkbox" value="花香" />花香<br />
</li>
<li>
<input type="checkbox" value="男人海洋" />男人海洋<br />
</li>
<li>
<input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
</li>
<li>
<input type="checkbox" value="大约在冬季" />大约在冬季<br />
</li>
<li>
<input type="checkbox" value="王妃" />王妃<br />
</li>
<li>
<input type="checkbox" value="突然的自我" />突然的自我<br />
</li>
</ul>
<li id="group2">最经播放</li>
<ul>
<li>
<input type="checkbox" value="天使的翅膀" />天使的翅膀<br />
</li>
<li>
<input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
</li>
<li>
<input type="checkbox" value="花香" />花香<br />
</li>
<li>
<input type="checkbox" value="男人海洋" />男人海洋<br />
</li>
<li>
<input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
</li>
<li>
<input type="checkbox" value="大约在冬季" />大约在冬季<br />
</li>
<li>
<input type="checkbox" value="王妃" />王妃<br />
</li>
<li>
<input type="checkbox" value="突然的自我" />突然的自我<br />
</li>
</ul>
<li id="group3">所有好歌</li>
<ul>
<li>
<input type="checkbox" value="天使的翅膀" />天使的翅膀<br />
</li>
<li>
<input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
</li>
<li>
<input type="checkbox" value="花香" />花香<br />
</li>
<li>
<input type="checkbox" value="男人海洋" />男人海洋<br />
</li>
<li>
<input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
</li>
<li>
<input type="checkbox" value="大约在冬季" />大约在冬季<br />
</li>
<li>
<input type="checkbox" value="王妃" />王妃<br />
</li>
<li>
<input type="checkbox" value="突然的自我" />突然的自我<br />
</li>
</ul>
<li id="group4">港台金曲</li>
<ul>
<li>
<input type="checkbox" value="天使的翅膀" />天使的翅膀<br />
</li>
<li>
<input type="checkbox" value="寂寞沙洲" />寂寞沙洲<br />
</li>
<li>
<input type="checkbox" value="花香" />花香<br />
</li>
<li>
<input type="checkbox" value="男人海洋" />男人海洋<br />
</li>
<li>
<input type="checkbox" value="爱情呼叫转移" />爱情呼叫转移<br />
</li>
<li>
<input type="checkbox" value="大约在冬季" />大约在冬季<br />
</li>
<li>
<input type="checkbox" value="王妃" />王妃<br />
</li>
<li>
<input type="checkbox" value="突然的自我" />突然的自我<br />
</li>
</ul>
</ul>
</div>
</div>
</body>
</html>
=============================================================================================================================================================
//计算器Jquery错误的做法,为什么num1和num2监视的结果是Nan
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
var num1 = parseInt($("#num1").val());
var num2 = parseInt($("#num2").val())
var result;
$("#btn").click(function () {
var $oper = $("#operation>option:selected").text();
switch ($oper) {
case "请选择": alert("请选择运算方式"); break;
case "+": result = num1 + num2; break;
case "-": result = num1 - num2; break;
case "*": result = num1 * num2; break;
case "/": result = num1 / num2; break;
}
$("#result").val(result);
})
})
</script>
</head>
<body>
<input type="text" value="" id="num1" />
<select id="operation">
<option value="0" selected="selected">请选择</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" value="" id="num2" />
<input type="button" value="=" id="btn" />
<input type="text" id="result" />
</body>
</html>
======================================================================================================================================================
//计算器正确的做法
=====================================================================================================================================================
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//var num1 =parseInt($("#num1").val());
//var num2 = parseInt($("#num2").val())
var result;
$("#btn").click(function () {
var $oper = $("#operation>option:selected").text();
switch ($oper) {
case "请选择": alert("请选择运算方式"); break;
case "+": result = parseInt($("#num1").val()) + parseInt($("#num2").val()); break;
case "-": result = parseInt($("#num2").val()) - parseInt($("#num2").val()); break;
case "*": result = parseInt($("#num2").val()) * parseInt($("#num2").val()); break;
case "/": result = parseInt($("#num2").val()) / parseInt($("#num2").val()); break;
}
$("#result").val(result);
})
})
</script>
</head>
<body>
<input type="text" value="" id="num1" />
<select id="operation">
<option value="0" selected="selected">请选择</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" value="" id="num2" />
<input type="button" value="=" id="btn" />
<input type="text" id="result" />
</body>
</html>
================================================================================================================================================================
//无刷新品论Jquery版本,里面用到了appendTo()方法
================================================================================================================================================================
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jquery/jquery-1.7.1.js"></script>
<style type="text/css">
#main
{
background-color: coral;
margin: 0px auto;
width: 500px;
}
#dv
{
/*position:relative;*/
margin-left: 48px;
}
#btndv
{
margin-left: 422px;
}
.pContent
{
width: 422px;
margin-left: 78px;
}
</style>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//得到用户输入的昵称和内容
var $nickname = $("#nickname").val();
var $content = $("#content").val();
if ($nickname.length == 0) {
$nickname = "路人甲";
}
if ($nickname.length != 0 && $content != 0) {
$("<p id='pName'></p>").text($nickname +" "+ new Date().toLocaleTimeString()).appendTo($("#main"));
$("<p class='pContent'></p>").text($content).appendTo($("#main"));
//发表完毕之后,清空文本框中的内容
$("#nickname").val("");
$("#content").val("");
}
else {
alert("昵称和内容不能为空");
}
})
})
</script>
</head>
<body>
<div id="main">
<label for="nickname">昵称:</label><input type="text" name="nickname" id="nickname" />
<div id="dv">
<textarea id="content" cols="50" rows="10" maxlength="500"></textarea>
</div>
<div id="btndv">
<input type="checkbox" value="匿名" id="ni" />匿名
<input id="btn" type="button" value="发表" />
</div>
<hr style="border: 2px solid green" />
</div>
</body>
</html>
Jquery经典案例总结
最新推荐文章于 2024-07-30 03:35:05 发布