首页 > 其他分享 >js.dom2

js.dom2

时间:2024-01-18 16:56:01浏览次数:26  
标签:span option text value js dom2 document select

  • 复选框:input.checked = false ;

  • onload 事件会在页面或图像加载完成后立即发生。

    • <body onl oad="init()">

    • function init(){
      setTimeout("showAD()",2000) ;
      }
      function init(){
      setInterval("changImg()",1) ;
      }
  • 正则表达式 : 用字符串来规定字符串的格式

    • reg = /^([a-z0-9A-Z]+[-|.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?.)+[a-zA-Z]{2,}$/ ;

    • reg.test(qq);

  • 页面上显示信息

    • function showTips(spanID,msg){
      //首先要获得要操作元素 span
      var span = document.getElementById(spanID);
      span.innerHTML = msg;
      }
  • 校验用户名

    • function checkUsername(){
      //获取用户输入的内容
      var uValue = document.getElementById("username").value;
      //对输入的内容进行校验
      //获得要显示结果的span
      var span = document.getElementById("span_username");
      if(uValue.length < 6){
      //显示校验结果
      span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
      return false;
      }else{
      span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
      return true;
      }}

      <input type="text" id="username" onfocus="showTips(用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" />
      <span id="span_username"></span><br />
  • 引入js文件:<script src="js/regutils.js" type="text/javascript" charset="utf-8"></script>

  • 设置获取option的值

    • <select id="mySelect" name="">
      <option value="1">苹果</option>
      <option value="2">桃子</option>
      <option value="3">香蕉</option>
      <option value="4">桔子</option>
      </select>
      var select = document.getElementById("mySelect");
      console.log(select[i].text) ;// text 是展示给用户看的
      console.log(select[i].value) ;// value 是和name组成键值对 , 提交给服务器
      select[i].text = i + 10 ;
  • 动态创建option对象:selectObject.add(option,before):

    • option 必需。要添加选项元素。必需是 option 或 optgroup 元素。

    • before 必需。在选项数组的该元素之前增加新的元素。如果该参数是null,元素添加到选项数组的末尾。

    • var option = document.createElement("option");
      //设置option对象的内容
      option.text = arr2[i];
      //将option对象添加到select
      select.add(option, null);
  • 动态创建option对象:new Option(text,value,defaultSelected,selected)

    • text:字符串,指定option对象的text属性(即<option></option>之间的文字)

    • value:字符串,指定option对象的value属性(传递给服务器的数据)

    • defaultSelected:布尔值,指定option对象的defaultSelected属性

    • selected:布尔值,指定option对象的selected属性

    • select.add(new Option(arr2[i], j), null);

  • JS中的数组的索引值可以是任意类型的值,包括文字在内

    • arr2['中国'] = ['北京','上海','湖北'] ;

标签:span,option,text,value,js,dom2,document,select
From: https://www.cnblogs.com/tonnpo/p/17972864

相关文章

  • 使用JSZip库解压后台返回的Blob格式文件,并回显到element-ui的el-upload组件
    有一个报告列表,点击编辑的时候需要回显新建时上传的附件。后台提供了一个下载接口,但是会将所有上传的文件打包为一个压缩的blob。类似这种:leturlArr=[];urlArr=urlArr.concat(this.downLoadUrl.split(";"));this.$http.downLoadFile({url:urlArr.......
  • 一、nextjs如何使项目工程化(c-shopping电商开源)
    欢迎来到本系列文章,这些内容都是从我的开源项目C-Shopping衍生而来的。在这个系列中,我们将深入探讨Next.js和其他技术的各个方面,分享我在开发C-Shopping时积累的见解和最佳实践。如果你发现这些文章有帮助,请考虑在GitHub上为项目点亮一颗星星。你的支持对我来说意义重大,也......
  • tsx nodejs 增强支持执行typescript 以及esm
    tsx属于一个nodejs的增强包含的特性快速的按需ts以及esm编译支持commonjs以及esm包支持下一代ts扩展(.cts,.mts)隐藏体验特性警告tsrepl解析tsconfig.json适用的场景可以执行运行ts而不需要进行配置更好的与esm,cjs依赖交互说明tsx是一个不错的本地开发工具,可以方便不同模......
  • Node.js(千锋)
    目录Node.js(最全)基础+全栈项目一、Node.js基础1.认识Node.js01nodejs的特性02使用Node.js需要了解多少JavaScript03浏览器环境vsnode环境2.开发环境搭建3.模块、包、commonJS02CommonJS规范03modules模块化规范写法4.Npm&Yarn01npm的使用02全局安装nrm03yar......
  • 记录 | vscode json美化插件JSON Tools
    安装插件JSONTools原来的json的样子:JSONTools美化/格式化快捷键Ctrl+Alt+M(windows)/Command+Option+M(Mac),然后效果如下:......
  • 记录 | conda报错:conda json.decoder.JSONDecodeError: Expecting value: line 1 colu
    condacreate的时候报错:condajson.decoder.JSONDecodeError:Expectingvalue:line1column1(char0)解决办法:condaclean-i......
  • js 计算百分比
    getPercentValue(arrList,index,precision){//arrList要计算数据的数组//index要计算数组中值的下表//precision百分比保留几位小数,默认保留2位小数//判断是否为空if(!arrList[index]){return0}//if......
  • 数据探索之道:查询Web API数据中的JSON字符串列
    前言在当今数据驱动的时代,对数据进行探索和分析变得愈发关键。WebAPI作为广泛应用的数据源,提供了丰富的信息和资源。然而,面对包含JSON字符串列的WebAPI数据时,我们常常遇到一个挑战:如何高效灵活地处理和查询这些数据?这个问题在数据探索和提取过程中频繁出现。因此小编今天以葡萄......
  • JavaScript(JS) 判断没有属性的空对象{}的四种方法
    ​ JavaScript(JS)中对象没有属性初始化时,可能使用{}进行初始化,如此我们判断这样的没有属性的空对象就不是很方便,本文主要介绍JavaScript(JS)中判断没有属性的空对象{}的五种方法,以及相关的示例代码。1、通过JSON.stringify()判断可以使用JSON.stringify()将Javascript对象......
  • JS_Dom对象
    1.DOM对象-01获取DOM元素<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>Document</title> <script> <!--当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)。--> <!-......