在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
 1 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>下拉列表</title>

         <script src="jquery-1.11.2.min.js"></script>

     </head>

     <body>

     <select id="sel">

         <!--文本框-->

     </select>

     <input type="text" id="shuru" />

     <input type="button" value="添加" id="btn" />

     <input type="button" value="移除" id="yichu" />

     </body>

     <script type="text/javascript">

         $("#btn").click(function(){

             var v = $("#shuru").val();

             var str = "<option value='"+v+"'>"+v+"</option>";

             $("#sel").append(str);//append追加意思

         })

     $("#yichu").click(function(){

         var v = $("#shuru").val(); 

         $("[value='"+v+"']").remove(); //移除

     })

     </script>

 </html>
开关灯效果，遮罩层
 1 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>下拉列表</title>

         <script src="jquery-1.11.2.min.js"></script>

         <style type="text/css">

     #zz{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:black; z-index:5;filter:alpha(opacity=50);

     -moz-opacity:0.5;

     -khtml-opacity: 0.5;

     opacity: 0.5;}

     </style>

     </head>

     <body>

     <div id="shang" style="position:absolute; z-index:10; left:100px; top:100px;">

     <input type="button" value="关灯" id="guan" />

     <input type="button" value="开灯" id="kai" />

     </div>

     </body>

     <script type="text/javascript">

     $("#guan").click(function(){

         var str = "<div id='zz'></div>";

         $("body").append(str);

         $(this).css("display","none");

         $("#kai").css("display","block");

     })

     $("#kai").click(function(){

         $("#zz").remove();

         $("#guan").css("display","block");

         $(this).css("display","none");

     })

     </script>

 </html>



												


											
jquery做一些小的特效的更多相关文章
	

    
								
  1. jquery做一个小的轮播插件---有BUG，后续修改
		
    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
    
		
    2. 
						
  2. JQuery仿购物网站放大镜特效所遇问题及思考
		
    JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...
    
		
    3. 
						
  3. jquery叠加页片自动切换特效
		
    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
    
		
    4. 
						
  4. 一款仿PBA官网首页jQuery焦点图的切换特效
		
    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
    
		
    5. 
						
  5. 一款非常炫酷的jQuery动态随机背景滚动特效
		
    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...
    
		
    6. 
						
  6. jquery实现多条件筛选特效代码分享
		
    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下:jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点. ...
    
		
    7. 
						
  7. jquery环形3D立体旋转特效
		
      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...
    
		
    8. 
						
  8. 一款jquery实现的整屏切换特效
		
    今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览   源码下载 html代码: < ...
    
		
    9. 
						
  9. jquery-1  jquery几个小实例
		
    jquery-1  jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Nginx - Windows下作为服务启动
			
    Nginx官方没有提供作为服务启动nginx的方案.以服务启动nginx依赖于winsw,当前最新版是1.19. 参考:https://segmentfault.com/a/1190000006807 ...
    
			
    2. 
						
  2. InnoDB还是MyISAM 再谈MySQL存储引擎的选择
			
    两种类型最主要的差别就是Innodb 支持事务处理与外键和行级锁.而MyISAM不支持.所以MyISAM往往就容易被人认为只适合在小项目中使用. 我作为使用MySQL的用户角度出发,Innodb和My ...
    
			
    3. 
						
  3. 同一台电脑上多个myeclipse破解的问题
			
    因为项目版本的问题,电脑上不得装了个myeclipe10版本的,但是破解之后,原来电脑上的myeclipse2014却显 示没有激活,好吧,我又去把myeclipse2014重新激活了一遍,但是到了m ...
    
			
    4. 
						
  4. 通用js地址选择器
			
    用js实现通用的地址选择器,省份,城市,地区自动关联更新 点击下面查看详细代码: http://runjs.cn/code/s8sqkhcv 关键地址库代码: var addr_arr = new A ...
    
			
    5. 
						
  5. Linux 利用lsof命令恢复删除的文件
			
    lsof命令 lsof命令用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所以需 ...
    
			
    6. 
						
  6. java-并发-不可变对象
			
    浏览以下内容前,请点击并阅读 声明 当一个对象创建后的状态不可改变时就认为其为不可变对象,尽可能地利用不可变对象被公认为是构建简单可靠代码的有效方法.不可变对象在并发程序中比较有用,由于其状态无法改变 ...
    
			
    7. 
						
  7. C++：一般情况下，设计函数的形参只需要两种形式
			
    C++:一般情况下,设计函数的形参只需要两种形式.一,是引用形参,例如 void function (int &p_para):二,是常量引用形参,例如 void function(const ...
    
			
    8. 
						
  8. 怎么将java web 项目导入idea 中
			
    1.将 java web 项目导 入idea 中, 显示 然后进行 Configure 配置. 2. 点击 open module settings. 3. 4. 选择jar包. 5. 6. 配置to ...
    
			
    9. 
						
  9. BFS/DFS算法介绍与实现（转）
			
    广度优先搜索(Breadth-First-Search)和深度优先搜索(Deep-First-Search)是搜索策略中最经常用到的两种方法,特别常用于图的搜索.其中有很多的算法都用到了这两种思想,比 ...
    
			
    10. 
						
  10. Python实战 :2017国考职业表excel转数据库，再查询生成excel
			
    最近看2017年国考的职业表,多而杂,不好过滤我想要的信息,特此把它转成Sqlite3数据库,再从数据库里把查询结果导出成excel,方便找职业. (后附上整套代码) 环境:python2.7   x ...
    
			
    11.