JavaScript基本知识

一，JavaScript复习
1.JS数据类型
基本数据类型：
number 数字：无论是整数还是小数，都是数字类型。
string 字符串：字符串类型可以用单引号或双引号。[.length 返回字符串的长度]
boolean 布尔型：true, false。
特殊类型：
undefined 未定义：表示一个变量声明但没有赋值，默认值undefined。
null 空：表示一个空值，需要手动赋值。
引用类型：object类型 [Date,Array]

2.数据类型之间的转换:不同类型的数据在计算过程中是自动转换的
1)数字+布尔型-->布尔型的true转化为1，false转化为0与数字相加
2)字符串+布尔/数字-->统一看作字符串相加
3)布尔+布尔-->布尔型的true转化为1，false转化为0相加

3.
系统内置函数：
1）parseInt: 将字符串转换为整型 如果不能转换 返回NaN
2）parseFloat: 将字符串转换为小数 ，如果不能转换 返回的NaN
3）isNaN: 判断一个数字是否非数字 参数是非数字返回true  是数字返回false
4）toString():转换为字符串
5）typeof()：获取变量的数据类型 [typeof(变量名) 或  typeof 变量名]

自定义函数：
function 函数名称(参数) {
            函数体
        }
匿名函数：
var sum = function(x,y) {
          return x+y;
        };

4.比较运算符：
===：判断两个变量的值和数据类型是否相。
==：只是判断两个变量额值是否相等。

5.常用的输入输出:
》alert('提示信息');
》document.write('输出信息')：在页面输出内容
》console.log('信息')：在控制台输出
》prompt('提示信息','默认值')：获取用户输入的信息

6.变量：var用于声明变量的关键字，JavaScript是弱类型的语言，声明变量不需要指定类型，由赋值操作确定类型
1)先声明变量再赋值:
var num;
num=10;
2)声明的同时赋值:var num=10;
3)不声明也可以直接赋值:num=20;

7.JavaScript的使用方法
1）内部js：写在script标签中，标签一般放在head或者body标签中，推荐放在body的最后
2）行内使用：<button οnclick="alert('hello word')">点击我</button>
3）引入外部的js,在HTML中使用：<script src=''></script>

8.响应事件：
onclick 点击标签时触发
onchange 当标签内容发生变换时触发
onkeydown 当键盘按下时触发
onblur 标签失去焦点时触发
onload 页面或者一张图片加载完成直接运行
onmouseover:

9.window对象
》常用的属性
    1.screen 有关客户端的屏幕和显示性能的信息
    window.screen.width /height
    2、history 有关客户访问过的url信息
        window.history.forward() 同浏览器的往前的箭头 
        window.history.back()同浏览器的往后的箭头
        window.history.go(n) 单击n次后退箭头 -1 表示后退一个页面    
    3、location 有关当前url的信息
        location.href = 'detail.html' 表示在当前页打开指定的页面 href属性
        location.reload() 重新加载页面
        <a href="javascript:location.href='detail.html'">跳转到详情页</a>
        <a href="javascript:location.reload()">刷新当前页</a>
》常用的方法
    1、alert() 弹出一个对话框，包含确定按钮
    2、prompt() 显示可提示用户输入的对话框，返回值用户输入的数据 string类型
    3、confirm()显示一个确定按钮和一个取消按钮的对话框，确定返回true 取消返回false
    4,open(url,打开方式,窗口特征)
    5,close() 关闭当前的窗口
    6,setTimeout('调用的函数',延迟的毫秒时间) 延迟执行
    7,setInterval('调用的函数',指定的时间间隔) 每隔一段时间执行一次
    
10.document对象常用方法
1）write()： 在页面中输入内容
2）getElementById() 通过id获取当前文档中的某一标签元素,返回值匹配到的第一个元素的对象
3）getElementsByName() 通过元素的name属性获取文档的标签，返回值是一个数组
4）getElementsByTagName() 通过标签名称获取页面中的多个元素
5）getElementsByClassName()

