歪比巴卜：学习JS的笔记-EW帮帮网

1.js的引入方式

（1）外部js <script src='index.js'></script>

（2）内部js

...

</script>

（3）元素事件js

ps：绿色标记的两种方式都可以采用在head或body中引入。

2.变量和常量

（1）变量的命名

变量由字母、数字、下划线或$组成，并且第一个字母必须是“字母、下划线或$”，变量也不能是系统关键字和保留字。

（2）变量赋值

先声明再赋值。

（3）常量

常量指一个不能改变的量。

3.数据类型

（1）基本数据类型：数字、布尔、字符串、空值和未定义。

（2）常见的引用数据类型：数组、对象。

4.运算符

tips:

1）字符串+数学=字符串

2）var a/=b等价于var a=a/b

3）与、或和非运算符

5.类型转换

（1）隐式类型转换——指js自动进行的类型转换

（2）显式类型转换

one：【字符串】转换为【数字】

1）Number()

Number()方法只能将纯数字类型字符串转换为数字，连Number（‘100px’）的结果都是NaN。

2）parseInt()

parseInt()会从左到右进行判断，直到出现非数字为止（小数点也是数字），如果第一个数字是非数字，直接返回NaN。parseInt(0.525)的结果是0。

3）parseFloat()

parseFloat()会从左到右进行判断，直到出现除了数字和小数点之外的字符为止。

two：【数字】转换为【字符串】

1）与空字符串相加

var a = 2022 + '';

2）toString()

var a = 2022

var b = 150 + a.toString();

6.转义字符

\' —— 英文单引号

\" —— 英文双引号

\n —— 换号符

ps：在document.write()中换行应该用<br/>，在alert()中换行用\n

7.注释

1.单行注释 //

2.多行注释 /* */

8.流程控制

（1）if选择结构

（2）switch选择结构

ps：一定要在每一个case语句后面加上break语句

（3）while循环结构

（4）do...while循环结构

ps：while语句是先判断后循环，do...while是先循环后判断。

（5）for循环结构

9.函数

（1）函数的定义

1.有返回值，记得用return

2.没有返回值

ps：全局变量在程序任何地方（包括函数内都能使用），局部变量只限于定义的函数内使用。

（2）函数的调用

如果函数只被定义没有调用是不会被执行的。

1.直接调用 myStyle();

2.在表达式中调用 var sum = myAdd(1,3);

3.在超链接中调用 <a href='javascript:函数名'>点击</a>

4.在事件中调用 <button οnclick='expressMes()'>按钮</button>

ps:内置函数，类似parseInt(),isNaN()——可确定值是否为非数字（Not-a-Number）,isFinite()——判断函数可确定数字是否是有限的合法数字。

10.字符串对象

