文章目录
1、软件系统开发定制软件系统开发定制动态添加和删除数据
案例演示：
实现步骤：
val()获取值，tr软件系统开发定制添加设置内容，append内部添加，slideDown向下滑动，val()清空
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery动态添加和删除数据</title> <link rel="stylesheet" href="css/style.css"> <script src="jquery.js"></script> </head> <body> <div> 课程名称：<input type="text" id="tname"> 所属学院：<input type="text" id="tdep"> <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"> </div> <table id="j_tb"> <tr> <th>课程名称</th> <th>所属学院</th> <th>已学会</th> </tr> <tr> <td>JavaScript</td> <td>信息工程系</td> <td><a href="javascrip:;" class="del">删除</a></td> </tr> <tr> <td>css</td> <td>信息工程系</td> <td><a href="javascrip:;" class="del">删除</a></td> </tr> <tr> <td>html</td> <td>信息工程系</td> <td><a href="javascrip:;" class="del">删除</a></td> </tr> <tr> <td>jQuery</td> <td>信息工程系</td> <td><a href="javascrip:;" class="del">删除</a></td> </tr> </table> <script> $(function(){ $("#j_btnAddData").click(function(){ var tname=$("#tname").val(); var tdep=$("#tdep").val(); // var tr=$("<tr></tr>"); // var td1=$("<td></td>"); // var td2=$("<td></td>"); // var td3=$("<td></td>"); // td1.html(tname); // td2.html(tdep); // td3.html('<a href="javascrip:;" class="del">删除</a>'); // tr.append(td1); // tr.append(td2); // tr.append(td3); var all =$("<tr><td>"+tname+"</td><td>"+tdep+"</td><td><a href='javascrip:;' class='del'>删除</a><td></tr>") $("#j_tb").append(all); all.slideDown(); $("#tname").val(""); $("#tdep").val(""); }) $("#j_tb").on("click","a",function(){ $(this).parents("tr").remove(); }) }) </script> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
2、微博发布
案例演示：
实现步骤：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; display: none; } input { float: right; } ul li a { float: right; } </style> <script src="jquery.js" type="text/javascript" charset="utf-8"></script> <script> $(function(){ $(".btn").click(function(){ var txt =$(".txt").val(); console.log(txt); var li=$("<li></li>"); li.html(txt+"<a href='javascript:;'>删除</a>"); $("ul").prepend(li); li.slideDown(); $(".txt").val(""); }) $("ul").on("click","a",function(){ // $(this).parent().slideUp(function(){ $(this).parent().remove(); // }) }) }) </script></head><body> <div class="box" id="weibo"> <span>微博发布</span> <textarea name="" class="txt" cols="30" rows="10"></textarea> <button class="btn">发布</button> <ul> </ul> </div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
3、移动水果
案例演示：
实现步骤：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> select { width: 200px; height: 300px; font-size: 22px; background-color: #80ff45; } </style> <script src="jquery.js" type="text/javascript" charset="utf-8"></script> </head><body> <select name="" id="sel1" class="sel1" size="4" multiple> <option value="">香蕉</option> <option value="">大鸭梨</option> <option value="">苹果</option> <option value="">大西瓜</option> </select> <button class="allright">>>></button> <button class="allleft"><<<</button> <button class="right">></button> <button class="left"><</button> <select name="" id="sel2" class="sel2" size="4" multiple> </select><script type="text/javascript">$(function(){ $(".allright").click(function(){ $("#sel2").prepend($("#sel1 option")); }) $(".allleft").click(function(){ $("#sel1").prepend($("#sel2 option")); }) $(".right").click(function(){ $("#sel2").prepend($("#sel1 option:selected")) }) $(".left").click(function(){ $("#sel1").prepend($("#sel2 option:selected")) })}) </script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
4、上下拉切换
案例演示：
实现步骤：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript" src="jquery.js"> </script> <style> div{ width: 300px; height: 500px; background-color: #00FFFF; } </style> <body> <button type="button">下拉</button> <button type="button">上拉</button> <button type="button">切换</button> <div></div> <script type="text/javascript"> $(function(){ $("button").eq(0).click(function(){ $("div").slideDown(); }) $("button").eq(1).click(function(){ $("div").slideUp(); }) $("button").eq(2).click(function(){ $("div").slideToggle(); }) }) </script> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
5、精品演示
案例演示：
实现步骤：
获取下标，对应内容通过下标show，其他hide
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } a { text-decoration: none; } .wrapper { width: 250px; height: 248px; margin: 100px auto 0; border: 1px solid pink; border-right: 0; overflow: hidden; } #left, #content { float: left; } #left li { background: url(images/lili.jpg) repeat-x; } #left li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; } #left li a:hover { background-image: url(images/abg.gif); } #content { border-left: 1px solid pink; border-right: 1px solid pink; } </style> <script src="jquery.js"></script> <script> $(function(){ $("#left li").click(function(){ //获取点击的数组下标 var index=$(this).index(); $("#content div").eq(index).show().siblings().hide(); }) }) </script></head><body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> </ul> <div id="content"> <div> <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a> </div> <div> <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a> </div> </div> </div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
6、tab标签切换
案例演示：
实现步骤：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="jquery.js"> </script> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; } </style></head><body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内容 </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价（50000）模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> <script> $(function(){ $(" ul li").mouseover(function(){ var index = $(this).index() $(".item").eq(index).show().siblings().hide(); $("ul li").eq(index).addClass("current").siblings().removeClass("current"); }) }) </script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
7、突出显示
案例演示：
实现步骤：
触碰透明度0.5 离开透明度 1 （opacity）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } body { background: #000; } .wrap { margin: 100px auto 0; width: 630px; height: 394px; padding: 10px 0 0 10px; background: #000; overflow: hidden; border: 1px solid #fff; } .wrap li { float: left; margin: 0 10px 10px 0; } .wrap img { display: block; border: 0; } </style><script type="text/javascript" src="../jquery.js"> </script> <script> $(function(){ $("ul li").mouseover(function(){ var index=$(this).index(); $("li").eq(index).siblings().stop().animate({ opacity:0.5 }) }) $("ul li").mouseout(function(){ var index=$(this).index(); $("li").eq(index).stop().siblings().stop().animate({ opacity:1 }) }) }) </script></head><body> <div class="wrap"> <ul> <li> <a href="#"><img src="images/01.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/02.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/03.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/04.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/05.jpg" alt="" /></a> </li> <li> <a href="#"><img src="images/06.jpg" alt="" /></a> </li> </ul> </div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
8、
案例演示：
实现步骤：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="jquery.js"></script> </head> <body> <script> $(function(){ $(".wrap>li").mouseover(function(){ $(this).children("ul").stop().slideDown(); }) $(".wrap>li").mouseout(function(){ $(this).children("ul").stop().slideUp(); }) }) </script> <ul class="wrap"> <li class="cc"> 微博 <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">添加好友</a></li> </ul> </li> </ul> </body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
9、页面滚动
案例演示：
实现步骤：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 2000px; } .back { position: fixed; width: 50px; height: 50px; background-color: pink; right: 30px; bottom: 100px; display: block; } .container { width: 900px; height: 500px; background-color: skyblue; margin: 400px auto; } </style> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script></head><body> <div class="back">返回顶部</div> <div class="container"> </div> <script> $(function() { $(window).scroll(function(){ var scrollTop=$(document).scrollTop(); var top=$(".container").offset().top; if(scrollTop>=top){ $(".back").fadeIn(); }else{ $(".back").fadeOut(); } }) $(".back").click(function(){ // $(document).scrollTop(0); $("html,body").stop().animate({//动画效果只能是元素去做，不能是文档 scrollTop:0 }) }) }) </script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
10、王者手风琴
案例演示：
实现步骤：
<!doctype html><html><head> <meta charset="utf-8"> <title>手风琴案例</title> <style type="text/css"> * { margin: 0; padding: 0; } img { display: block; } ul { list-style: none; } .king { width: 852px; margin: 100px auto; background: url(images/bg.png) no-repeat; overflow: hidden; padding: 10px; } .king ul { overflow: hidden; } .king li { position: relative; float: left; width: 69px; height: 69px; margin-right: 10px; } .king li.current { width: 224px; } .king li.current .big { display: block; } .king li.current .small { display: none; } .big { width: 224px; display: none; } .small { position: absolute; top: 0; left: 0; width: 69px; height: 69px; border-radius: 5px; } </style></head><body> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(function() { $(".king li").mouseover(function(){ $(this).stop().animate({ width:224 }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); }) $(".king li").mouseout(function(){ $(this).stop().animate({ width:69 }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut() }) }) </script> <div class="king"> <ul> <li class="current"> <a href="#"> <img src="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/l1.jpg" alt="" class="small"> <img src="images/l.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/c1.jpg" alt="" class="small"> <img src="images/c.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/w1.jpg" alt="" class="small"> <img src="images/w.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/z1.jpg" alt="" class="small"> <img src="images/z.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/h1.jpg" alt="" class="small"> <img src="images/h.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/t1.jpg" alt="" class="small"> <img src="images/t.png" alt="" class="big"> </a> </li> </ul> </div></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
总结
li:first li:last li:eq(2) li:odd --奇数 li:even --偶数
ul li --子代
ul<li --后代
hide()
show()
siblings()
$(this).index()
.click
.mouseover
.mouseout
addClass()
removeClass()
css(“background”,“red”)
slideDown()
slideUp()
slideToggle()
hover()
animite()
fadeIn()
fadeOut()
fadeTo(“show”,0.5)
each(function(index,element))
$.extend(a,b)
$.extend(true,a,b)
on({click:function(){}})
on("","",function(){})
append() repend() before() after() remove() after()
val() text() html()
offset().top offset().left postion() postion().top
$(document).scrollTop()
$(window).scroll()
$(“body,html”).animate({})
prop()
prop("","") --固有属性
attr()
attr("","")–自定义属性
checked --固有属性