jquery1.9之学习笔记

最新推荐文章于 2023-06-26 17:25:37 发布

undergrowth

最新推荐文章于 2023-06-26 17:25:37 发布

阅读量951

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/undergrowth/article/details/20652193

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先来看看jquery的一些简单效果

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	
	<script type="text/javascript" src="js/importJquery.js"></script>
	<script type="text/javascript">
		$(function(){
		//绑定鼠标进入添加样式
			$("p").on("mouseenter",function(){
				$(this).addClass("test");
			});
			//绑定鼠标离开移除样式
			$("p").on("mouseleave",function(){
				$(this).removeClass("test");
			});
			//移动元素
			//移动到元素之后
			$("p").insertAfter($("#content"));
			//移动到元素之前
			$("#spanCon").insertBefore($("#content"));
			//移动到内容之中
			$("#spanMov").appendTo($("#content"));
			//复制元素
			$("#spanCon").clone().appendTo($("#content"));
			//清除内容
			//$("#content").empty();
			$("<p>插入的内容</p>").insertAfter($("#content"));
			
			//新建一个a标签 并添加到id为content的元素之后
			$("<a/>",{
				href:"http://www.baidu.com",
				html:"插入的超链接",
				"class":"test"
			}).insertAfter($("#content"));
			
			//数组操作
			//重复添加多个元素
			var myItems=[];
		    for(var i=0;i<6;i++)
		    {
		     myItems.push("<li>这是第"+i+"个</li>");
		    }
		    $("#testUl").append(myItems.join(""));
		    
		    //属性操作  匿名函数用于返回a标签的href的新值
		    $("a").attr("href",function(index,href){
		    	return "http://www.google.com";
		    });
		    //获取到jquery对象的指定位置的元素 eq获取到jquery object 
		    //get 获取到dom element
		    //每一个jquery object都是唯一的
		     console.log($("div").eq(0)==$("div").eq(0));
		    console.log($("div").get(0)==$("div").get(0)); 
		    
		   /*  $("div").eq(0).html($("span").eq(0).html()); */
		   
		});
	</script>
  </head>
  
  <body>
  <span id="spanMov">this is a span,move to content.</span>
  <span id="spanCon">this  is span.</span>
    <p>This is my JSP page. </p>
    <hr/>
    <div id="content" style="border:1px solid red">
      我是内容选择区
    </div>
    <ul id="testUl">
    </ul>
  </body>
</html>

看看效果:

上面展示了一些jquery的事件绑定、插入元素、移动元素、修改元素的属性以及jquery与dom操作的区别

再来分别看看jquery的一些模块:

1.ajax--Asynchronous JavaScript and XML--

不过按照jquery的官方手册所说的那样,虽然名字叫ajax,但是ajax传输数据都是使用纯html文本或者是json

看看测试代码 ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
	$(function(){
	//get数据 异步发送请求
		$.get("data.jsp",function(data){
			console.log(data);
		});
		
    
    //ajax请求
     $.ajax({
    	url:"data.jsp",
    	data:{name:"张三"},
    	type:"get",
    	dataType:"text",
    	timeout:"2000",
    	success:function(response,xhr,status){
    		console.log("the data is "+response);
    	},
    	error:function(xhr,status){
    		console.log("the request is error.");
    	} ,
    	complete:function(xhr,status){
    		console.log("完成请求");
    	} 
    	}); 
    	
    	$("#loginForm").submit(function(event){
    		if($("input[name='username']").val().length==0){
    			 alert("用户名不能为空!!");
    			 return false;
    		}
    		if($("input[name='password']").val().length==0){
    			 alert("密码不能为空!!");
    			 return false;
    		}
    		event.preventDefault(); //阻止表单提交
    		event.stopPropagation(); //阻止表单冒泡
    		 $.ajax({
    			url:"jquery/form1.action",
    			data:$("#loginForm").serialize(),
    			type:"get",
    			success:function(response,xhr,sts){
    				if(response=="true") {
    				  //alert("通过密码验证"+response);
    				  $(window).attr("location","index.jsp");
    				}
    				else alert("账号或者密码出错"+response);
    			} 
    			
    		});
    	});
    
    		
	});