**字符串对象的属性和方法**
属性和方法	说明
lentgth属性	获取字符串的长度
方法：字符串名.toLowerCase()	将大写字母转换成小写
方法：字符串名.toUpperCase()	将小写字母转换成大写
方法：字符串名.charAt(n)	获取某一个字符，注意，第一个字符的下标是0
方法：字符串名.substring(start,end)	截取字符串，范围是substring[start,end)
方法：字符串名.replace(原字符串,替换字符串) 字符串名.replace(正则表达式,替换字符串)	用一个字符串替代另一个字符串
方法：字符串名.split('分割符’)	分割字符串，分割符为''则是把‘my'分割成’m'和'y' 分割符为' '则是按空格分割，把'my world'分割成'my'和'world' split有两个参数。第一个是分割符，第二个是分割之后截取的前n个元素。
方法：字符串名.indexOf(指定字符串) 字符串名.lastIndexOf(指定字符串)	用这个方法来找出’指定字符串’在字符串中首个出现的下标位置，返回值为-1就是不包含，没找到。 lastIndexOf()可以找到这个字符串最后出现的下标位置。这俩除了检索字符串，也要可以检索单个字符。

11.数组

1.数组的创建

var 数组名 = new Array(元素1，元素2...)

var 数组名 = [元素1，元素2...]

2.数组的获取

arr[0],arr[1]...

ps：数组和字符串一样下标（也叫索引）都是从0开始的。

3.数组的属性和方法

属性和方法	说明
arr.length	数组的长度
arr.slice()	切片，我们可以用这个方法来获取数组的某一部分。slice()方法和字符串的substring()方法很类似，slice(start,end)的截取范围为[start,end)。当end省略时，获取的范围是：start到结尾。
arr.unshift()	在数组开头添加新元素，并且得到一个新的数组。（原数组已改变）
arr.push()	在数组结尾添加新元素，并且得到一个新的数组。
arr.shift()	删除数组的第一个元素，原数组已以改变。
arr.pop()	删除数组的最后一个元素，原数组已改变。
arr.sort(函数名)	可以对数组中所有元素进行大小比较，然后按从大到小或者从小到大进行排序。
arr.reverse()	可以对数组的元素颠倒顺序。
arr.join(‘连接符’)	将数组中的所有元素连接成字符串, arr.join()是默认选用,逗号作为连接符。 arr.join('')效果是字符之间没有任何东西。 arr.join(' ')效果是字符之间有空格连接。

例子：给数组从小到大和从大到小排序

    <script>
        // 定义一个升序函数
        function up(a,b){
            return a-b;
        }
        // 定义一个降序函数
        function down(a,b){
            return b-a;
        }
        var arr = [1,3,4,5,-4,99,88];
        arr.sort(up);
        document.write('升序：'+arr.join('、')+'<br/>')
        arr.sort(down);
        document.write('降序:'+arr.join('、'))
    </script>

12.时间对象

ps：获取当前的时间，var d = new Date();

**操作年月日**
方法	说明
getFullYear()	取值为4位数，获取年份
getMonth()	取值为0~11，获取月份
getDate()	取值为1~31，获取日数
时间对象.setFullYear(year,month,day)	year是必选参数，其它两个是可选参数
时间对象.setMonth(month,day)	month是必选参数，day是可选参数
时间对象.setDate(day)	day是必选参数
时间对象.getDay()	获取今天是星期几的一个数字，取值范围是0~6

ps：操作时、分、秒的什么getHours()、getMinutes()、setSeconds()了解一下就行了。它们的取值都是从0开始的，什么0~23之间的整数，0~59啊。

13.时间对象

1.Math对象的属性

属性	说明	对应的数学形式
PI	圆周率	π
LN2	2的自然对数	ln(2)
LN10	10的自然对数	ln(10)
LOG2E	以2为底的e的对数	log2e
LOG10E	以10为底的e的对数	log10e
SQRT2	2的平方根	√2
SQRT1_2	2的平方根的倒数	1/√2

ps：度数的写法

180度——Math.PI

120度——120*Math.PI/180

2.Math对象的方法

方法	说明
Math.max(a,b,...n)	返回一组数中的最大值
Math.min(a,b,...b)	返回一组数中的最小值
Math.floor(x)	返回小于或等于x的‘最近的那个整数’，向下
Math.ceil(x)	返回大于或等于x的‘最近的那个整数’，向上
Math.sin(x)	正弦
Math.cos(x)	余弦
Math.tan(x)	正切
Math.asin(x)	反正弦
Math.acos(x)	反余弦
Math.atan(x)	反正切
atan2(y,x)	反正切，atan2(y, x)跟atan(x)是不一样的，在高级动画开发时，我们常用atan2(y, x)，因为它能够精确判断角度对应哪一个角，而atan(x)不能。
Math.random()	成生0~1之间的一个随机数，范围是[0,1) Math.random()* 10 ——表示生成[0,10)之间的随机数(n,0~n之间的随机数) Math.random()10+8 ——表示生成[8,18)之间的随机数(n+m,m~n+m之间的随机数) Math.random()10-8 ——表示生成[-8，2)之间的随机数(n-m,-m~n-m之间的随机数) Math.random()10-10 ——表示生成[-10,0)之间的随机数(n-n,-n~0之间的随机数) 也可以用floor向下取整生成0~5之间的随机整数：Math.floor(Math.random()(5+1)) 生成1~m之间的随机整数：Math.floor(Math.random()m)+1 生成n~m之间的随机整数：Math.floor(Math.random()(m-n+1))+n
Math.abs(x)	返回x的绝对值
Math.sqrt(x)	返回x的平方根
Math.log(x)	返回以e为底的x的自然对数
Math.pow(x,y)	返回x的y次幂
Math.exp(x)	返回e的指数

14.DOM基础

DOM全称‘Document Object Model’（文档对象模型）。可以简单理解成‘元素操作’，把要操作的元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。

1.节点类型

（1）元素结点（nodeType值为1）例子：document.body.nodeType

（2）属性结点（nodeType值为2）

（3）文本结点（nodeType值为3）

ps：一个元素就是一个节点，被称为元素结点。

属性结点和文本结点看上去像是元素结点的一部分，实际上，它们是独立的结点。只有元素结点才能有子节点，其它两个没有。

2.获取元素

**js获取指定元素的方式**
方式	说明
getElementById()	通过id选中元素。 var oDiv = document.getElementById("div1"); oDiv.style.color = 'red';
getElementsByTagName()	通过标签名来选中元素，得到的是一个类数组，我们只能用到length属性和下标，push什么的是用不了的。别忘了‘s'，因为它获取的是多个元素。 var oDiv = document.getElementsByTagName('span')[0]; oDiv.style.color = 'green';
getElementsByClassName()	通过类名来选中元素，得到的也是一个类数组。
getElementsByName	通过name属性来选中元素。一般用于表单元素中的单选按钮和复选按钮。 var oInput = document.getElementsByName('state'); oInput[2].checked = 'checked';
querySelector()	选取满足条件的第一个元素 var oLi = document.querySelector("#list li:nth-child(3)");
querySelectorAll()	选取满足条件的所有元素
document.title和document.body.innerHtml	window.onload = function () { document.title = '向阳而生'; document.body.innerHTML = "<strong style='color:pink'>向阳而生，超越一切</strong>" }

ps：反正elements得到的都是类数组，只能用它的length属性和下标，不能用其它的属性和方法。

3.创建元素

        var e1 = document.createElement('元素名');
        var txt = document.createTextNode('文本内容')
        // 把文本内容插入到元素节点中
        e1.appendChild(txt);
        // 把e1插入到e2中，使e1成为e2的子节点
        e2.appendChild(e1);

例子1：动态创建一个元素节点

<body>
    <div id="content">

    </div>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('content');
            var oStrong = document.createElement('strong');
            var oText = document.createTextNode('多喝水');
            oStrong.style.backgroundColor = 'pink';
            oStrong.appendChild(oText);
            oDiv.appendChild(oStrong);
        }
    </script>
