在文本框里输入内容到添加到下拉列表里，移除下拉里的内容
 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. 微服务中的netty
			
    一般使用netty主要是整个netty流程的理解,实际开发中服务端.客户端参数的配置,以及连接 handle的管理是关键,再有就是encode和decode编码.解码. 服务端流程图 客户端流程图包含 ...
    
			
    2. 
						
  2. Hackerrank11  LCS Returns 枚举+LCS
			
    Given two strings,  a and , b find and print the total number of ways to insert a character at any p ...
    
			
    3. 
						
  3. System中记录体函数命名怪异
			
    //1019unit System; 中发现记录体函数命名怪异//乍一看,很怪异,其实是结构体里面 的变量后面直接写 函数类型了.不像传统先定义T***Event      = procedure(S ...
    
			
    4. 
						
  4. Linux内核笔记——内存管理之slab分配器
			
    内核版本:linux-2.6.11 内存区和内存对象 伙伴系统是linux用于满足对不同大小块内存分配和释放请求的解决方案,它为slab分配器提供页框分配请求的实现. 如果我们需要请求具有连续物理地址 ...
    
			
    5. 
						
  5. underscorejs 源码走读笔记
			
    Underscore 简介 Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象.它弥补了部分jQuery ...
    
			
    6. 
						
  6. App Framework $.ui.loadContent 参数解释
			
    在使用 app Framework 的 $.ui.loadContent(target,newTab,goBack,transition);时 对 newTab goback两个参数一直不得其解.通过 ...
    
			
    7. 
						
  7. [RxJava^Android]项目经验分享 --- 失败重试
			
    简单介绍一下业务逻辑:获取字符串,如果获取失败进行10次重试,超出10次未成功视为失败. 模拟获取字符串场景 代码块 class MsgTool { int count; String getMsg( ...
    
			
    8. 
						
  8. JAXP简介
			
    JAXP(Java API for XML Processing,意为XML处理的Java API) JAXP是SUN公司推出的,集成在javase中的用来解析和操作XML的应用程序接口,解析XML文 ...
    
			
    9. 
						
  9. PHP常见的低级错误
			
    写代码的时候,最讨厌的莫过于因为粗心而范的低级错误了,下面这些,你们是不是也经常犯呢? 1.标点符号缺失,诸如:“$”(美元符),“,”(逗号),“;”(分号),"->"(单 ...
    
			
    10. 
						
  10. c和oc小知识
			
    1.const const 修饰了*p1 / *p2 const int * p1=&age; int const * p2=&age;//和上面的意义一样 ,换句话说就是 在 “ * ...
    
			
    11.