11.控制元素的显示和隐藏
visibility:visible 元素是可见
           hidden 元素是不可见,任然占据页面上的控件
<p οnclick="func()"><img src="img/img3.png" />分类讨论</p>
        <ul id="u1" style=visibility:hidden;>
            <li><img src="img/img4.png" />bbs系统</li>
            <li><img src="img/img4.png" />共建水木</li>
            <li><img src="img/img4.png" />站务公告栏</li>
            <li><img src="img/img4.png" />装点水木</li>
        </ul>
function func(){
                var dis=document.getElementById('u1').style.visibility;
                if(dis=='hidden'){
                    document.getElementById('u1').style.visibility='visible';
                }else{
                    document.getElementById('u1').style.visibility='hidden';
                }
            }
           
display:none 元素是不显示 ，会释放给所占的区域
        block 元素将显示为块级元素
        
<p οnclick="func()"><img src="img/img3.png" />分类讨论</p>
        <ul id="u1" style=display: none;>
            <li><img src="img/img4.png" />bbs系统</li>
            <li><img src="img/img4.png" />共建水木</li>
            <li><img src="img/img4.png" />站务公告栏</li>
            <li><img src="img/img4.png" />装点水木</li>
        </ul>
function func(){
                var dis=document.getElementById('u1').style.display;
                if(dis=='none'){
                    document.getElementById('u1').style.display='block';
                }else{
                    document.getElementById('u1').style.display='none';
                }
            }
语法：object.style.属性='属性值' [object.style.display='none']

12.DOM编程
 》访问节点的属性
  getAttribute('属性名') 获取元素属性
  <img id="img1" src="../img/fruit.png" />
        <input type="button" value="显示图片的路径" οnclick="getPic()"/>
  function getPic(){
                var fruit=document.getElementById('img1');
                alert(fruit.getAttribute('src'));
            }
  
 》修改节点的属性
  setAttribute('属性名','属性值') 设置元素属性
  <img id="img1" src="../img/fruit.png" />
        <input type="button" value="修改图片的路径" οnclick="changePic()"/>
  function changePic(){
                var fruit=document.getElementById('img1');
                fruit.setAttribute('src','../img/fruit1.png');
            }
 
 》创建和增加节点
   》createElement() 创建节点 [document.createElement('标签名称')]
   》appendChild() 增加（追加）节点 ,给父节点添加一个子节点，添加父节点里最后一个节点
   <input type="button" value="添加一张图片" οnclick="addNode()"/>
   function addNode(){
                var img_node=document.createElement('img');
                img_node.setAttribute('src','../img/fruit1.png');
                document.body.appendChild(img_node);
            }
  
 》复制节点并添加
   》insertBefore() 在指定节点前插入新节点
   》cloneNode() 克隆节点
<img id="img1" src="../img/fruit.png"/>
function clone_node(){
                var img_node=document.getElementById("img1");
                var new_node=img_node.cloneNode();
                //document.getElementById('content').appendChild(new_node);
                //document.getElementById('content').insertBefore(new_node,img_node);
                var content=document.getElementById('content');
                document.body.insertBefore(new_node,content);
            }

   
 》删除节点
   removeChild(指定节点) 父节点删除子节点
 <p id="p1">这是一段文字</p>
 function delNode(){
                var p1=document.getElementById('p1');
                document.body.removeChild(p1);
            }
 
 》替换节点
   replaceChild(目标节点,被替换的节点):
<p id="p1">这是一段文字</p>
    function updNode(){
                var p1=document.getElementById('p1');
                var span_node=document.createElement('span');
                span_node.innerHTML='这是span标签的文字';
                document.body.replaceChild(span_node,p1);
            }
   
   
13.文本框对象的事件，方法
1)onblur:失去焦点时触发
<td><input type="text" id='name' οnblur="checkName()"/></td>
function checkName(){
                var name=document.getElementById('name').value;
                var div_name=document.getElementById('div_name');
                if(name==''){
                    div_name.innerHTML='用户名不能为空';
                    div_name.style.color='red';
                }
            }
            
