8.javaScript基础(2)

最新推荐文章于 2021-09-09 17:03:54 发布

芬芳酩酊

最新推荐文章于 2021-09-09 17:03:54 发布

阅读量904

点赞数

分类专栏：前端知识文章标签： javaScript

本文链接：https://blog.csdn.net/YFSREAD/article/details/79290269

版权

前端知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

A、基本语法内置函数自定义函数内嵌框架
一、内置函数：
1、alert();弹出一个只含有“确认”按钮的警告框
2、confirm("你是女孩吗？");弹出一个同时含有“确认”和“取消”按钮的消息框，有返回值（点击确定返回true 点击取消返回false）
3、var a=prompt("请输入一个数字：","0");接收用户输入的信息,"0"是默认值，可以自行修改默认值。a为确定时返回的值。
4、isNaN(x);判断x是否是一个非数字，如果x不是数字，返回true；如果x是数字，返回false
5、var a=parseInt(x);将x转成整型；
6、var a=parseFloat(x);将x转成浮点型；
7、document.write();像文档输出内容（可以是字符串表达式标签）
8、eval();将括号中的字符串当做表达式处理；
var a = 3;
  var b = 7;
  var c = "+";
  eval(a+c+b);
  eg:
  var a =3;
  var b=7;
  var c="/";
  alert(eval(a+c+b));
二、基本语法：
  变量申明：var 变量名=初始值;
  变量名命名规范：可以包含数字、字母、下划线、$，但是不能以数字开头。
三、自定义函数：
function 方法名(参数一，参数二，……){
      方法体；
   }
四、内嵌框架
  1.把<body></body>去掉换成<frameset></frameset>
  2.<frameset>的属性: <frameset rows="80,*" frameborder="yes">
      框架边框: frameborder = "1/0/yes/no"默认为yes或1
      横分框架比例大小：rows="80,*"（此处是分为上下两个框架的大小，上为高80，下高为剩余的*,如果分为四个，则要写四个值，格式为"固定值/百分比/*"）
      纵分框架比例大小：cols="250,*,*"（此处是分为左中右三个框架的大小，左宽为250，中宽和右为剩余的*,如果分为其它数量则规则同上）
  3.<frame>的属性:<iframe src="导入的网页.html" name="" scrolling="" frameborder="" >
         固定大小: noresize = "noresize"
       滚动条: scrolling = "yes/no"
  4.例子：
      <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
      <html>
          <head><style type="text/css"></style></head>
          <frameset rows="80,*" frameborder="yes">
              <frame src="toBjsp"/>
              <frameset cols="250,*,*">
                  <frame src="toAjsp"/>
                  <frame src="toBjsp" frameborder="0"/>
                  <frame src="toAjsp"/>
              </frameset>
          </frameset>
      </html>
B、window 对象日期对象Date
一、window对象的属性：
  document文档对象
  location 地址对象location.reload();刷新当前页面
  history 历史对象
  screen 客户端屏幕相关信息（screen.width,screen.height屏幕的宽和高）
  status 状态栏信息
  closed 检索窗口是否被关闭如果窗口已经被关闭，closed属性返回true ，否则返回false
二、window对象的方法：
1、内置函数都是window对象的方法
2、window.open("URL","新窗口名","窗口特征");打开一个新的浏览器窗口，加载指定html文档
  其中窗口特征包括：
  height、width 窗口文档显示区的高度、宽度。以像素计。
  left、top 窗口的x坐标、y坐标。以像素计
  toolbar=yes | no |1 | 0是否显示浏览器的工具栏。黙认是yes。
  scrollbars=yes | no |1 | 0是否显示滚动条。黙认是yes。
  location=yes | no |1 | 0是否显示地址地段。黙认是yes。
  status=yes | no |1 | 0是否添加状态栏。黙认是yes。
  menubar=yes | no |1 | 0是否显示菜单栏。黙认是yes。
  resizable=yes | no |1 | 0窗口是否可调节尺寸。黙认是yes。
  titlebar=yes | no |1 | 0是否显示标题栏。黙认是yes。
  fullscreen=yes | no |1 | 0是否使用全屏模式显示浏览器。黙认是no。
