JS－javascritp初学（字符串，正则表达式，数组，事件）

主要是自己的一些简单学习，总结一下方便以后查看，如有重复请谅解。

1.字符串

---

2.正则表达式

• 修饰词

 1. i:忽略大小写
 2. g:全部匹配
 3. m:把\n识别多行

• 中括号

 1. [abc]中括号中的任意一个字符
 2.［^abc］除了中括号中的任意一个字符
 3.（abc）｜（def）abc或def单词

• 元字符

 - . 任意一个字符
 - \w 任意一个字母、数字或下滑线
 - \W 任意一个非字母、数字和下滑线
 - \d 任意一个数字
 - \D 任意一个非数字
 - \s 任意一个空格
 - \S 任意一个非空格
 - \b 单词边界
 - \B 非单词边界
 - \n 代表换行符

• 量词

 - ＋ 一个或多个
 - ＊ 任意多个
 - ？ 1个或0个
 - ｛3｝ 3个
 - ｛3，5｝3个到5个
 - ｛3，｝3个以上
 - ^ 行首
 - $ 行末
 - ?＝a 后面紧挨a的
 - ?!=a 后面不紧挨a的 

JS中使用正则的字符串对象方法

• search();
• match();
• replace();
• split();

举例如下：

1:匹配183开头的手机号码

2:验证是否是手机号

class="form" method="post" id="form" onsubmit="return checkForm(this)" action="">
    电话号码：<input id="tel" type="text" maxlength="11" name="tel"/>
    <button type="submit" name="submit" value="">提交button>
form>

<script>
    //验证是否是手机号
    function checkForm(o) {
        var myreg = /^(((13[0-9])|(15[^4,\\D])|(18[0-9]))+\d{8})$/;
        // test() 方法用于检测一个字符串是否匹配某个模式
        if(!myreg.test(o.tel.value)){
            alert('请输入正确手机号');
            return false;
        }else {
            alert('正确手机号');
        }
    }
 script>
body>

3.验证邮箱格式
^([a-zA-Z0-9]+[|-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[|-|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/gi

4.高级替换

---

3.数组（。。。）

---

4.事件对象

1. JS特性
   触发事件
   属性改变
   样式改变
2. 绑定事件
   标签身上
   JS代码中
3. 鼠标事件
   onclick
   ondblclick 双击
   onmouseenter 鼠标移入
   onmouseleave 离开
   onmousemove 鼠标移动
4. 键盘事件
   onkeydown
   onkeyup
   onkeypress

实例：
- js代码中绑定事件

  "images/DX.png" id="imgid"/>

2.标签身上绑定事件

  "images/DX.png" id="imgid" onclick="this.src='images/QQ.png'"/>

3.鼠标移动(移动鼠标改变图片的位置)

4.键盘事件（onkeydown）

5.上下弹力球（左右依此类推）

"en">

    "UTF-8">
    
    


    
"imgid">
      "images/QQ.png" alt="">
    

6.完整弹力球的实现

"en">

    "UTF-8">
    
    


    
"imgid">
      "images/QQ.png" alt="">
    

---

5.javascript表单事件(当…的时候)

• onfocus 获得焦点
• onblur 失去焦点
• onchange 值改变
• onselect 值选中
• onsubmit 表单提交的时候
• onreset 重置的时候

其它事件：

• onload 用于窗口／图片是否加载完成后触发
• onerror 加载失败的时候触发
• onresize 浏览器大小发生改变的时候触发
• onscroll 滚动

网页加载：
1.标签加载完毕
  body后面的js代码
2.窗口加载完毕
  window.onload=function(){
  }

实例1 表单事件：

"en">

    "UTF-8">
    


"go.php" id="fid">
    
选择城市:
    

        "s1">
            "">选择城市
            "北京">北京
            "上海">上海
            "广州">广州
            "未知">未知
        
    
    
请确认您选择的城市:"s2">未知
    

    
用户名:
    
"text" id="ipt" value="user">
    
密码:
    
"text" value="123456">
    
"submit" value="OK">
        "reset" value="Cancel">
    

实例2:返回顶部（简单适配）

css代码：

－－－－－－－－－-－－－－－－－－－－－－－－－－－－－


class="top">
    <a href="#abc">
        <img src="images/back.jpg">
    a>
div>
<a name="abc">a>


<div id="tops">
    <img src="images/back.jpg">
div>
body>

<script>
function ischrome() {
        //区分浏览器内核
        nu = navigator.userAgent;
        document.title=nu;
        if (nu.match(/chrome/i)||nu.match(/Mozilla/i)) {
            return true;
        }else {
            return false;
        }
    }
    topobj = document.getElementById('tops');


    window.onscroll = function () {
        if (ischrome()) {
           st = document.body.scrollTop;
            if (st > 200) {
                topobj.style.display = 'block';
            } else {
                topobj.style.display = 'none';
            }
        } else {
            //非谷歌
            st = document.documentElement.scrollTop ;
            if(st>200){
                topobj.style.display='block';
            }else{
                topobj.style.display='none';
            }
        }
    }

    topobj.onclick = function () {
        if (ischrome()) {
            //谷歌
            document.body.scrollTop = 0;
        } else {
            //非谷歌
            document.documentElement.scrollTop = 0;
        }
    }
script>

---

重要知识点

position的定位值：

• absolute： 绝对定位。脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
• relative： 相对定位。对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
• fixed ： 固定定位。所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

position定位：

• 左上角（top,left）
• 右下角（top,right）
• 左下角（bottom,left）
• 右下角（bottom,right）

---