</body>

例子2：动态创建一个按钮

<body>
    <div id="content">

    </div>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('content');
            var oInput = document.createElement('input');
            oInput.id = 'submit';
            oInput.value = '提交';
            oInput.type = 'button';
            oInput.style.border = '1px solid grey';
            oInput.style.backgroundColor = 'pink';
            oDiv.appendChild(oInput);
        }
    </script>
</body>

例子3：动态创建一个图片

<body>
    <div>

    </div>
    <script>
        window.onload =  function () {
            var oDiv = document.getElementsByTagName('div')[0];
            var oImg = document.createElement('img');
            oImg.className = 'img1';
            oImg.src = 'rabbit.jpg';
            oImg.style.border = '1px solid red';
            oDiv.appendChild(oImg);
        }
    </script>
</body>

4.动态创建一个表格

    <script>
        window.onload = function () {
            var oTable = document.createElement("table");
            oTable.style.borderCollapse='collapse';
            for (var i = 0; i < 5; i++)
            {
                var oTr = document.createElement("tr");
                for (var j = 0; j < 2; j++)
                {
                    var oTd = document.createElement("td");
                    oTd.style.width = '100px';
                    oTd.style.height = '30px';
                    oTd.style.border = '1px solid black';
                    oTr.appendChild(oTd);
                }
                oTr.style.width = '100px';
                oTr.style.height = '30px';
                oTr.style.border = '1px solid black';
                oTable.appendChild(oTr);
            }
            //添加到body中去
            document.body.appendChild(oTable);
        }
    </script>

4.插入元素

(1)appendChild

<body>
    <ul id="list">
        <li>CSS</li>
        <li>HTML</li>
        <li>JS</li>
    </ul>
    <input type="text" id="txt"><input type="button" id="btn" value="插入">
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function (){
                var oList = document.getElementById('list');
                var oTxt = document.getElementById('txt');
                var textNode = document.createTextNode(oTxt.value);
                var oLi = document.createElement('li');
                oLi.appendChild(textNode);
                oList.appendChild(oLi);
                oTxt.value='';
            }
        }
    </script>
</body>

(2)insertBefore()

父元素.insertBefore(新子元素,ref); ——ref是指定子元素，在这个元素之前插入新元素。

如果想在最上面插入新元素，改这里的代码就可以了：

                // oList.appendChild(oLi);
                // oList.firstElementChild表示获取ul元素下的第一个子元素
                oList.insertBefore(oLi,oList.firstElementChild);

5.删除元素

父元素.removeChild(子元素);

例如：oList.removeChild(oList.firstElementChild);

document.body.removeChild(oList);

6.复制元素

obj.cloneNode(bool);

<body>
    <ul id="list"> 
        <li>CSS</li>
        <li>JS</li>
        <li>HTML</li>
    </ul>
    <input type="button" value="复制" id="btn">
    <script>
        window.onload = function () {
            var oList = document.getElementById('list');
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
                document.body.appendChild(oList.cloneNode(1));
            }
        }
    </script>
</body>

7.替换元素

父元素.replaceChild(new,old);

