<!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字数限制的EditText实现方案研究

    在应用开发中,有时需要实现有字数限制的EditText,首先来分析下市面上存在的类似实现方案吧,好有个感性的认识. [方案一:腾讯微博] 每个中文字符算一个字数,每两个英文字符算一个字数,当用户输入内 ...

  2. javascript将毫秒还原为可读时间格式

    <script type="text/javascript"> //随便设置一个时间 var otime = new Date("2015-11-11 20: ...

  3. 刷新 tableview

    UITableView对于iOS开发者来说一定不会陌生,很有可能你的APP很多界面都用到它.关于UITableView的文章,想必已经不计其数,没事可以多看看.特别是UITableView优化的文章, ...

  4. unity 之2D游戏简单操作

    unity 做2D项目也很方便.  首先要调整camera的模式,camera 的检视面板参数如下: perspective 模式就是平时用的 模式.摄像机到游戏物体是有角度的张开, 而 orthog ...

  5. hdu Big Number 求一个数的位数

    Problem Description In many applications very large integers numbers are required. Some of these app ...

  6. 编译Boost 详细步骤

    vs2008编译boost [一.Boost库的介绍] Boost库是一个经过千锤百炼.可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一. Boost库由C++标准委员会 ...

  7. LAMP 环境搭建之源码包编译安装

    mysql用的二进制包安装. Apache php 用的源码包 mysql版本5.5.46    Apache版本2.4.7  PHP版本:5.5 mysql安装部分参考了阿铭linux的内容. 这是 ...

  8. python文件批量改名

    python对文件进行批量改名用到的是os模块中的listdir方法和rename方法. os.listdir(dir)  :获取指定目录下的所有子目录和文件名 os.rename(原文件名,新文件名 ...

  9. jquery取元素值

    var j = 1; if (rows.length > 0) { for (var i = 0; i < rows.length; i++) { var row = rows[i]; i ...

  10. java classpath import package 机制 @Java的ClassPath, Package和Jar

    java classpath import package 机制   從一個簡單的例子談談package與import機制 基本原則:為什麼需要將Java文件和類文件切實安置到其所歸屬之Package ...