2)onfocus:得到焦点是触发
<td><input type="text" id='name' οnfοcus="setColor()"/></td>
function setColor(){
                var name=document.getElementById('name');
                    name.style.background='red';    
            }
            
3)onchange:文本框内容发生改变时触发 [省市级联]
<td><input type="text" id='name' οnchange="toUppercase()"/></td>
function toUppercase(){
                var name=document.getElementById('name').value;
                document.getElementById('name').value=name.toUpperCase();    
            }

4)blur():文本框失去焦点时触发
<td><input type="text" id='name'/></td>
$(document).ready(function(){
                $('#name').blur(function(){
                $('#name').css('background','red');
              });
            });
            
5)focus():文本框得到焦点时触发
<td><input type="text" id='name'/></td>
$(document).ready(function(){
                $('#name').focus(function(){
                $('#name').css('background','red');
              });
            });
            
6)select():选中文本框内容
<td><input type="text" id='name'/></td>
$(document).ready(function(){
                $('#name').blur(function(){
                $('#name').select();
              });
            });

14.string对象
属性：str.length
方法：str.toLowerCase();转换为小写
      str.toUpperCase();转换为大写
      str.indexOf(s); 返回首次出现的位置，没有则返回-1
      str.charAt(index) 返回指定位置处的字符
      str.substirng(index1,index2);截取字符串，包括index1，不包括index2。
      
15,正则表达式

邮箱：var reg=/^\w+@\w+(.\w+){1,2}$/
\w:匹配任意字符(数字，字母，下划线，汉字)
+：前一项出现1次或多次，等价于{1,}
*:前一项出现任意次数，等价于{0,}
?:前一项出现0次或1次，等价于{0,1}

手机号：
var reg=/^1[0-9]{10}$/
var reg=/^1\d{10}$/

身份证号码：
var reg=/^\d{15}$|^\d{18}$/;
var reg=/^{14}(\d|X|x)$|^\d{17}(\d|X|x)$/

16.创建数组的三种方式
1)var arr=new Array();
arr[0]='山东省';
arr[1]='河南省';
2)var arr2=[1,2,3];
3)var arr3=new Array('山东省','河南省');
2.数组的属性和方法
length:数组的长度
sort();排序
join():把数组拼成一个字符串

17.省市级联
var cityList=new Array();
        cityList['山东省']=['济南','青岛','临沂'];
        cityList['贵州省']=['贵阳','遵义','六盘水'];
        function addCity(){
            var province=document.getElementById('province').value;
            var city=document.getElementById('city');
            city.options.length=1;
            for(var i in cityList){
                if(i==province){
                    for(j in cityList[i]){
                        city.add(new Option(cityList[i][j],cityList[i][j]),null);
                    }
                }
            }
        }
        
18.操作表格对象
<table id="table1" border="1" width="300">
            <tr>
                <td>书名</td>
                <td>价格</td>
            </tr>
            <tr>
                <td>三国演义</td>
                <td>￥15</td>
            </tr>
            <tr>
                <td>西游记</td>
                <td>￥25</td>
            </tr>
        </table>    
1.增加一行
<input type="button" value="增加一行" οnclick="insertR()"/>
function insertR(){
                var tNode=document.getElementById('table1');
                var len=tNode.rows.length;
                var tRow=tNode.insertRow(len);
                var cell0=tRow.insertCell(0);
                cell0.innerHTML='水浒传';
                var cell1=tRow.insertCell(1);
                cell1.innerHTML='￥20';
            }
            
2.删除一行
<input type="button" value="删除一行" οnclick="delR()" />
function delR(){
                var tNode=document.getElementById('table1');
                var len=tNode.rows.length;
                tNode.deleteRow(len-1);
            }
            
3.修改内容
<input type="button" value="修改标题" οnclick="updR()" />
function updR(){
                var tNode=document.getElementById('table1');
                var tRow=tNode.rows[0];
                tRow.cells[0].innerHTML='图书名称';
                tRow.className='title';
            }