例子：把<p>无语死了</p>的内容和标签都换了

    <style>
        div{
            width: 300px;
            height: 150px;
            border: 2px dotted grey;
        }
    </style>
</head>
<body>
    <div>
        <p>
            无语死了
        </p>
        <hr/>
        输入标签：<input type="text" id="tag">
        <br/>
        输入内容：<input type="text" id="txt">
        <br/>
        <input type="button" id="btn" value="替换">    
    </div>
    <script>
        window.onload =  function () {
            var oFather = document.getElementsByTagName('div')[0];
            var oFirst = document.querySelector("p");
            var oTag = document.getElementById('tag');
            var oTxt = document.getElementById('txt');
            var oBtn = document.querySelector('#btn');
            oBtn.onclick = function (){
               var oNew = document.createElement(oTag.value);
               var oTextNode = document.createTextNode(oTxt.value);
               oNew.appendChild(oTextNode);
               oFather.replaceChild(oNew,oFirst);
            }
        }
    </script>

15.DOM进阶

1.对象属性方式

1）获取HTML属性值

表单中的文本框、多行文本框、单选框、复选框、下拉列表都有一个默认的value值，我们也可以获取它来进行操作。绿色得到的是类数组，举例：oFruit[i].value。橙色是当前选中的内容，举例：oSelect.value;

2）设置HTML属性值

obj.attr = '值‘ ——obj是元素名，是个DOM对象，attr是属性名。

举例：oFruit[1].value = '苹果'

2.对象方法方式

1）获取HTML属性值

obj.getAttribute('attr')和obj.attr是等价的，两者都可以获取静态HTML的属性值和动态DOM的属性值。

举例：oBtn.getAttribute('id')与oBtn.id

但是，要获取自定义属性值只能用getAttribute('attr')来实现。

2）设置HTML属性值

obj.setAttribute('attr','值');

3）删除HTML属性值

obj.removeAttribute('attr');

举例：oP[0].removeAttribute('class');等价于oP[0].className='';

4)判断是否有某个属性值

obj.hasAttribute('attr');

严谨来看，我们在删除一个属性前应该先判断是否存在，如果存在，再去删除。

hasAttribute()方法返回一个布尔值，如果包含该属性就返回true，不包含返回false。

3.CSS属性操作

1)获取CSS属性值

getComputedStyle(obj).attr;

举例：.var color = getComputedStyle(oDiv2).backgroudColor;

2)设置CSS属性值

obj.style.attr = ’值‘; obj.style.attr等价于obj.style['attr']。

举例：oDiv2.style.width;

oDiv2.style['width'];

3）cssText属性（不常用）

obj.style.cssText = '值’

例如：oDiv1.style.cssText = 'width:100px;height:200px;border:1px solid red;"

此时属性名不再使用驼峰写法，但是实际用途中很少使用cssText属性，而是给元素加上个class属性。obj.sytle.backgroundColor用驼峰法是因为backgroundColor也是个变量。

点击前：

点击后：

代码：

    <title>加个class属性来切换</title>
    <style>
        .oldBox{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .newBox{
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <input type="button" id="btn" value="切换">
    <div id="box" class="oldBox">

    </div>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            var oBox = document.getElementById('box');
            oBtn.onclick = function () {
                oBox.className = 'newBox';
            }
        }   
    </script>
</body>

总结：为什么一定要用obj.getComputedStyle(obj).arr来获取CSS属性？

因为obj.style.attr只可以获取元素style属性中设置的CSS属性。对于内部样式或者外部样式是没法办获取的。

例子：

    <style type="text/css">
        #box{
            width: 200px !important;
        }
    </style>
</head>
<body>
    <input type="button" id="btn" value="获取宽度">
    <div id="box" style="width:100px;height: 100px;background-color:blanchedalmond;">

    </div>
    <script>
        window.onload  = function () {
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById('box');
            oBtn.onclick = function () {
                var myWidth = getComputedStyle(oBox).width;
                console.log("myWidth:"+myWidth);
                var myWidth2 = oBox.style['width'];
                console.log("myWidth2:"+myWidth2);
                alert('元素的宽度为：'+myWidth);
            } 
        }
    </script>
</body>

4.DOM遍历

（1）查找父元素

obj.parentNode; 其中obj——DOM对象

例子：

    <title>查找父元素</title>
    <style>
        table{
            width: 100px;
            height: 150px;
            border-collapse: collapse;
        }
        table,tr,td{
            border: 1px solid black;  
        }
    </style>