</script>
</head>
<body>
  ajax测试界面
  <hr/>
  <form id="loginForm" action="jquery/form1.action">
  用户名:<input type="text" name="username" />
 密码:<input type="text" name="password"> 
 <input type="submit" value="提交"/>
  </form>
</body>
</html>

data.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String value=(String)request.getParameter("name");
if("张三".equals(value))
	response.getWriter().write("返回数据,数据为"+value);
else
  	response.getWriter().write("无法返回数据");
	

%>

看看控制台:

查看上面的控制台输出你会发现在ajax.jsp的测试页面发起了get和ajax两个异步请求 get没有传递参数name 而ajax传递了参数name 所以在控制台的输出不一样为避免中文乱码的现象产生将ajax.jsp和data.jsp页面的编码都设为utf-8即可

上面测试代码还有一个表单的验证与异步提交功能当输入12和张三后会跳转到index.jsp界面

struts.xml 的配置代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
  <package name="jquery" namespace="/jquery" extends="struts-default">
   <action name="form1" class="com.undergrowth.FormTest" method="execute">
     <result name="success">
       /index.jsp
     </result>
     <result name="fail">
       /data.jsp
     </result>
   </action>
   <action name="form2" class="com.undergrowth.FormTest" method="trans">
     <result name="success">
       /index.jsp
     </result>
     <result name="fail">
       /data.jsp
     </result>
   </action>
  </package>
</struts>

action的代码很简单

package com.undergrowth;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

public class FormTest {
	private String username;
	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	private String password;
	
