<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset =utf-8">
<title>js获取数据</title>
</head>
<body>
<span id="s1">111</span><br/>
<span id="s2">222</span><br/>
<span id="s3">222.3</span><br/>
<button id="add">相加</button><br/>
<input type="text" value="" name="" id="name"><br/>
<input type="text" value="" name="" id="username"><br/>
<input type="text" value="" name="" id="password"><br/>
<select id="myselect">
<option myattr="自定义属性1" value ="option1">我的测试1</option>
<option myattr="自定义属性2" value ="option2">我的测试2</option>
<option myattr="自定义属性3" value ="option3" selected>我的测试3</option>
<option myattr="自定义属性4" value ="option4">我的测试4</option>
<option myattr="自定义属性5" value ="option5">我的测试5</option>
</select><br/>
<button id="submit">提交</button>
<button id="changeSelect">获得option的值</button>
<button id="optionChange">修改option操作</button>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!--select简单操作-->
<script>
$("#myselect").change(function(event) {
//获得选中的option
var option=$("#myselect option:selected");
//获得选中的option的val
var value=option.val();
alert(value);
//获得选中的option的属性的值
var attr=option.attr(‘myattr‘);
alert(attr);
//获取选中的option的text值
var text=option.text();
alert(text);
});
</script>
<!-- 关于select改变选中相关操作 -->
<script>
$("#changeSelect").on(‘click‘, function(event) {
//获取select的长度
var a=$(‘#myselect option‘).length;
alert(a);
//获取第一个option的值
var b=$(‘#myselect option:first()‘).val();
alert(b);
//获取第二个option的值
var second=$(‘#myselect option:eq(1)‘).val();
alert(second);
var last=$(‘#myselect option:last‘).val();
alert(last);
});
</script>
<!-- 关于select的option的相关操作 -->
<script type="text/javascript">
$("#optionChange").on(‘click‘,function(event) {
//添加一项option
$("#myselect").append("<option value=‘n+1‘>第N+1项</option>");
//删除选中项
// $(‘#myselect option:selected‘).remove();
//删除指定项
// $(‘#myselect option:first‘).remove();
$(‘#myselect option:eq(1)‘).remove();
//指定值删除
$("#myselect option[value=option5]").remove();
});
</script>
<!-- js简单计算 js不存在parseDouble，关于浮点类型的只有float -->
<script>
$("#add").on(‘click‘,function(event) {
var s1=$("#s1").text();
var s2=$("#s2").text();
alert(s1+s2);
alert(parseInt(s1)+parseInt(s2))
var s3=$("#s3").text();
alert(parseInt(s3));
alert(parseFloat(s3));
});
</script>
<!--关于span标签内容操作-->
<script type="text/javascript">
$("#submit").click(function(event) {
var s1=$("#s1").text();
alert(s1);
$("#s1").text(‘333‘);
});
</script>
</html>
时间： 2024-10-08 17:53:58