</head>
<body>
    <table>
        <caption>学生成绩表</caption>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>20</td>
        </tr>
        <tr>
            <td>小五</td>
            <td>40</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>80</td>
        </tr>
    </table>
    <script>
        window.onload = function () {
            var oTd = document.getElementsByTagName('td');
            for(var i=0; i<oTd.length; i++){
                oTd[i].onclick = function () {
                    var oParent = this.parentNode;
                    oParent.style.color = "white";
                    oParent.style.backgroundColor = "pink";
                }
            }
        }
    </script>
</body>

（2）查找子元素

one获取所有的子节点，包括元素节点和文本节点：childNodes、firstChild、lastChild

two获取所有的元素节点：children、firstElementChild、lastElementChild

举例：

var allChildNodes = oList.childNodes.length;

var allChildren = oList.children.length;

tips：

lastElementChild获取的是最后一个子元素结点，firstElementChild获取的是第一个子元素结点，children[i]获取的是任意一个子结点。

（3）查找兄弟元素

one查找兄弟结点：previousSibling、nextSibling

two查找兄弟元素结点：previousElementSibling、nextElementSibling

5.innerHTML和innerText

1)innerHTML

举例：oBox.innerHTML = '<img class="pic" src="rabbit.jpg" border="1px dotted red" />'

2)innerText

innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本。

举例1：

<body>
    <p id="txt"><strong style="border: 1px solid blue;background-color:aqua;color: bisque;">蓝色的海</strong></p>
    <script>
        window.onload = function () {
            var oTxt = document.getElementById('txt');
            console.log(oTxt.innerHTML);
            console.log(oTxt.innerText);
        }
    </script>
</body>

举例2：

<body>
    <p id="txt"><strong style="border: 1px solid blue;background-color:aqua;color: bisque;">蓝色的海</strong></p>
    <script>
        window.onload = function () {
            var oTxt = document.getElementById('txt');
            console.log(oTxt.innerHTML);
            console.log(oTxt.innerText);
        }
    </script>
</body>

ps： \ 是换行！

document.write()和innerHTML的区别在于，前者重绘整个页面，后者可以重绘页面的某一部分。

16.事件基础

1.事件的调用方式

1）在script标签中调用

window.onload = function (){

...

}

</script>

2）在元素中调用

2.鼠标事件

事件	说明
onclick	单击事件
onmouseover	移入事件两者配套使用，多用于二级导航，移入显示
onmouseout	移出事件移出消失
onmousedown	按下事件这俩也配套使用
onmouseup	松开事件
onmousemove	移动事件

3.键盘事件

例子1：统计输入字符的长度

<body>
    <input type="text" placeholder="请输入字符" id="txt">
    <div>
        字符串长度为：<span id="num">0</span>
    </div>
    <script>
        window.onload = function () {
            var oTxt = document.getElementById('txt');
            var oNum = document.getElementById('num');
            oTxt.onkeyup = function () {
                var txt = oTxt.value;
                oNum.innerText = txt.length;
            }
        }
    </script>
</body>

例子2：验证输入是否正确

<body>
    <input type="text" id="txt" >
    <div id="content" style="color:red"></div>
    <script>
        window.onload = function () {
            var oTxt = document.getElementById('txt');
            var oDiv = document.getElementById('content');
            var myReg = /^[0-9]*$/;
            oTxt.onkeyup = function () {
                if(myReg.test(oTxt.value)){
                    oDiv.style['color'] = 'green';
                    oDiv.innerHTML = '输入正确';
                }else{
                    oDiv.style['color'] = 'red';
                    oDiv.innerHTML = '错误，请输入数字！';
                }
            }
        }
    </script>
</body>

4.表单事件

有焦点事件的元素：1）表单元素（单行文本框、复选框、单选框等）2)超链接

1）onfocus和onblur

focus —— 让元素获取焦点

onfocus —— 获取焦点时触发

onblur —— 失去焦点时触发

例子：focus2让元素获取焦点

<body>
    <input type="text" id="txt">
    <script>
        window.onload = function () {
            var oTxt = document.getElementById('txt');
            oTxt.focus();
        }
    </script>
</body>

2）onselect

当我们选中单行文本框或多行文本框内容时就会触发事件。

例子：oTxt.onSelect = function () { alert('你选中了文本框的内容')};

(...好像我用百X文库，然后复制内容时候弹出来让我开通会员的东西)

3）onchange

举例1：单选框时触发

<body>
    <lable><input type="radio" name="fruit" value="草莓">草莓</lable>
    <lable><input type="radio" name="fruit"  value="蓝莓">蓝莓</lable>
    <lable><input type="radio" name="fruit" value="火龙果">火龙果</lable>
    <div id="content">
    </div>
    <script>
        window.onload = function () {
            var oFruit = document.getElementsByName('fruit');
            var oDiv = document.getElementById('content');
            for(var i=0; i<oFruit.length; i++){
                oFruit[i].onchange = function () {
                    oDiv.innerText = "你选择的是："+this.value;
                }
            }
        }
    </script>
