<!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>