eg:
      var wo=window.open("http://www.baidu.com","新窗口名","width=300,height=200px,scrollbars=yes,top=100px,status=no,location=0,menubar=no");
      //window.open("http://www.baidu.com","","width=300,height=300px,top = 100px,left = 200px,status = yes,location =0,menubar = no,toolbar = 0,scrollbar = yes");
      var f=confirm("是否要关闭刚刚打开的窗口？");
      if(f){
          wo.close();
      }
3、close();关闭一个窗口
4、var timeId=setTimeout("方法名()",延迟时间);设置延时器，延时指定的毫秒数执行方法；本身不具备循环功能，使用时放置在方法内部
     clearTimeout(timeId);清除一个延时器对象
5、var timeId=setInterval("方法名()",间隔时间);设置定时器，每隔一段时间执行方法，本身具备循环功能，使用时放置在方法外部
  clearInterval(timeId);清除一个定时器对象
三、日期对象：Date
1、创建日起对象的实例：var today=new Date();
2、get方法组：
  get方法组从日期对象中分解出它所处的年月日,星期几,时分秒,毫秒值
  today.getFullYear()返回年份数
  today.getMonth()返回月份数:0-11,应加上1.
  today.getDate()返回日期数:1-31
  today.getDay()返回星期几:0-6, 0代表星期日
  today.getHours()返回小时数:0-23
  today.getMinutes()返回分钟数:0-59
  today.getSeconds()返回秒数:0-59
  today.getTime()返回毫秒数:自起始时刻开始（起始时刻：1970年1月1日00:00:00）
3、set方法组：
set方法组设置(改变)日期对象的某一部分
  today.setFullYear()设置年份数
  today.setMonth()设置月份数:参数0-11
  today.setDate()设置日期数:参数1-31
  today.setHours()设置小时数:参数0-23
  today.setMinutes()设置分钟数:参数0-59
  today.setSeconds()设置秒数:参数0-59
eg:
  var today=new Date();
  today.setFullYear("2017");
  alert(today.getFullYear());
四、常用事件
  onchange 文本域或者下拉列表的选项发生改变的时候触发；
  onclick 按钮的点击事件
  onmouseover 鼠标覆盖事件鼠标移到图片或者div的上方
  onmouseout 鼠标移开事件
  onsubmit
  onreset
  onload
  onscroll 滚动事件
  onfocus = "" obj.focus();
  onblur = objc.blur(); select();全选
C、数学对象字符串对象
1、数学对象Math
属性：Math.PI;圆周率
方法：取整的三个方法：
  Math.round();四舍五入取整
  Math.floor();向下取整，返回比参数小的最大的一个整数；-5.5
  Math.ceil();向上取整，返回比参数大的最小的一个整数；
  Math.random();获得一个[0,1)之间的一个随机小数
2、字符串对象：
var str="abcdef";
属性：str.length;返回字符串的长度
方法：str.substring(start,end);返回从下标为start开始到下标end截止的一个子串；（不包括结束字符end处的字符）
  charAt(5);
for(var i=0;i<str.length;i++){
  alert(str.charAt(i));
  }
D、 location history document对象页面元素的获取/页面元素的显示和隐藏
一、location地址对象：
属性：href获取或者改变当前网页文档的URL；(系统会将所有的都执行完后才把地址改变--自己的领悟)
eg:
  function f()
  {
  location.href="F:/我仅存的作业/js作业/js_8/邮箱.html";
  alert(location)
  }
方法：location.reload();重新加载当前页面相当于刷新
二、history历史对象
方法：
  history.back();加载用户访问过的历史记录中的上一个URL；
  history.forward();加载用户访问过的历史记录中的下一个URL；
  history.go(正整数/负整数)；go(-1)相当于back();go(1)相当于forward()
