jquery做一些小的特效

最新推荐文章于 2024-02-14 08:38:17 发布

acxl0372

最新推荐文章于 2024-02-14 08:38:17 发布

阅读量100

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aqxss/p/6250943.html

版权

 在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉列表</title>
 6         <script src="jquery-1.11.2.min.js"></script>
 7     </head>
 8     <body>
 9     <select id="sel">
10         <!--文本框-->
11     </select>
12     <input type="text" id="shuru" />
13     <input type="button" value="添加" id="btn" />
14     <input type="button" value="移除" id="yichu" />
15     </body>
16     <script type="text/javascript">
17         $("#btn").click(function(){
18             var v = $("#shuru").val();
19             var str = "<option value='"+v+"'>"+v+"</option>";
20             $("#sel").append(str);//append追加意思
21         })
22         
23     $("#yichu").click(function(){
24         var v = $("#shuru").val(); 
25         
26         $("[value='"+v+"']").remove(); //移除
27     })    
28     </script>
29 </html>

开关灯效果，遮罩层
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉列表</title>
 6         <script src="jquery-1.11.2.min.js"></script>
 7         <style type="text/css">
 8     #zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50); 
 9     -moz-opacity:0.5; 
10     -khtml-opacity: 0.5; 
11     opacity: 0.5;}
12     </style>
13     
14     </head>
15     <body>
16     <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">
17     <input type="button" value="关灯" id="guan" />
18     <input type="button" value="开灯" id="kai" />
19     </div>
20     </body>
21     
22     <script type="text/javascript">
23     $("#guan").click(function(){
24         var str = "<div id='zz'></div>";
25         $("body").append(str);
26         $(this).css("display","none");
27         $("#kai").css("display","block");
28     })
29     $("#kai").click(function(){
30         $("#zz").remove();
31         $("#guan").css("display","block");
32         $(this).css("display","none");
33     })
34 
35     </script>
36 </html>

转载于:https://www.cnblogs.com/aqxss/p/6250943.html

acxl0372

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery做一些小的特效

在文本框里输入内容到添加到下拉列表里，移除下拉里的内容 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表</title> 6 <s...
复制链接

扫一扫