<!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. Android实现程序前后台切换效果

    本文演示如何在Android中实现程序前后台切换效果. 在介绍程序实现之前,我们先看下Android中Activities和Task的基础知识. 我们都知道,一个Activity 可以启动另一个Act ...

  2. asp.net的3个经典范例(ASP.NET Starter Kit ,Duwamish,NET Pet Shop)学习资料

    asp.net的3个经典范例(ASP.NET Starter Kit ,Duwamish,NET Pet Shop)学习资料 NET Pet Shop .NET Pet Shop是一个电子商务的实例, ...

  3. FineUI表单验证

    自动编码文本 默认情况下,Label的EncodeText属性为true,会对文本中的HTML进行编码.当然我们也可以设置EncodeText=false,从而将HTML片段赋值给Text属性,请看这 ...

  4. C#总结（一）

    学C#也有两年多了,发现如果不总结一下,很多C#的知识都会忘掉,所以希望写这系列的文章来总结一下C#的基础知识.如果有写错或者不足的地方,希望可以提出纠正. C#可以说是依附在.NET Framewo ...

  5. 转载Eclipse中Maven WEB工程tomcat项目添加调试

    转载地址: http://blog.csdn.net/free4294/article/details/38260581 一.建立一个maven  WEB项目 1.file->new->o ...

  6. PHP获取文件后缀名的三种方法

    如下: <? PHP获取文件后缀名的几种方法1: function get_file_type($filename){ $type = substr($filename, strrpos($fi ...

  7. ci 的控制器文件夹下开加子文件夹

    在一个比较大的项目中,希望controllers下再细分子文件夹.例如:controllers/pj,controllers/xxk等. 做法是: 1.在controllers下添加相关的子文件夹,例 ...

  8. iframe与frameset有什么区别

    frame,iframe,frameset 的区别 <FRAMESET> <FRAME><NOFRAMES><IFRAME>欲明白本篇[HTML剖析]之 ...

  9. Python学习笔记九-文件读写

    1,读取文件: f=open('目录','读写模式',encoding='gbk,error='egiong') 后三项可以不写但是默认是' r'读模式:open函数打开的文件对象会自动加上read( ...

  10. IOS响应式编程框架ReactiveCocoa(RAC)使用示例-备

    ReactiveCocoa是响应式编程(FRP)在IOS中的一个实现框架,它的开源地址为:https://github.com/ReactiveCocoa/ReactiveCocoa# :在网上看了几 ...