JQ 设置和获取HTML和文本和值

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.test {
	font-weight: bold;
	color : red;
}
.add {
	font-style: italic;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	//获取<p>元素的HTML代码
	$("input:eq(0)").click(function(){
		alert(  $("p").html() );
	});
	//获取<p>元素的文本
	$("input:eq(1)").click(function(){
		alert(  $("p").text() );
	});
	//设置<p>元素的HTML代码
	$("input:eq(2)").click(function(){
		$("p").html("<strong>??你最喜欢的水果是?</strong>");
	});    
	//设置<p>元素的文本
	$("input:eq(3)").click(function(){
		$("p").text("你最喜欢的水果是?");
	});  
	//设置<p>元素的文本
	$("input:eq(4)").click(function(){
		$("p").text("<strong>你最喜欢的水果是?</strong>");
	});  
	//获取按钮的value值
	$("input:eq(5)").click(function(){
		alert( $(this).val() );
	});   
	//设置按钮的value值
	$("input:eq(6)").click(function(){
		$(this).val("我被点击了!");
	});  
});
//]]>
</script>
</head>
<body>
<input type="button" value="获取<p>元素的HTML代码"/>
<input type="button" value="获取<p>元素的文本"/>
<input type="button" value="设置<p>元素的HTML代码"/>
<input type="button" value="设置<p>元素的文本"/>
<input type="button" value="设置<p>元素的文本(带HTML)"/>
<input type="button" value="获取按钮的value值"/>
<input type="button" value="设置按钮的value值"/>
<p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图：

demo2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	$("#address").focus(function(){ // 地址框获得鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value=="请输入邮箱地址"){  
			$(this).val(""); // 如果符合条件，则清空文本框内容
		} 
	});
	$("#address").blur(function(){ // 地址框失去鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value==""){
			$(this).val("请输入邮箱地址"); // 如果符合条件，则设置内容
		} 
	});
	$("#password").focus(function(){
		var txt_value =  $(this).val();
		if(txt_value=="请输入邮箱密码"){
			$(this).val("");
		} 
	});
	$("#password").blur(function(){
		var txt_value =  $(this).val();
		if(txt_value==""){
			$(this).val("请输入邮箱密码");
		} 
	});
});
//]]>
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/>
<br/>
<br/>
<input type="text" id="password" value="请输入邮箱密码"/>
<br/>
<br/>
<input type="button" value="登陆"/>
</body>
</html>

效果图：

demo3.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	$("#address").focus(function(){ // 地址框获得鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value==this.defaultValue){  
		$(this).val(""); // 如果符合条件，则清空文本框内容
		} 
	});
	$("#address").blur(function(){ // 地址框失去鼠标焦点
		var txt_value =  $(this).val(); // 得到当前文本框的值
		if(txt_value==""){
			$(this).val(this.defaultValue); // 如果符合条件，则设置内容
		} 
	});
	$("#password").focus(function(){
		var txt_value =  $(this).val();
		if(txt_value==this.defaultValue){
			$(this).val("");
		} 
	});
	$("#password").blur(function(){
		var txt_value =  $(this).val();
		if(txt_value==""){
			$(this).val(this.defaultValue);
		} 
	})
});
//]]>
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/>
<br/>
<br/>
<input type="text" id="password" value="请输入邮箱密码"/>
<br/>
<br/>
<input type="button" value="登陆"/>
</body>
</html>

效果图：

demo4.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.test {
	font-weight: bold;
	color : red;
}
.add {
	font-style: italic;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	//设置单选下拉框选中
	$("input:eq(0)").click(function(){
		$("#single").val("选择2号");
	});
	//设置多选下拉框选中
	$("input:eq(1)").click(function(){
		$("#multiple").val(["选择2号", "选择3号"]);
	});
	//设置单选框和多选框选中
	$("input:eq(2)").click(function(){
		$(":checkbox").val(["check2","check3"]);
		$(":radio").val(["radio2"]);
	});    
});
//]]>
</script>
</head>
<body>
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>
<br/>
<br/>
<select id="single">
    <option>选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
    <option selected="selected">选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
    <option>选择4号</option>
    <option selected="selected">选择5号</option>
</select>
<br/>
<br/>
<input type="checkbox" value="check1"/>
多选1
<input type="checkbox" value="check2"/>
多选2
<input type="checkbox" value="check3"/>
多选3
<input type="checkbox" value="check4"/>
多选4 <br/>
<input type="radio" value="radio1"/>
单选1
<input type="radio" value="radio2"/>
单选2
<input type="radio" value="radio3"/>
单选3
</body>
</html>

效果图：

demo5.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.test {
	font-weight: bold;
	color : red;
}
.add {
	font-style: italic;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
	//设置单选下拉框选中
	$("input:eq(0)").click(function(){
		$("#single option").removeAttr("selected");  //移除属性selected
		$("#single option:eq(1)").attr("selected",true); //设置属性selected
	});
	//设置多选下拉框选中
	$("input:eq(1)").click(function(){
		$("#multiple option").removeAttr("selected");  //移除属性selected
		$("#multiple option:eq(2)").attr("selected",true);//设置属性selected
		$("#multiple option:eq(3)").attr("selected",true);//设置属性selected
	});
	//设置单选框和多选框选中
	$("input:eq(2)").click(function(){
		$(":checkbox").removeAttr("checked"); //移除属性checked
		$(":radio").removeAttr("checked"); //移除属性checked
		$("[value=check2]:checkbox").attr("checked",true);//设置属性checked
		$("[value=check3]:checkbox").attr("checked",true);//设置属性checked
		$("[value=radio2]:radio").attr("checked",true);//设置属性checked
	});   
});
//]]>
</script>
</head>
<body>
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>
<br/>
<br/>
<select id="single">
    <option>选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
    <option selected="selected">选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
    <option>选择4号</option>
    <option selected="selected">选择5号</option>
</select>
<br/>
<br/>
<input type="checkbox" value="check1"/>
多选1
<input type="checkbox" value="check2"/>
多选2
<input type="checkbox" value="check3"/>
多选3
<input type="checkbox" value="check4"/>
多选4 <br/>
<input type="radio" value="radio1" name="a"/>
单选1
<input type="radio" value="radio2" name="a"/>
单选2
<input type="radio" value="radio3" name="a"/>
单选3
</body>
</html>

效果图：

JQ 设置和获取HTML和文本和值

猜你喜欢