三、document对象
属性：
  document.URL：返回或者设置当前网页文档的URL（可以通过这个属性实现页面的跳转）
  document.bgColor设置文档的背景色
  document.body.style.backgroundColor
  eg:alert(document.bgColor);fontSize
方法：
  document.write();向网页网页文档输出内容
  document.getElementById();通过元素的Id获取一个页面对象
  document.getElementsByName();通过元素的name获取一组同名的页面元素，得到的是一个元素数组
  document.getElementsByTagName();通过元素的标签名获取同标签名的一组页面元素，得到的是一个元素数组
控制页面元素的显示和隐藏：
  visibility：visible（可见的）；hidden（隐藏，被隐藏的页面元素仍然占位）
  display：block（显示）inline；none（隐藏，被隐藏的页面元素不占位）
E、DOM编程
一、Core DOM的操作：
查看节点：
1、访问指定节点的方法：
  var obj=document.getElementById();返回一个节点对象
  var obj=document.getElementsByName();返回一个节点数组
  var obj=document.getElementsByTagName();返回一个节点数组
2、查看/修改节点的属性
查看节点属性：obj.getAttribute("属性名");
修改节点属性：obj.setAttribute("属性名","属性值");
eg:
      <script type="text/javascript">
  function f()
  {
  var a=document.getElementById("id1")
  var b=a.getAttribute("value");
  alert(b);
  }
  </script>
  </head>
  <body>
  <input type="button" value="123" οnclick="f()"id="id1">
  </body>
3、根据层次关系查找节点：
obj.parentNode;父节点
  obj.firstChild;第一个子节点
  obj.lastChild;最后一个子节点
  obj.childNodes
4、创建和增加节点：
  var img=document.createElement("img");创建节点
  obj.appendChild(newNode);末尾追加节点的方式插入新的节点
  obj.insertBefore(newNode,oldNode);在指定节点前，插入新的节点
  obj.parentNode.insertBefore(img，obj);
  var t1 = t.cloneNode(false/true);克隆节点。参数为true，则克隆当前节点的所有属性和当前节点的所有子节点；
  参数为false，则只克隆当前节点本身。
5、删除和替换节点：
  t.parentNode.removeChild(delNode);删除节点
  t.parentNode.replaceChild(newNode,oldNode);替换节点
F、TML DOM操作
1、HTML DOM对象的属性的访问：obj.属性名
  alert(img1.getAttribute("src"));
2、HTML DOM操作表格：
1）表格对象
  属性：rows返回包含表格中所有行的一个数组
  例如：
  var t = document.getElementById("tab");
  var trs = t.rows;
  var tr0=t.rows[0]返回表格对象t的第一行这个行对象也可以写var tr0=trs[0];
方法：
  insertRow(index);往表格中插入一个新行
注意：新行将插入到行索引为index的行之前。
  如果index=0，则插入的新行在表格首行；
  如果index=表格长度，则插入的新行在表格的最末尾。
  deleteRow(index);从表格中删除一行。
注意：删除的行索引为index。
2）表格行对象
属性：
  cells返回该行中所有单元格的一个数组
例如：tableObj.rows[0].cells[0]将返回表格第一行的第一个单元格对象。
  rowIndex 返回该行在表中的索引（rowIndex是一个大于或等于0，并且小于表格长度的整数）
方法：
  insertCell(index);在一行中的指定位置插入一个空的<td></td>标签
注意：新的单元格将插入在索引为index的单元格前。
  deleteCell(index);删除索引为index的单元格。
3）单元格对象
属性：
  cellIndex返回单元格在某行单元格集合中的位置（即索引）
  innerHTML返回或者设置单元格的开始标签和结束标签之间的innerHTML
  align 设置或返回单元格内部数据的水平对齐方式
  className 设置或者返回元素的class属性
  d.innerHTML
