初识JavaScript03

JavaScript
本文总阅读量:
  1. 1. Array对象
    1. 1.1. 赋值
    2. 1.2. Json(键值对)
  2. 2. 原型
  3. 3. DOM
    1. 3.1. 为什么要有dom
    2. 3.2. window，document对象
      1. 3.2.1. document演示
      2. 3.2.2. window常见方法
    3. 3.3. 事件
      1. 3.3.1. body、document对象的事件
      2. 3.3.2. window对象事件,属性
  4. 4. js实现各种复制到剪贴板的方法

Array对象

js中的数组相当于C#中的集合，数组，哈希表集合体，是个动态数组

赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//1
var arr = new Array(3);
   arr[0] = 0;
   arr[1] = 1;
   arr[2] = 2;
   alert(arr);//0,1,2
   arr[3] = 3;//0,1,2,3
   alert(arr);
   //2
   for(var i=0;i<5;i++){
     arr[i]=i;
   }
   //3
   var arr=[1,2,3,"string"];
   var arr=new Array(1,2,3,"string");

Json(键值对)

1
2
3
4
5
var arr={"gender":"male","name":"luox78","age":18};
for(var key in arr){
  alert(key+arr[key]);
  //取值的另一种方式 arr.key
}

原型

相当于C#拓展方法

注意：不能跨script标签使用

1
2
3
4
5
6
//简易的邮箱判断
String.prototype.checkEmail=function(){
  return this.indexOf("@")>0?true:false;
};
var str="111@163.com";
alert(str.checkEmail());//true;

DOM

DOM document object model

为什么要有dom

为了更方便的操作html。DOM就是把Html页面模拟成一个对象，就像XDocument一样，把Xml模拟成了一个对象，提供了操作各个节点的方法，直接调用就可以了。

dom

window，document对象

window代表浏览器整个窗口，alert等操作只能用window操作(window可以省略)

document代表整个页面，只能操作页面元素 ，及内置方法

1
2
3
4
window.alert("hello");
var n=90;
window.alert(window.n);//90
document.getElementById('btn').id;

但通过window获取元素时会碰到一个问题，就是元素嵌套必须一层一层访问，如访问form中的buttonwindow.form1.btn.id，此时应该使用document对象简化操作,document.getElementById('btn').id

document演示

1
2
3
4
5
6
7
//当click时先弹出body area 然后才是html body 涉及事件冒泡
document.body.onmousedown=function(){
  alert("body area");
}
document.onmousedown=function(){
  alert("html area");
}

window常见方法

  • window.alert('大家好!');//弹出警告对话框

  • window.confirm('确定要删除吗？');//确定、取消对话框，返回true或false;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
    	<input type="button" id="btn3"/>
    </body>
    <script>
    	 document.getElementById("btn3").onclick= function() {
            if (window.confirm("Are you sure to delete?")) {
                alert("delete success");
            } else {
                alert("delete failed");
            }
        }
    </script>

  • window.navigate(url);//将网页重新导航到url,只支持IE、Opera11.6,建议使用window.location.href='url';//支持大多数浏览器

    1
    2
    3
    4
    5
    6
    window.onload = function() {
           window.navigate("https://luox78.github.io");
       }//基本上都不行
    window.onload = function () {
           window.location.href = "https://luox78.github.io";
       }//推荐使用

  • window.setInterval(function,delay)每个delay ms执行一次

    setTimeout(function,delay)只会执行一次，clearTimeout(setId)是为了清理占用的内存

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //botton value自增例子
    <script>
        var num = parseInt(document.getElementById("btn").value);
        var setId = setInterval(function () {
                document.getElementById("btn").value = num++;
            },
            1);
        document.getElementById("btn").onclick= function() {
            clearInterval(setId);//计时器一旦被销毁不能再创建
        }
    </script>

事件

跟C#中事件，委托差不多

注意点：

  • 事件=函数名，等于给事件赋值不会调用
  • 事件=函数名（），会执行一次函数，这种赋值其实并不正确，事件应该不能等于函数返回值

<body>中

1
2
3
4
5
6
<body>
    <input type="button" id="btn"/>
    <input type="button" onclick="f1();" />
    <input type="button" onclick=f1 />
    <input type="button" id="btn2" value="change method"/>
</body>

