js dom

最新推荐文章于 2024-11-12 17:31:26 发布

chulie3936

最新推荐文章于 2024-11-12 17:31:26 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/k2easy/blog/544154

版权

BOM Browser Object Model，浏览器对象模型,浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述
window 代表了一个新开的窗口 // Window 对象是 JavaScript 层级中的顶层对象 // Window 对象代表一个浏览器窗口或一个框架 // Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建
location 代表了地址栏对象。//location.reload(); location.href="www.baidu.com";
screen 代表了整个屏幕的对象//screen.availHeight 不包含任务栏 screen.availWidth 不包含任务栏 // screen.height 包含任务栏 screen.width 包含任务栏

1、用户名<input type="text" οnfοcus="showInfo()" οnblur="hideInfo()">

2、//获取url中的参数
       var url=window.location.search;
       var urlParams=new Object();
       if(url.indexOf('?')!=-1){
           var str=url.substr(1);
           var arr=str.split('&');
           for(var i=0;i<arr.length;i++){
               urlParams[arr[i].split('=')[0]]=decodeURI(arr[i].split('=')[1]);
           }
       }
       console.log(urlParams);
       function getParam(key){
           return urlParams[key];
       }

DOM

var links = document.links; // 获取文档中含有href的属性的标签
document.getElementById("userName").value ='abc'
var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象
var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组 // <div name="info"></div>
1、多选框全选

<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" οnclick="checkAll(this)" /> 全选<br />
<input type="button" value="反选" οnclick="fanxuan()" /><br/>
总金额：//value 求和
function checkAll(allNode){
   var items=document.getElementsByName("item");
   for(var i=0;i<items.length;i++)
       items[i].checked=allNode.checked;
}
console.log(items[i].checked)//true,false

2、省份城市下拉框连动
<body>
   省份<select id="province" οnchange="showCity()">
           <option>省份</option>
           <option>广东</option>
            <option>湖南</option>
            <option>广西</option>
       </select>
   城市<select id="city"><option>城市</option></select>
</body>
<script type="text/javascript">
   function showCity(){
       //维护一个二维数组存储省份对应的城市
       var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];
       var provinceNode = document.getElementById("province");
       var selectIndex = provinceNode.selectedIndex;
       var cityDatas = citys[selectIndex];
       var cityNode = document.getElementById("city");
       //先清空city框所有option
       var children = cityNode.childNodes;
       for(var i =children.length-1; i>=0 ; i--){
       //for(var i=0;i<len;i++)//removeChild 删除元素0则后面元素1变为元素0，清空bug；可以倒序删除或者.options.length=0
           cityNode.removeChild(children[i]);
       }
       // cityNode.options.length = 0；//1 ;
       for(var index = 0; index<cityDatas.length ; index++){
           var option = document.createElement("option");
           option.innerHTML = cityDatas[index];
           cityNode.appendChild(option);
       }
<script type="text/javascript">
3、简单的验证码(不具有实际意义)

<body>
   <span id="code"></span><a href="javascript:void(0)" οnclick="createCode()">看不清，换一个</a>
       <script type="text/javascript">
       function createCode(){
           var datas = ['A','B','何','敏','凡','江','1','9'];
           var code="";
           for(var i=0;i<4;i++){
               var index=Math.floor(Math.random()*datas.length);
               code+=datas[index];
           }
           var node=document.getElementById("code");
           node.innerHTML=code;
           node.style.fontSize="24px";
           node.style.color="red";
           node.style.backgroundColor="gray";
           node.style.textDecoration="line-through";
       }
       window.οnlοad=createCode();
   </script>
</body>

查找元素，跳过，应该使用 jQuery
/*

    通过关系(父子关系、兄弟关系)找标签。
       parentNode   获取当前元素的父节点。
       childNodes   获取当前元素的所有下一级子元素。
       firstChild   获取当前节点的第一个子节点。
       lastChild   获取当前节点的最后一个子节点。
       nextSibling       获取当前节点的下一个节点。（兄节点）
       previousSibling   获取当前节点的上一个节点。（弟节点）
我们可以通过标签的类型进行判断筛选：
   文本节点的类型： 3
   注释的节点类型： 8
   标签节点的类型： 1
   document.createElement("标签名")//创建新元素节点
   elt.setAttribute("属性名", "属性值")//设置属性
   elt.appendChild(e)//添加元素到elt中最后的位置
   elt.innerHTML="<input type='file'/>";
       elt.insertBefore(newNode, oldNode);//添加到elt中，child之前;注意： elt必须是oldNode的直接父节点。
   elt.removeChild(child)   //删除指定的子节点注意： elt必须是child的直接父节点。

正则表达式

    /*
   test()   如果匹配成功返回ture，否则返回false
   exec() 根据正则表达式去查找字符串符合规则的内容。
   模式：
   g （全文查找出现的所有 pattern）
   i （忽略大小写）
   */
   var testStr="hello,world1";
   var reg=/[0-9]+$/gi;//new RegExp("正则表达式",模式);
   console.log(reg.test(testStr));
   var str ="da jia hao hao xue xi a";
   var reg = /\b[a-z]{3}\b/gi;
   var line ="";
   while((line = reg.exec(str))!=null){
       document.write(line+"<br/>")
   }

1、表单验证

<body>
<form action="success.html"   method="get" οnsubmit="return checkAll()">
   <table width="50%" align="center" cellpadding="0px" cellspacing="0" border="1px">
       <tr>
           <td width="30%">姓名:</td>
           <td><input type="text" id="userName" οnblur="checkName()" />
               <span id="userRes"></span>
           </td>
       </tr>
       <tr align="center">
           <td colspan="2"><input type="submit" /></td>
       </tr>
   </table>
</form>
   <script type="text/javascript">
   function checkName(){
       var userName=document.getElementById("userName").value;
       var userResNode=document.getElementById("userRes");
       console.log(userName);
       var reg=/^[a-z][a-z0-9]{5}$/i;// 不能以数字开头，六个字符
       var res=reg.test(userName);
       if(!res){
           userResNode.innerHTML="Wrong".fontcolor("red");
           return false;
       }
       userResNode.innerHTML="";
       return true;
   }
   </script>
var reg = /^\w{6}$/; 校验密码 6位
</body>