4)例子：
  <html>
  <head></head>
      <script type="text/javascript">
        function addrowAndCell(){
           var tab=document.getElementById("tab");//根据ID得到表对象
          var addTr=tab.insertRow(1);//加一行，位置是在第二位，下标为1
          var addCell1=addTr.insertCell(0);//往行中加一个格子，位置是在第一位，下标为0
          var addCell2=addTr.insertCell(1);//往行中加一个格子，位置是在第二位，下标为1
          var addCell3=addTr.insertCell(2);//往行中加一个格子，位置是在第三位，下标为2
          addCell1.innerText=123;//设置内容
          addCell2.innerHTML="<a href='#'>这是一个空键接</a>";//设置内置HTML
          addCell3.innerText="你好";//设置内容
      }
      function toDeleteRow(){
          var tab=document.getElementById("tab");//根据ID得到表对象
          //删除方法1
          //var tr2=tab.rows[1];//得到一条行对象
          tr2.parentNode.deleteRow(1);//删除下标为1的行
          //删除方法2
          //tab.deleteRow(1);//删除下标为1的行
          //删除方法1
          //var row1=document.getElementById("row1");//得到行ID
          //row1.parentNode.deleteRow(1);//通过父节点删除下标为1的行
          //row1.parentNode.removeChild(row1);//通过父节点删除自己
      }
      function toDeleteCell(){
          var tab=document.getElementById("tab");//根据ID得到表对象
          //删除方法1
          //var tr2=tab.rows[1];//得到一条行对象
          //var cells=tr2.cells;//得到所有格子
          //cells[1].parentNode.deleteCell(1);//子节点通过父节点删除子节点
          //删除方法2
          //tab.rows[1].deleteCell(1);//父节点直接删除子节点
          //删除方法3
          //略..(同toDeleteRow方法3相似 )
      }
      function showOtherAtribute(){
          var cellObj=document.getElementById("cellObj");//得到一个格子对象
          alert("格子的单元格集合索引为"+cellObj.cellIndex+";\n格子的innerHTML为"+cellObj.innerHTML+";\n格子的innerText为"+cellObj.innerText+"格子的className为"+cellObj.className);
      }
  </script>
  <body>
      <input type="button" value="点击新增行和表格" οnclick="addrowAndCell()"/>
      <input type="button" value="点击新删除下标为1的行" οnclick="toDeleteRow()"/>
      <input type="button" value="点击新删除下标为1的行的所有格子中下标为1的格子" οnclick="toDeleteCell()"/>
      <input type="button" value="点击显示July这个格子的部份属性" οnclick="showOtherAtribute()"/>
      <table id="tab" border="1">
          <tr>
          <td>ID</td>
          <td>NAME</td>
          <td>SEX</td>
          </tr>
          <tr id="row1">
          <td>1</td>
          <td>Jane</td>
          <td>Girlfloder1</td>
          </tr>
          <tr>
          <td>2</td>
          <td>Jone</td>
          <td>Boyfloder1</td>
          </tr>
          <tr>
          <td>3</td>
          <td>Franky</td>
          <td>Boy</td>
          </tr>
          <tr>
          <td>4</td>
          <td class="aabbc" id="cellObj"><div>July</div></td>
          <td align="center">Girl</td>
          </tr>
      </table>
  </body>
  </html>
showOtherAtribute方法的弹窗显示为：
G、javascript和css交互
一、回顾样式表基本语法
1、css的引入方式：
  1）内部样式：在头部的<head></head>之间加入<style type="text/css"></style>
  2）行内样式：在标签中加入style属性；例如<p style="color:red"></p>
  3）外部样式：<link type="text/css" rel="stylesheet" href="a.css"/>
2、选择器的分类(内部样式)
  <input type="text" id = "blue"/>
  <input type="text" class="red"/>
标签选择器：
  input{
      width:120px;
      border:1px solid red;
  }
类选择器：
  .red{
      color:red;
      font-size:30px;
  }
ID选择器：
  #blue{
      color:blue;
      font-family:隶书;
  }