	public void execute()
	{
		//String retString=null;
		String retValueString="";
		try {
			if("12".equals(username)&&"张三".equals(password))
				retValueString="true";
				else {
					retValueString="false";
				}
			//System.out.println(username+" "+password);
			HttpServletResponse response = ServletActionContext.getResponse();
			response.setContentType("application/text;charset=utf-8");
			PrintWriter writer = response.getWriter();
			writer.write(retValueString);
			writer.flush();
			writer.close();
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		//return retString;
		
		
	}
	
	public String trans()
	{
		String retValueString="";
		if("12".equals(username)&&"张三".equals(password))
			retValueString="success";
			else {
				retValueString="fail";
			}
		return retValueString;
	}
}

在用户名和密码框分别输入12和张三即可跳入到index.jsp界面

上面即使 jquery的ajax的三个测试代码其实无论是get还是post 都是使用ajax方法来进行交互的并且ajax方法接受一个plainObject对象很方便处理

2.effect---效果

看看测试代码通过不同的方式隐藏元素

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
	$(function(){
	//alert($("p").first().width()+" 高度为:"+$("p").first().height());
		//隐藏 slow normal fast 500ms
		//hide改变高度和宽度
		$("p").first().hide(function(){
			//alert($("p").first().width()+" 高度为:"+$("p").first().height());
		});
	   // alert($("p").first().width()+" 高度为:"+$("p").first().height());
	   //slide 改变高度  向上滑动隐藏效果
	    $("div").first().slideUp(300,function(){
	    	//alert($(this).width()+" 高度为:"+$(this).height());
	    	});
	    //fade 改变透明度 隐藏元素 通过改变透明度
	    $("a").first().fadeOut(300);
	    //toggle 开关显示或者隐藏
	   // $("p").toggle(1000);
	   //延时段落
	   $("p").first().toggle(1000).delay(1000).show(1000);
	   
	   //停止段落
	  // $("body *").filter(":animated").stop();
	   
	   //使用animate自定义动画
	   $("span").last().animate({
	   	left:"500",
	   	top:"300",
	   	opacity:0.25
	   },1000,function(){
	   	console.log("完成动画");
	   });
	   
	});
</script>
</head>
<body>
 <p>隐藏段落1</p>
 <div>
  隐藏区块1
 </div>
 <a href="http://www.baidu.com">隐藏链接</a>
 <span>隐藏span1</span>
</body>
</html>

效果:

3.event---事件

测试代码 event.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript" src="js/jquery.simulate.js"></script>
<script type="text/javascript">
	$(function(){
	//hover事件 提供一个函数 则mouseenter和mouseleave都调用这个函数
	     $("p").first().hover(function(){
	    	$(this).toggleClass("test");
	    }); 
	//事件委托给document  新添加的元素也能够响应相应的事件
	 $(document).on("click","span",function(){
		console.log($(this).text());
	});  
	//新建一个span 添加到第一个div中  因为上面span的click事件委托给了document 所以这个添加的span也具有click响应事件
	$("<span>最后一个span</span>").appendTo($("div").first());
	
	//显示事件相关的内容   传递事件数据给事件处理器
	$("div").last().click({name:"qq"},function(eventObject){
		var $th=$(this);
		//显示事件的详细信息
		$th.html($th.text()+"<br/>事件类型为:"+eventObject.type+"<br/>pageX,pageY:"+eventObject.pageX
		+","+eventObject.pageY
		+"<br/>数据为:"+eventObject.data.name+"<br/>目标dom的内容为:"+$(eventObject.target).text()
		+"<br/>时间为:"+eventObject.timeStamp+"<br/>命名空间为:"+eventObject.namespace
		+"<br/>按钮为:"+eventObject.which+"<br/>所有事件为:"+eventObject);
		
		console.dir(eventObject);
	});
	//on绑定多个事件
	$("p").first().on("click focus",function(){
		console.log($(this).text());
	});
	
	
	//取消a标签的链接
	/* $("a").last().click(function(eventObject){
		eventObject.preventDefault();
		alert($(this).text());
	}); */
	
	var pText=$("p").last().text();
	window.console.log(pText);
	
	//on绑定事件的另一种写法
	$("a").last().on({
		mouseenter:function(){
			console.log("a标签的悬停");
		},
		mouseleave:function(){
			console.log("a标签的离开");
		}
	});
	
	
	//事件委托
	/* $("ul").on("mouseenter","li",function(){
		//alert($(this).text());
		$("a").last().simulate("click");
		
	}); */
	
	
	//
	
	});

</script>
</head>
<body>
	<p>这是事件测试代码</p>
	<span>事件一</span>
	<span>事件二</span>
	<div></div>
	<div>显示事件属性</div>
	<ul>
	<li><a href="http://www.baidu.com">取消链接</a></li>
	<li>测试li</li>
	</ul>
	
</body>
</html>

效果

其实对于eventObject 在chrome里的控制台都有输出与界面上的显示一致

4.load事件与ajax的全局事件与对象愿意模型

测试代码 load.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
 
 
 //对象原意模型 plainObject
    var dealFuncObj={
    	loadComplete:function(response,status,xhr){
    		console.log("装载完成,状态为:"+status);
    	},
    	ajaxComplete:function(event,request,settings){ 
    	  // alert(settings.url);
    	 // $("#disLoadContent2").html($("#disLoadContent2").html()+"<br/>url:"+settings.url);
    	 console.log("结束ajax");
    	},
    	ajaxSuccess:function(data,status,xhr){
    		$("#disLoadContent3").html($("#disLoadContent3").html()+"<br/>data:"+data);
    	},
    	ajaxError:function(event,request,settings){
    		if(settings.url=="ajax/error.jsp") {
    			$("div.error").text("该"+settings.url+"不存在");
    		}
    	},
    	ajaxStart:function(){
    		console.log("开始ajax");
    	}
    }; 