onclick=f1;的意思就是说onclick触发的方法就是f1.

onclick=“f1();”的意思就是说onclick直接调用window.f1();

<script>中

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function f1() {
        alert("f1");
    }
    function f3() {
        alert("f3");
    }
    document.getElementById("btn").onclick = f1;
    document.getElementById("btn2").onclick = function() {
        document.getElementById("btn").onclick = f3;
        alert("change completed");
    }
</script>

body、document对象的事件

  • window.onload

    • 网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成
      • window.控件Id（不建议使用),document.getElementById(“控件Id”);(推荐)

  • onunload（页面卸载后触发）

    网页关闭（或者离开）后触发。//刷新页面的时候、关闭选项卡的时候（多个选项卡）

  • onbeforeunload（页面卸载前触发）

    在网页准备关闭（或者离开）前触发。//注意浏览器缓存

    <bodyonbeforeunload=“return ‘真的要放弃发帖退出吗?’; ”>。显示的文字随浏览器版本而有差异。// =“window.event.returnValue=‘’只兼容IE

  • 除了属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）等。

window对象事件,属性

  • window.location

    • window.location.href=‘’;//重新导航到新页面,可以取值，也可以赋值。
    • window.location.reload();//刷新当前页

  • window.event

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
        document.getElementById("dv").onmousedown= function() {
            if (window.event.shiftKey) {
                alert("you have pressed the shift");
            } else {
                alert("only mouse click");
            }
        }
    </script>

    • window.event.shiftKey .ctrlKey .altKey etc 获取是否按下某键

    • clientX、clientY发生事件时鼠标在客户区域的坐标(指显示html区域)；

      screenX、screenY发生事件时鼠标在屏幕上的坐标；

      offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。当页面中有<!DOCTYPE（文档定义）时，对offsetX和offsetY单击时的解析不同(使用onmousedown的时候与onclick测试结果不同)（单击按钮中文字的时候。）

    • (window.event.returnValue)returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。(onsubmit="window.event.returnValue=false;")

      •window.event.returnValue不兼容火狐浏览器

      •FireFox:e. preventDefault();取消事件的默认动作。

      •直接写return false;IE、FF、Chrome都可以。

    • window.event.button，发生事件时鼠标按键，IE:1为左键，2为右键，4中滑轮,3左右键同时按下//要测试event.button的值的时候，请在onmousedown事件中测试

    • ​

  • window.screen对象，获取屏幕的信息

    1
    2
    3
    4
    window.onload= function() {
            alert(screen.width);
            alert(screen.height);
        }

  • clipboardData 对象，对粘贴板的操作

    • onpaste,oncopy事件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <script>
          document.body.oncopy = function () {
              alert("forbid copy");
              return false;
          }
          document.body.onpaste= function() {
              alert("forbid paste");
              return false;
          }
      </script>

    • window.clipboardData.getData``window.clipboardData.setData已弃用，新的粘贴复制方法下面介绍

      ​

js实现各种复制到剪贴板的方法

一、实现点击按钮，复制文本框中的的内容

1
2
3
4
5
6
7
8
<script type="text/javascript">
    function copyUrl2() {
        var Url2 = document.getElementById("biao1");
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好，可贴粘。");
    }
</script>

二、点击文本框时，复制文本框里面的内容

1
2
3
4
5
6
7
8
9
<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
    function oCopy(obj) {
        obj.select();
        js = obj.createTextRange();
        js.execCommand("Copy")
        alert("复制成功!");
    }
</script>

三、复制文本框或者隐藏域中的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script language="javascript">
    function CopyUrl(target) {
        target.value = myimg.value;
        target.select();
        js = myimg.createTextRange();
        js.execCommand("Copy");
        alert("复制成功!");
    }
    function AddImg(target) {
        target.value = "[IMG]" + myimg.value + "[/ img]";
        target.select();
        js = target.createTextRange();
        js.execCommand("Copy");
        alert("复制成功!");
    }
</script>

四、复制 span 标记中的内容

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
	function copyText(obj)
    {
        var rng = document.body.createTextRange();
        rng.moveToElementText(obj);
        rng.scrollIntoView();
        rng.select();
        rng.execCommand("Copy");
        rng.collapse(false);
        alert("复制成功!");
    }
</script>
jsfoundation
prev： next：