常见属性：
  文本属性：font-size:字体大小；
       font-family:字体类型
  背景属性： font-size: 12px;">       background-image:url() 背景图片
  边框属性：border-width:边框粗细（单位是px）；
       border-style:边框线型(solid 实线；dashed 虚线;dotted点线)；
       border-color:边框颜色
  填充属性：padding-top,padding-right,padding-bottom,padding-left(分别设置元素的上、右、下、左四个方向的内边距)
  边界属性：margin-top,margin-right,margin-bottom,margin-left(分别设置元素的上、右、下、左四个方向的外边距)
二、如何动态改变页面元素的样式：
1、使用getElement系列方法访问元素
2、改变样式属性
  (1)style 属性
  例如：
  document.getElementById("div1").style.color="red";
  document.getElementById("div1").style.fontSize="40px";
  (2)className属性
  .txt{border:1px solid red;}
  document.getElementById("div1").className="txt";
三、javascript访问样式表的应用：
1、获取行内样式的方法：
  var divObj=document.getElementById("div1");
  var divTop=divObj.style.top;
2、获取类样式的方法：
  currentStyle
  getComputedStyle()//电脑的样式

  var divObj=document.getElementById("div1");
  var divTop=divObj.currentStyle.top;//IE浏览器
  var divTop=document.defaultView.getComputedStyle(divObj,null).top;//火狐浏览器
3、制作随滚动条滚动的广告图片特效
直接来代码：
  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  <!doctype html>
  <html>
  <head>
      <style type="text/css">
          div{
              text-align:center;
              border:solid;
              position:absolute;
              top: 200px;
              width: 150px;
              height: 100px;
              right: 0px;
          }
</style>
<script type="text/javascript">
        function ff(){
var obj=document.getElementById("divId");
//var divTop=document.defaultView.getComputedStyle(obj,null).top;
//divTop=divTop.substring(0,divTop.length-2);
//设置纵向
var divTop=200;//显示的顶部高度
var top=(parseInt(divTop)+parseInt(document.body.scrollTop))+"px";//显示的高度加上滚动条滚动的值
obj.style.top=top;
//设置横向
var divWidth=150;//div的宽度
obj.style.left=(document.body.clientWidth+document.body.scrollLeft-parseInt(divWidth))+"px";//浏览器的宽度+滚动条的移动值-div的宽度
          }
</script>
  </head>
  <body οnscrοll="ff()" >
  我<div id="divId"><font color="red" style="padding: 6px;">这是一个随着滚动条滚动的广告区域</font></div><br/><br/>
  在<br/><br/><br/><br/>
  马<br/><br/><br/>
  路<br/><br/><br/>
  边<br/><br/><br/><br/>
  ，捡<br/><br/><br/><br/>
  到<br/><br/><br/>
  一<br/><br/><br/>
  分<br/><br/><br/><br/>
  钱。<br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <img alt="图片（比如：路径）报错时代替的文字" title="鼠标悬浮时提示的文字" src="../views/floder1/a.png"><img alt="图片（比如：路径）报错时代替的文字" title="鼠标悬浮时提示的文字" src="../views/floder1/a.png"><img alt="图片（比如：路径）报错时代替的文字" title="鼠标悬浮时提示的文字" src="../views/floder1/a.png">
</body>
</html>
运行效果：

----------------------------------------以下方法是在网上搜的---------------------------------------------
1.网页可见区域宽： document.body.clientWidth
2.网页可见区域高： document.body.clientHeight
3.网页可见区域宽： document.body.offsetWidth (包括边线的宽)
4.网页可见区域高： document.body.offsetHeight (包括边线的高)
5.网页正文全文宽： document.body.scrollWidth
6.网页正文全文高： document.body.scrollHeight
7.网页被卷去的高： document.body.scrollTop
8.网页被卷去的左： document.body.scrollLeft
9.网页正文部分上： window.screenTop
10.网页正文部分左： window.screenLeft
11.屏幕分辨率的高： window.screen.height
12.屏幕分辨率的宽： window.screen.width
13.屏幕可用工作区高度： window.screen.availHeight
14.屏幕可用工作区宽度： window.screen.availWidth
-------------------------------------------------------------------------------------