</body>

举例2：复选框时触发

<body>
    <lable><input type="checkbox" id="selectAll">全选\反选：</lable><br/>
    <lable><input type="checkbox" name="fruit" value="草莓">草莓</lable>
    <lable><input type="checkbox" name="fruit"  value="蓝莓">蓝莓</lable>
    <lable><input type="checkbox" name="fruit" value="火龙果">火龙果</lable>
    <script>
        window.onload = function () {
            var oFruit = document.getElementsByName('fruit');
            var oSelectAll = document.getElementById('selectAll');
            oSelectAll.onchange = function () {
                if(this.checked){
                    for(var i=0; i<oFruit.length; i++){
                        oFruit[i].checked = true;
                        console.log(123);
                    }
                }else{
                    for(var i=0; i<oFruit.length; i++){
                        oFruit[i].checked = false;
                        console.log(456)
                    }
                }
            }
        }
    </script>
</body>

举例3：下拉列表时触发

<body>
    <select  id="list">
        <option value="http:www.baidu.com">百度</option>
        <option value="http:www.qq.com">腾讯</option>
        <option value="htpp:www.sina.com.cn">新浪</option>
    </select>
    <script>
        window.onload = function () {
            var oList = document.getElementById('list');
            oList.onchange = function () {
                var link = this.options[this.selectedIndex].value;
                window.open(link);
            }
        }
    </script>
</body>

this.options[this.selectedIndex] ——得到某个列表项

this.selectedIndex ——获取所选择的列表项的下标

5.编辑事件

1）oncopy

防止页面内容被复制，还真的粘贴不了……

<body>
    <p>就是不能复制</p>
    <script>
        window.onload = function () {
            document.body.oncopy = function () {
                return false;
            }
        }
    </script>
</body>

2）onselectstart

防止页面内容被选取。

<body>
    <p>防止页面内容被选取</p>
    <script>
        window.onload = function () {
            document.body.onselectstart = function () {
                return false;
            }
        }
    </script>
</body>

oncopy和onselectstart本质差不多啦，都是不让用户复制……

3）oncontextmenu

禁止鼠标右键。

<body>
    <p>禁止鼠标右键</p>
    <script>
        window.onload = function () {
            document.oncontextmenu = function () {
                return false;
            }
        }
    </script>
</body>

6.页面事件

1）onload

表示文档加载完成后再执行的一个事件，反正要获取页面元素时就要用到。

2）onbeforeunload

表示离开页面之前触发的一个事件。

    <script>
        window.onload = function () {
            alert('欢迎光临！')
        }
        window.onbeforeunload = function (e) {
            e.returnValue = '独行月球想去看！'
        }
    </script>

17.事件进阶

1.事件处理器

给元素添加一个事件通过操作HTML属性的方式来实现，这种方式也叫事件处理器。但是有缺点……比如给按钮添加3次onclick事件，但是最终只会执行最后一次onclick。

2.事件监听器

1）绑定事件

指的是用addEventListener()方法来为一个元素添加事件，也称为绑定事件。

obj.addEventListener(type,fn,false);

obj——指的是一个DOM对象，指通过类似getElementById()等方式获取到的元素节点。

type——是一个字符串，指的是例如click、mouseover这样的事件类型，这个事件类型是不加on的！

fn——是个函数名或者匿名函数。

false——表示事件冒泡阶段调用。

两者的区别在于：我们可以用事件监听器为同一个元素添加多个相同的事件，这一点是事件处理器做不到的。

例子：

    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.addEventListener('click',function () {
                alert('hahaha');
            },false)
        }
    </script>

ps：如果要执行多次window.onload怎么办呢？

第一种：改为：window.addEventListener('load',function(){...},false);

第二种：使用addLoadEvent()，但是得自己定义这个函数，之后我们调用addLoadEvent()函数就等于调用window.onload函数了

    <script>
        addLoadEvent(alert('hahaha'));
        function addLoadEvent(func){
            var oldonload = window.onload;
            if(typeof window.onload !=  'function'){
                window.onload = func;
            }else{
                window.onload = function () {
                    oldonload();
                    func();
                }
            }
        }
    </script>

2）解绑事件

我们可以用removeEventListener()方法为元素解绑某个事件。

obj.removeEventListener(type,fn,false);

但是这里的fn必须是个函数名，而不能是个函数。

例子：我们点击【解除】按钮后再点击p元素，发现p元素的点击事件无效了。

