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

关于js中select的简单操作，以及js前台计算，span简单操作的更多相关文章

  1. js相对路径相关（比如：js中的路径依赖导入该js文件的路径）

    问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...

  2. js中eval详解，用Js的eval解析JSON中的注意点

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...

  3. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  4. 浅谈js中的数据类型,使用typeof获取js数据类型

    JS中的数据类型 1):Undefined——值未定义 注:Undefined类型只有一个值,即特色的undefined.在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined ...

  5. main.js中import引入css与引入js的区别

    表现:引入css样式文件能够作用到全局,而引入js文件就只能在main.js中产生作用 在 main.js 中引入的 css 都是全局生效的.引入的 js 文件只在 main.js 中生效,是因为 m ...

  6. 【转】js中select的基本操作

    判断select选项中 是否存在Value="paraValue"的Item  // 1.判断select选项中 是否存在Value="paraValue"的I ...

  7. js中select标签中的option选择

    f1 = function () { //var selected_val = document.getElementById(test).value; var obj = document.getE ...

  8. js中取得当前加载的js的src地址

    在很多js框架中看到过,如果要动态加载框架内部的其他js,加载的时候加载的地址经常是一个相对的地址,只能是这样了哦,因为框架根本不知道用此框架的用户,将框架js文件放的具体目录,所以框架中一般会采用如 ...

  9. js中 visibility和display的区别 js中 visibility和display的区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏,这用visibility=&q ...

随机推荐

  1. c#、sql数据库备份还原

    1.在项目中添加SQLDmo dll文件引用(SQLDMO(SQL Distributed Management Objects,SQL分布式管理对象)) 2在相应页面加using SQLDMO引用 ...

  2. Asp.net原理(第一篇)

    Asp.net (第一篇) 当用户在浏览器输入一个URL地址后,浏览器会发送一个请求到服务器.这时候在服务器上第一个负责处理请求的是IIS.然后IIS再根据请求的URL扩展名将请求分发给不同的ISAP ...

  3. onblur判断数字

    window.onload = function () { document.getElementById('text1').onblur = function () { if (isNaN(docu ...

  4. oracle datetime

    to_date('" + Convert.ToDateTime(TCRQ).ToString("yyyy-MM-dd")+"','YYYY-MM-DD'), C ...

  5. SSH公钥私钥安全通讯原理

    客户端在访问服务器的时候,防止通讯信息被截取,进行加密处理通讯. 在服务器上会有两把钥匙,公钥和私钥.公钥可以对所有公开,私钥只有服务器自己知道, 并且公钥产生的密文只能通过私钥才能解开 1:客户端发 ...

  6. 【Nutch2.2.1基础教程之3】Nutch2.2.1配置文件

    nutch-site.xml 在nutch2.2.1中,有两份配置文件:nutch-default.xml与nutch-site.xml. 其中前者是nutch自带的默认属性,一般情况下不要修改. 如 ...

  7. chart.js 示例

    一个简单的例子. 1.html代码 <div id="pie" style="width: 250px;float:left"> <h3> ...

  8. 基于zigbee与tiny4412开发板的环境监测系统

    一.开发板环境搭建 1.tiny4412   linux系统的布置 参考博客:http://www.cnblogs.com/luoxiang/p/4186391.html 二.boa服务器的搭建 下载 ...

  9. 环形队列C++实现

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下鄙人用C++实现了环形队列 /******************************** ...

  10. form 表单练习

    创建战网通行证账号,开启您的冒险之旅.<form>    <table border="0">        <tr>            & ...