H、表单基本验证技术
一、要求
日期是否有效或日期格式是否正确
  表单元素是否为空
  用户名和密码
  E-mail地址是否正确
  身份证号码等是否是数字
二、字符串对象
  属性：字符串对象.length
  方法：
.toLowerCase() 把字符串转化为小写
.toUpperCase() 把字符串转化为大写
.charAt(index) 返回在指定位置的字符
.indexOf('aa') 查找指定的'aa'字符串值在字符串中首次出现的位置
.substring(index1,index2) 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，
      不包括索引index2对应的字符
三、文本框对象的属性、方法、事件
事件：
      onblur 失去焦点，当光标离开某个文本框或者文本域时触发
      onfocus 获得焦点，当光标进入某个文本框或者文本域时触发
  方法：
      blur() 从文本域中移开焦点
      focus() 在文本域中设置焦点，即获得鼠标光标
      select()选取文本域中的内容
  属性：
      id 设置或返回文本域的id
      value 设置或返回文本域的value属性的值
四、基本验证：
1、邮箱
  var mail=document.getElementById("email").value;
  if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
      alert("Email格式不正确\n必须包含符号@和.");
      document.getElementById("email").select();//邮箱格式不正确时，文本框内容全选，高亮显示
      return false;
  }
2、密码
  var pwd=document.getElementById("pwd").value;
      if(pwd.length<6){
         alert("密码必须等于或大于6个字符");
      return false; }
  var repwd=document.getElementById("repwd").value;
  if(pwd!=repwd){
      alert("两次输入的密码不一致");

return false;

}

3、姓名
  var user=document.getElementById("user").value;
      for(var i=0;i<user.length;i++){
          var j=user.substring(i,i+1)
          if(isNaN(j)==false){
              alert("姓名中不能包含数字");
          }
          }
制作文本框效果：
  function clearText(){
      var mail=document.getElementById("email");
      if(mail.value=="请输入正确的电子邮箱"){
          mail.value="";
          mail.style.borderColor="#ff0000";
      }
  }
     <td>Email：<input id="email" type="text" class="inputs" value="请输入正确的电子
邮箱" οnfοcus="clearText()"/></td>
</tr>
4、文本提示特效
  function checkEmail(){
      var mail= document.getElementById ("email");
      var divID= document.getElementById ("DivEmail");
         divID.innerHTML="";
       if(mail.value==""){
       divID.innerHTML="Email不能为空";
      return false;
  }
……
  <input id="email" type="text" class="inputs" οnblur="checkEmail()"/>
  <div class="red" id="DivEmail"></div>
I、正则表达式和表单辅助特效
一、定义正则表达式
普通方式：
  var reg=/表达式/附加参数;
例如：
  var reg=/white/;
  var reg=/white/g;
构造函数：
  var reg=new RegExp("表达式","附加参数");
  var reg=new RegExp("white");
  var reg=new RegExp("white","g");
二、表达式的模式
  简单模式：var reg=/china/;
  复合模式：var reg=/^\w+$/;
三、RegExp对象
     方法：test();检索字符串中指定的值，存在和正则表达式的匹配则返回true，否则返回false。
     用法：reg.test(str);
     属性：
      global RegExp对象是否具有标志g(可以进行全局匹配)
      ignoreCase RegExp对象是否具有标志i（不区分大小写匹配）
      multiline RegExp对象是否具有标志m（可以进行多行匹配）
四、正则表达式常用符号：
  /…/ 代表一个模式的开始和结束
  ^ 匹配字符串的开始
  $ 匹配字符串的结束
  \d 匹配一个数字字符，等价于[0-9]
  \D 除了数字之外的任何字符，等价于[^0-9]
  \w 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
  \W 任何非单字字符，等价于[^a-zA-z0-9_]
  \s 空白字符
  \S 非空白字符
  {n} 匹配前一项n次
  {n,} 匹配前一项n次，或者多次
  {n,m} 匹配前一项至少n次，但是不能超过m次
  * 匹配前一项0次或多次，等价于{0,}
  + 匹配前一项1次或多次，等价于{1,}
  ？匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}
