<!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. WndProc函数(转)

    WndProc函数作用: 主要用在拦截并处理系统消息和自定义消息 比如:windows程序会产生很多消息,比如你单击鼠标,移动窗口都会产生消息.这个函数就是默认的消息处理函数.你可以重载这个函数来制定 ...

  2. asp.net中的主题

    用了更方便,在.net网站上,右键,选择添加主题,然后命一个名子,如果,有四个主题, 只需要在web.config的page节里加上styleSheetTheme="Red",就会 ...

  3. Visual Studio/vs2013 正忙

    打开VS解决方案时一直显示Visual Studio正忙,项目卡在初始化,此后试了很多方法,将项目拷贝到领一个磁盘当中再打开就可以直接打开了

  4. unity——使用角色控制器组件+射线移动

    首先要导入unity标准资源包Character Controllers 这个标准资源包,为了方便,还添加了两外一个资源包Scripts,后者包含了一些基本的脚本个摄像机脚本. 没错,这次我们要使用其 ...

  5. Servlet编码和解码

    1.request.setCharacterencoding("XXX"); 前提是POST提交 在客户端编码对value的值进行编码之前,通知客户端用什么码表(XXX)编码 2. ...

  6. hdu5672 尺取法

    StringTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Subm ...

  7. 慕课linux学习笔记（六）常用命令（3）

    Find 命令 #搜索文件 Find [搜索范围] [搜索条件] e.g. find / -name isnstall.log 搜索速度会非常慢 避免大范围搜索,会非常耗费系统资源 Find是在系统当 ...

  8. MVC过滤器详解和示例

    原文  http://blog.csdn.net/ankeyuan/article/details/29624005 MVC过滤器一共分为四个:ActionFilter(方法过滤器),ResultFi ...

  9. PMBOK 项目管理 九大知识领域和五大流程

    PMI   Project Management Institute.PMI 是世界上最大的非盈利机构,是项目管理领域的领导者.PMI制定项目管理行业标准,带领项目管理的研究并提供项目管理的培训,证书 ...

  10. 给div中动态添加节点并设置样式

    前端IOS今天需要动态的在图片前面添加一个按钮 主要是在使用 bt.setAttribute("class","aaa"); 可以对创建的节点使用setAttr ...