前（一点p就变颜色）：

后（刷新后点击按钮，p元素不变颜色）

<body>
    <p>我想说说说</p>
    <input type="button" value="按钮" id="btn">
    <script>
        window.onload = function () {
            var oP = document.getElementsByTagName('p')[0];
            var oBtn = document.getElementById('btn');
            oP.addEventListener('click',changeColor,false);

            oBtn.addEventListener('click',function () {
                oP.removeEventListener('click',changeColor,false);
            },false);

            function changeColor(){
                oP.style['color'] = 'pink';
            }
        }
    </script>
</body>

2.event对象

理解event对象：当一个事件发生时，这个事件有关的临时信息都会保存到一个指定的地方，这个地方就是event对象。

event对象的属性
属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下shiift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键

1）type

<body>
    <input type="button" id="btn" value="按钮">
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function (e) {
                alert(e.type);
            }
        }
    </script>
</body>

2）keyCode

常用的按键及对应的键码（keyCode）：

属性：

shift键——shiftKey

ctrl键——ctrlKey

alt键——altKey

ps：e.keyCode返回的是一个数字,而e.shiftKey，e.ctrlKey，e.altKey返回的是布尔值。

3.this

在事件操作中对this的理解：哪个DOM对象调用了this所在的函数，this就指向哪个DOM对象。

18.window对象简介

我们每次打开一个页面时，浏览器都会自动为这个页面创建一个window对象。window对象存放了这个页面的所有信息，它的下面又分为了很多对象：

**window对象下的子对象**
子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息
history	历史对象，用于操纵历史
screen	屏幕对象，用于操纵屏幕宽度和高度

简单来说就是，一个窗口就是一个window对象，这个窗口里的HTML文档就是一个document对象，document对象是window对象的子对象。

**window对象常用方法**
方法	说明
alert()	提示对话框
confirm()	判断对象框
prompt()	输入对话框
open()	打开窗口
close()	关闭窗口
setTimeout()	开启一次性定时器
clearTimeout()	关闭一次性定时器
setInterval()	开启重复性定时器
clearInterval()	关闭重复性定时器

1）打开窗口

window.open(url,target);

url——新窗口的地址，如果url为空，则表示打开一个空白窗口。我们可以用document.write()往空白窗口输出文本，甚至输出一个HTML页面。

target——打开方式，_blank是默认值，在新窗口打开。_self是在当前窗口打开。

举例1：打开空白窗口：

<body>
    <input type="button" id="btn" value="按钮">
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            addEventListener('click',function(){
                var opener = window.open();
                opener.document.write('这是打开的新窗口');
                opener.document.body.style.backgroundColor='pink';
            },false);
        }
    </script>
</body>

ps：window.open()会返回（return）一个值，这个值就是新窗口对应的window对象。

2）关闭窗口

window.close(); ——它是没有参数的

<body>
    <input type="button" id="btn" value="打开新窗口">
    <input type="button" id="btn2" value="关闭新窗口">
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            var oBtn2 = document.getElementById('btn2');
            var opener = 'null';
            oBtn.onclick = function () {
                opener = window.open();
                opener.document.write('这是打开的新窗口');
                opener.document.body.style.backgroundColor='pink';
            }
            oBtn2.addEventListener('click',function(){
                opener.close();
            },false);
        }
    </script>
</body>

3)alert

alert中文本换行要用到 \n，无返回值。

4)confirm

confirm('提示文字');

有提示文字，有返回值。

如果用户点击“确定”则confirm返回true，如果点击“取消”，则confirm返回false。

<body>
    <input type="button" id="btn" value="按钮">
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
                if(confirm('确定跳转到百度吗？')){
                    window.location.href = 'http://www.baidu.com';
                }else{
                    document.write('你取消了跳转。');
                }
            }
        }
    </script>
</body>

5)prompt()

prompt('提示文字');

指输入对话框，prompt()对话框不仅提示文字，还返回一个字符串。

例子：请输入你的id

前：

后：

<body>
    <input type="button" id="btn" value="按钮">
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function () {
                var name = window.prompt('请输入你的id：')
                document.write("欢迎你"+name+"!");
            }
        }
    </script>
</body>

6）定时器

one:setTimeout的用法

setTimeout(code,time);

code——可以是一段代码或函数，也可以是函数名。

time——时间，单位为毫秒。

<body>
    <p>5秒后提示欢迎语</p>
    <script>
        window.onload = function () {
            setTimeout('alert("欢迎光临！")',5000);
        }
    </script>
</body>

下面两种写法也是等价的：

setTimeout(alertMes,5000); setTimeout("alertMes()",5000);