五、用例：
  中国的邮政编码都是6位：var regCode=/^\d{6}$/;
  手机号码都是11位，并且第1位都是1：var regMobile=/^1\d{10}$/;
  邮箱验证：var regMail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
六、省市级联菜单
1、下拉列表框对象
1）select对象常用事件、方法和属性
  事件： onchange 当改变选项时调用的事件
  方法： add() 向下拉列表中添加一个选项
  属性： options[] 返回包含下拉列表中的所有选项的一个数组
     selectedIndex 设置或返回下拉列表中被选项目的索引号
      length 返回下拉列表中的选项的数目
2）Option对象常用属性
  text：设置或返回某个选项的纯文本值
  value：设置或返回被送往服务器的值
2、数组对象
  属性： length 设置或返回数组中元素的数目
  方法： join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
  sort( ) 对数组的元素进行排序（按照ASCII码的升序排列）
  eg：
      var aaa=new Array("asd" ,"ffff","cccc");
      var c=aaa.join()
       alert(c);
3、级联菜单：
方法一：
  <script type="text/javascript">
      var city=new Array();
      city['湖南省']=['长沙市','湘潭市','株洲市','岳阳市'];
      city['河南省']=['郑州市','洛阳','新乡','信阳','驻马店'];
      city['湖北省']=['武汉市','宜昌'];
      function addCity(){
          var pro=document.getElementById("province").value;
          document.getElementById("city").options.length=1;//在添加城市信息之前，先清空城市下拉列表，只剩下选项"请选择城市"
          for(var i in city[pro]){
              var op=new Option(city[pro][i],city[pro][i]);
              document.getElementById("city").add(op);
          }

</script>

  <select id="province" οnchange="addCity()">
      <option>--请选择省份--</option>
      <option value="湖南省">湖南省</option>
      <option value="河南省">河南省</option>
      <option value="湖北省">湖北省</option>
  </select>
  <select id="city">
      <option>--请选择城市--</option>
  </select>
方法二：
  <script type="text/javascript">
      var city=new Array();
      city[0]=new Array("长沙市","湘潭市","娄底市","浏阳市");
      city[1]=new Array("郑州","洛阳","商丘","新乡","信阳","驻马店");
      city[2]=new Array("武汉","宜昌","襄樊");
      function addCity(){
          var index=document.getElementById("province").selectedIndex-1;
          document.getElementById("city").options.length=1;
          if(index!=-1){
              for(var i=0;i<city[index].length;i++){
                  var op=new Option(city[index][i],city[index][i]);
                  document.getElementById("city").add(op);
              }
          }
      }
  </script>
padding-top
padding-bottom
marginBottom

  往表格里添加(按钮)元素：var deleteButton=td3_new.innerHTML="<input type='button' value='删除' οnclick=''>";
                  deleteButton.οnclick="delete1()";
  手动设置格子文字位置:/*td0_new.style.textAlign="left";*/

数据类型：alert(typeof(namer.value));//number、string、boolean、undefined、null

更多相关属性与用法请参观：http://www.w3school.com.cn/jsref/index.asp

芬芳酩酊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
8.javaScript基础(2)

A、基本语法内置函数自定义函数内嵌框架一、内置函数：1、alert();弹出一个只含有“确认”按钮的警告框2、confirm("你是女孩吗？");弹出一个同时含有“确认”和“取消”按钮的消息框，有返回值（点击确定返回true 点击取消返回false）3、var a=prompt("请输入一个数字：","0");接收用户输入的信息,"0"是默认值，可以自行修改默认值。a为确定时返回的值。4、...
复制链接

扫一扫

专栏目录