    $(function(){
    //给div添加css样式
    $("div").css({
    	border:"1px red solid",
    	marginTop:"5px"
    });
    
    //只会在第一次进行ajax的时候 才调用ajax
    $(document).ajaxStart(dealFuncObj.ajaxStart);
    
    
      //使用load获取页面指定内容 填充到该页面id为disLoadContent的div
    	$("#disLoadContent").load("loadData.jsp #content");
    	//传递数据  返回数据  获取整个页面内容
    	$("#disLoadContent2").load("loadData.jsp",{name:"张三"},dealFuncObj.loadComplete);
    	
    	//ajaxComplete   全局事件 每一个ajax调用完成  即调用此方法
    	$(document).ajaxComplete(dealFuncObj.ajaxComplete);
    	//当ajax出错时  调用
    	$(document).ajaxError(dealFuncObj.ajaxError);
    	
    	
    	
    	//global属性将全局的事件屏蔽掉
    	$.ajax({
    		url:"loadData.jsp",
    		data:{name:"张三"},
    		global:false, //屏蔽全局的ajax事件
    		type:"get",
    		success:dealFuncObj.ajaxSuccess
    	});
    	
    	$("div.error").load("ajax/error.jsp");
    	
    	//解析对象或者数组为查询字符串
    	var dataOri={a:[1,2,3]};
    	var dataObj={one:1,two:2,three:3};
    	$("div>span").each(function(){
    		$(this).text($.param(dataObj)+" "+$.param(dataOri));
    	});
    });
	
	
	
</script>
</head>
<body>
	<div id="disLoadContent"></div>
	<div id="disLoadContent2"></div>
	<div id="disLoadContent3"></div>
	<div class="error"></div>
	<div>
	 <span></span>
	</div>
</body>
</html>

loadData.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
  <div id="content">显示load的数据</div>
  <%
    if("张三".equals(request.getParameter("name"))){
   %>
  <div>显示load的另外数据</div>
  <%
  }
   %>
  
</body>
</html>

效果

5.对象原意模型与模块模型

测试代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript">
  //对象原意模型 对象原意模型中的所有成员都是共有的
  var objectLiteral={
  	onReady:function(){
  	   $("p").first().hover(objectLiteral.addBackColor); 
  	   $("span").first().on("click",myModulePatt.sayDisPriText);
  	   //添加多个类
  	   $("span").last().text(myModulePatt.disPubText).addClass("selected test");
  	   //添加类匿名函数
  	   $("div").addClass(objectLiteral.addClassByIf);
  	},
  	addBackColor:function(){
  	  $(this).toggleClass("test");	
  	},
  	addClassByIf:function(idx,currClass){
  	   var newClass="selected";
  	   	if(currClass.length==0) newClass="test";
  	   	return newClass;
  	   }
  };
  
  //模块模型编程 只有通过return返回的变量还有函数才是共有的  可以被外部所访问
  var myModulePatt=(function(){
  	var disPriText="显示私有的模块模型编程";
  	var disPubText="显示公有的模块模型编程";
  	var sayDisPriText=function(){
  	    console.log(disPriText);
  		$(this).text(disPriText);
  	};
  	return{
  		disPubText:disPubText,
  		sayDisPriText:sayDisPriText
  	};
  })();
  