two:clearTimeout的用法

<body>
    <p>5s后弹出对话框</p>
    <input type="button" value="开始">
    <input type="button" value="暂停">
    <script>
        window.onload = function () {
            var oBtn1 = document.getElementsByTagName('input')[0];
            var oBtn2 = document.getElementsByTagName('input')[1];
            var timer = null;
            oBtn1.onclick = function () {
                var timer = setTimeout(alertMes,5000);
            }
            oBtn2.onclick = function () {
                clearTimeout(timer);
            }
            function alertMes(){
                alert('5秒到了');
            }
        }
    </script>
</body>

three：setInterval的用法

语法：

setInterval(code,time);

code——是一段代码或一个函数或函数名。

time——时间，单位是毫秒。

但是和setTimeout的区别是：setTimeout只执行一次，而它可以执行无数次。

例子：倒计时效果

<body>
    <div>
        倒计时：<span>5</span>
    </div>
    <script>
        var n = 5;
        window.onload = function () {
            var oSpan = document.getElementsByTagName('span')[0];
            setInterval(countDown,1000);
            function countDown(){
                if(n>0){
                    n--;
                    oSpan.innerHTML = n;
                }
            }
        }
    </script>
</body

four:clearInterval的用法

举例：定时轮播图

<body>
    <div style="width: 100px;height:100px;border:1px solid black;">

    </div>
    <input type="button" value="开始">
    <input type="button" value="暂停">
    <script type="text/javascript">
        window.onload =  function () {
            var oDiv = document.getElementsByTagName('div')[0];
            var oBtn1 = document.getElementsByTagName('input')[0];
            var oBtn2 = document.getElementsByTagName('input')[1];
            var colorArr = ['pink','green','blue','grey'];
            var timer = null;
            var i = 0;
            oBtn1.onclick = function (){
                // 每次点击开始按钮就清除一次定时器
                clearInterval(timer);
                timer = setInterval(() => {
                    oDiv.style.backgroundColor = colorArr[i];
                    i++;
                    i = i % colorArr.length;
                }, 1000);
            }
            oBtn2.onclick= function () {
                clearInterval(timer);
            }
        }
    </script>
</body>

ps：为了防止不断的点击开始按钮而并累加定时器，所以在每次点击时开始时就要消除一次定时器。

7.location对象

location对象的属性
属性	说明 `<script> var url = window.location.href; document.write(url); </script>`
href	当前页面地址
search	当前页面地址？后面的内容
hash	当前页面地址 # 后面的内容

1）location.href的用法

语法：

window.location.href;

举例1：获取当前页面的地址

    <script>
        var url = window.location.href;
        document.write(url);
    </script>

举例2：设置当前页面的地址

<body>
    <p>3s后跳转</p>
    <script>
        setTimeout(() => {
            window.location.href = 'http://www.baidu.com';
        }, 3000);
    </script>
</body>

2)location.search的用法

语法：

window.location.search;

可以用于获取和设置当前页面地址‘？’后面的内容。

3)window.location.hash的用法

语法：

window.location.hash;

可以用于获取和设置当前页面地址‘ # ’ 后面的内容。#一般用于锚点链接。

8.navigator对象

我们常用window对象下的子对象navigator来获取浏览器的类型。

语法：

window.navigator.userAgent;

19.document对象

（1）document对象属性

**document对象常用的属性**
属性	说明
document.title	获取文档的title
document.body	获取文档的body
document.forms	获取所有的form元素，等价于： document.getElementsByTagName("form")
document.images	获取所有的img元素，等价于： document.getElementsByTagName("img")
document.links	获取所有的a元素，等价于： document.getElementsByTagName("a")
document.cookie	文档的cookie，意思意思看看就行
document.URL	当前文档的URL
document.referrer	返回使浏览者到达当前文档的URL

1)document.URL

语法：

document.URL;

可以用它来获取当前页面的地址。（诶，window.location.href也可以，但是window.location.href既可以获取又可以设置，而document.URL只能获取）

2)document.referrer

获取用户在访问页面之前所在的页面的地址。

(2)document对象方法

比如：

document.getElementById(),...

document.querySelector(),...

document.createElement()

document.createTextNode()等等我们见过的。

1)document.write ——老熟人了……

语法:

document.write('内容');

2)document.writeln() ——了解就行

与上面的相似，区别是document.writeln()会在输出内容后面多加上一个换行符。

writeln()方法输出的内容之间有一点空隙，而write()方法没有。

=总结=

很开心very开心，继续向星辰大海出发吧！

本文含有隐藏内容，请开通VIP 后查看

歪比巴卜：学习JS的笔记