<!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. 执行curl -sSL 提示curl: (35) SSL connect error

    今天,添加容器节点报错,执行如下 curl -sSL https://shipyard-project.com/deploy| ACTION=node DISCOVERY=etcd://192.168 ...

  2. 高可用集群（HA）配置

    高可用集群(HA) 1. 准备工作 HA的心跳监测可以通过串口连接监测也可以通过网线监测,前者需要服务器有一个串口,后者需要有一个空闲网卡.HA架构中需要有一个共享的存储设备首先需要在两台机器上安装m ...

  3. 查看linux版本和内核信息

    一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@localhost ~]# cat /proc/versionLinux version 2.6.32 ...

  4. Windows服务简单实例

    1.定时器使用 partial class TimerService : ServiceBase { public TimerService() { InitializeComponent(); } ...

  5. 《第一行代码》学习笔记9－活动Activity（7）

    1.发现Android中的活动是可以层叠的,每启动一个新的活动,就会覆盖在原活动之上, 然后点击Back键会销毁最上面的活动,下面的一个活动就会重新显示出来. 2.Android是使用任务来管理活动的 ...

  6. eclipse 连接手机的 核心解决办法

    重启adb的方法  根本不是最本质的方法 最本质的问题 ,一句话概括 : 没安装好驱动呗! 下面是转载的 android开发一般用到的开发工具就是eclipe,而安卓手机则用来调试程序.一般新手在建立 ...

  7. SSM框架搭建web服务器实现登录功能(Spring+SpringMVC+Mybatis)

    初学java EE,虽然知道使用框架会使开发更加便捷高效,但是对于初学者来说,感到使用框架比较迷惑,尤其是各种jar包的引用.各种框架的配置.注解的使用等等. 最好的学习方法就是实践,于是下载了一个现 ...

  8. 解决django关于图片无法显示的问题

    http://python.usyiyi.cn/django/index.html http://m.blog.csdn.net/blog/qingyuanluofeng/44877399 http: ...

  9. EL表达式复习

    EL表达式格式: 格式1:${objName.attribute} 执行的过程为:从pageContext.request.session.application中依次查找绑定名为“user”的对象, ...

  10. python学习（四）五数连珠

    中午有段时间,模仿<五子连珠>写了一段代码,运行截图如下: import random # for random.randrange() import os # for input() b ...