  $(objectLiteral.onReady);
  
</script>
</head>
<body>
 <p>这是对象原意模型测试段落</p>
 <span>测试模块模型编程</span><hr/>
 <span>测试模块模型编程</span>
 <div>测试添加多个类的方法</div>
</body>
</html>

效果

6.查找元素与其他

测试

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/importJquery.js"></script>
<script type="text/javascript">
	$(function(){
	var saveContent=$("#surPar2");
	//找到父类 parent找到上一级父类  parents找到上一级所有父类
		saveContent.html(saveContent.text()+"<br/>"+$("#childPa").parent().text());
		saveContent.html(saveContent.text()+"<br/>"+$("#childPa").parents().length);
		/* $("#childPa").parents().each(function(idx,ele){
			
		}); */
		//找到最近的父亲
		//alert($("#childPa").closest("p").length);
		//找到子元素
		//find 可以在父类下面多级子类  children只能找下一级的子类
		saveContent.html(saveContent.html()+"<br/>"+$("#par1").find("p").html());
		//找到兄弟
		saveContent.html(saveContent.html()+"<br/>"+$("#par1").next().html()+"<br/>"+$("#par1").prev().length+"<br/>"+$("#par1").nextAll().last().html());
	   //添加css
	   $("#surPar2").css({
	   color:"red",
	   fontSize:"28px"
	   });
	   //data 操作
	   //$("#par2").data("dataKey",{foo:"red"});
	   //alert($("#par2").data("dataKey"));
	   //工具方法
	   //去除字符串头和尾的空格
	  // alert($.trim(" qq ").length);
	  //遍历
	 /*  $.each(["q","w"],function(idx,val){
	  	alert("index:"+idx+" value:"+val);
	  });
	  $.each({name:"q",age:15},function(k,v){
	  	alert("key:"+k+" value:"+v);
	  }); */
	  //判断是否在数组中
	 // alert($.inArray(4,[1,2,3,4]));
	 
	 
	 //attr方法的匹配
	 //获取集合中匹配的第一个元素
	// alert($("img").attr("src"));
	//设置集合中的所有元素
	$("img").attr({
		src:"images/hej.jpg"
	});
	   $("#gi").attr({
	   title:"华尔街",
	   	alt:"qq",
	   	width:"100px;",
	   	height:"100px"
	   });
	   $("#gi").attr("title",function(idx,val){
	   return "修改过的"+val;
	   });
	   
	   
	 //css方法的匹配
	//alert($("#surPar2").css("width"));
	//css获取多个属性
	var html=["显示内容区域的内容为:"];
	 $.each($("#surPar2").css(["width","height","backgroundColor"]),function(prop,val){
	 	html.push(prop+":"+val);
	 });
	 //将上面获取到的多个属性数组以字符串的形式显示在第一个p中
	 $("p").eq($("p").length-2).html(html.join("<br/>"));  
	 
	 //一次单击事件 +=表示在原来基础上加上100
	 $("#gi").one("click",function(){
	 	$(this).css("width","+=100");
	 });
	 
	 //获取每一个单词的底板颜色
	 $("p").last().css("border","1px solid red");
	var words=$("p").last().text().split(" ");
	var text=words.join("</span> <span>");
	$("p").last().html("<span>"+text+"</span>");
	$("span").click(function(idx,ele){
	$("span").css("backgroundColor","");
		$(this).css("backgroundColor","red");
	});
	
	//改变最后一个段落的宽度和高度
	$("p").last().click(function(){
	
		$(this).css({
			width:function(idx,val){
			return parseFloat(val)*1.1;
			},
			height:function(idx,val){
				return parseFloat(val)*1.8;
			}
		});
		});
	
	
	//val的值可以接受一个函数
	$("input").val(function(idx,val){
		return "index:"+idx+" value:"+val;
	});
	//获取到元素属性的集合
	$("div").last().html($("div").last().html()+" ");
	/* alert($("p").map(function(idx,ele){ //ele为dom元素 需要转换为jquery object
	 return $(ele).html();
	}).get().join("<br/>")); */
	
	$("p").last().css("display","none");
	
	//判断一个元素是否隐藏 若是隐藏 则显示
	if($("p").last().is(":hidden")){
		$("p").last().show();
	}
	
	//动画
	//$("#gi:visible").animate({  width: "+=200px"},2000,function(){alert("动画完成");});
	
	//禁用、使能元素
	/* $("input").prop("disabled",true);
	$("div").on("click",function(){
	//alert("ok");
		$("input").prop("disabled",false);
	}); */
	
	//选择复选框 单选框
	$("#cb").prop("checked",true);
	$("#dx").prop("checked",false);
	
	//获取select的value和text
	//alert($("#selId").val()+$("#selId").text());
	
	});
	
	
</script>
</head>
<body>
<div id="par2">
 祖父元素
 <hr/>
<div id="par1">

   父元素
  <p id="childPa">子元素</p>
</div>  
<hr/>
<div id="surPar1">
 父兄弟元素
</div>
</div>
<hr/>
<div id="surPar2">
 祖父兄弟元素
</div>
<img id="gi" src="images/hej.jpg" alt="图片1" />
<!-- <img id="td" src="images/td.jpg" alt="图片2" /> -->
<p></p>
<p>
this is a css param,if you click one, you will find more
</p>
<input type="text" value="测试input" />
<input type="checkbox" id="cb" >选择
<br/>
<input type="radio" id="dx" >单选
<select id="selId">
<option value="1">第一个</option>
</select>
</body>
</html>

效果