JavaScript学习Day2

最新推荐文章于 2024-07-11 21:31:44 发布

OnMy22

最新推荐文章于 2024-07-11 21:31:44 发布

阅读量181

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_38654336/article/details/80219594

版权

JS 专栏收录该内容

4 篇文章

订阅专栏

一、DOM EventListener

方法：addEventListener():

removeEventListener():

（1）addEventListener():方法用于向指定元素添加事件句柄

（2）removeEventListener():移除方法添加的事件句柄

<body>
    <button id="btn">按钮</button>
    <script>
        document.getElementById("btn").addEventListener("click",function () {
            alert("hello")
        });
    </script>
</body>

这里点击按钮之后，就会弹出对话框

<body>
    <button id="btn">按钮</button>
    <script>
        var x = document.getElementById("btn");
        x.addEventListener("click",Hello);   //句柄
        x.addEventListener("click",world);
        x.removeEventListener("click",Hello); //移除句柄
        function Hello() {
            alert("Hello");
        }
        function world() {
            alert("World");
        }
    </script>
</body>

二、JS事件详解-事件流

1.事件流：描述的是在页面中接收事件的顺序

2.事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）

3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

三、JS事件详解-事件处理

1.HTML事件处理：直接添加到HTML结构中

2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            alert("hello DOM0级事件处理程序")
        }
    </script>
</body>

3.DOM2事件处理

addEventListener（“事件名”，”时间处理函数”，”布尔值”）；

Ture：事件捕获

False：事件冒泡

removeEventListener();

<div id="div">
    <button id="btn1">按钮</button>
</div>
<script>
    var btn1 = document.getElementById("btn1");
    btn1.addEventListener("click",demo1);
    btn1.addEventListener("click",demo2);
    function demo1() {
        alert("DOM2级事件处理程序1")
    }
    function demo2() {
        alert("DOM2级事件处理程序2")
    }
</script>

4.IE事件处理程序

attachEvent：添加一个事件

detachEvent：移除掉一个事件

<script>
    var btn1 = document.getElementById("btn1");
    if(btn1.addEventListener){
        btn1.addEventListener("click",demo);
    }else if (btn1.attachEvent){
        btn1.attachEvent("onclick",demo);
    }else {
        btn1.onclick = demo();
    }

    function demo() {
        alert("Hello")
    }
</script>

四、事件对象

1.事件对象：

在出发DOM事件的时候都会产生一个对象

2.事件对象event：

（1）type：获取事件类型

（2）target：获取事件目标

<script>
    document.getElementById("btn1").addEventListener("click",shwoType)

    function shwoType(event) {
        alert(event.type); //获得当前事件的类型
        alert(event.target); //获取事件的目标
    }
</script>

（3）stopPropagation():阻止时间冒泡

（4）preventDefault():阻止事件默认行为

事件冒泡：

<div id="div">
    <button id="btn1">按钮</button>
</div>
<script>
    document.getElementById("btn1").addEventListener("click",showType)
    document.getElementById("div").addEventListener("click",showDiv)
    function showType(event) {
        alert(event.type); //获得当前事件的类型
        alert(event.target); //获取事件的目标
    }
    function showDiv() {
        alert("div");
    }
</script>

只点击了button但是div也出现了，这种情况成为事件的冒泡

然而通过在function showType中添加：event.stopPropagation();

实现组织事件冒泡行为。

组织事件默认行为：

<a id="aid" href="http://www.baidu.com">百度</a>

有一个a标签，其中点击会自动跳转百度页面

现在设置点击无法跳转百度页面

document.getElementById("aid").addEventListener("click",showA)
function showA(event) {
     event.stopPropagation();
     event.preventDefault();
}

五、什么是对象

1.什么是对象：

JavaScript中的所有事物都是对象：字符串、数值、数组、函数...

每个对象都有属性和方法

JavaScript允许自定义对象

2.自定义对象：

（1）定义并创建对象实例

（2）使用函数来定义对象，然后创建新的对象实例

<body>
    <!--创建对象-->
    <script>
        // people = new Object();  //创建了一个对象
        // people.name = "iwen";
        // people.age = "30";
        // document.write("name:"+people.name+",age:"+people.age);
        // people = {name:"iwen",age:"30"}; //此时这个也是一个对象
        function people(name,age) {     //通过函数创建一个对象
            this._name = name;
            this._age = age;
        }
        son = new people("iwen",30);
        document.write("name:"+son._name+",age:"+son._age);
    </script>
</body>

六、String字符串对象

1.String字符串对象：String对象用于处理已有的字符串

字符串可以使用单引号或双引号

2.在字符串中查找字符串：indexOf() 若存在则返回字符串的位置，若不存在返回-1

<script>
    var str = "Hello World";
    // document.write("字符串长度："+ str.length)  //length属性
    document.write(str.indexOf("World1"));
</script>

3.Match();内容匹配：若匹配成功，返回字符串名，若匹配不成功返回null

document.write(str.match("World1"));

4.替换内容：replace();

document.write(str.replace("World","百度"))

5.字符串大小写转换：toUpperCase()/toLowerCase()

6.分割方法：split(“”);

var s = str.split(",")

字符串属性和方法：

（1）属性：length、prototype、constructor

（2）方法：charAt()、charCodeAt()、concat()、fromCharCode()、indexOf()、lastIndexOf()、match()、replace()、search()、slice()、substring()、substr()、valueOf()、toLowerCase()、toUpperCase()、split()

七、Date日期对象

1.Date对象:日期对象用于处理日期和时间

2.获得当日的日期

<script>
    var date = new Date();
    document.write(date);
</script>

3.常用方法：

getFullYear():获取年份

getTime():获取毫秒

setFullYear():设置具体的日期

date.setFullYear(2010,1,11)

getDay():获取星期

八、Array数组对象

1.Array对象：

使用单独的变量名来储存一系列的值

2.数组的创建:

例：var myArray=[“Hello”,”me”]

3.数组的访问：

通过制定数组名以及索引号码，你可以访问某个特定的元素

4.数组常用方法：

（1）Concat():合并数组

var a=["hello","world"];
var b=["iwen","ime"];
var c = a.concat(b);
document.write(c)

（2）Sort():排序

var a=["8","6","7","5"]
document.write(a.sort());//升序
document.write(a.sort(function (a,b) {
    return b-a;
}));  //降序

（3）Push():末尾追加元素

var a = ["a","b"];
a.push("c");
document.write(a);

（4）Reverse():数组元素翻转

var a = ["c","b","a"]
a.reverse()

九、Math对象

1.Math对象：

执行常见的算数任务

2.常用方法：

（1）Round():四舍五入

document.write(Math.round(2.5))

（2）Random():返回0~1之间的随机数

document.write(parseInt(Math.random()*10));   //其中parseInt方法是讲值转换为int类型

（3）max():返回最大值

（4）min():返回最小值

（5）abs():返回绝对值

十、重要：DOM对象控制HTML

1.方法：

（1）getElementsByName():获取name

（2）getElementsByTagName():获取元素

（3）getAttribute()：获取元素属性

function getAttr() {
    var anode = document.getElementById("aid");
    var attr  = anode.getAttribute("title");
    alert(attr);
}

（4）setAttriibute():设置元素属性

function setAttr() {
    var anode = document.getElementById("aid2");
    anode.setAttribute("href","http://www.baidu.com");
}

（5）childNodes():访问子节点

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
function getChildNode() {
    var chilenode = document.getElementsByTagName("ul")[0].childNodes;
    alert(chilenode.length)
}
getChildNode();
</script>

（6）parentNode():访问父节点

（7）createElement():创建元素节点

function createNode() {
    var body = document.body;
    var input = document.createElement("input");
    input.type = "button";
    input.value="按钮";
    body.appendChild(input);
}
createNode();

（8）createTextNode:创建文本节点

（9）insertBefore():插入节点

function addNode() {
    var div = document.getElementById("div");
    var node = document.getElementById("pid");
    var newnode = document.createElement("p");
    newnode.innerHTML = "动态添加一个P元素"
    div.insertBefore(newnode,node);
}
addNode();

（10）removeChild():删除节点

function removeNode() {
    var div =document.getElementById("div");
    var p = div.removeChild(div.childNodes[1]);

}
removeNode()

（11）offsetHeight：网页尺寸（不包含滚动条

function getSize() {
    var width = document.documentElement.offsetWidth;
    var height = document.documentElement.offsetHeight;
    alert(width+","+height)
}
getSize();

（12）ScrollHeight：网页尺寸（包含滚动条）

十一、windows对象

1.windows对象：

Windows对象是BOM的核心，windows对象指当前的浏览器窗口

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

全局变量是window对象的属性

全局函数是window对象的方法

甚至HTML DOM的document也是window对象属性之一

2.window尺寸：

Window.innerHeight-浏览器窗口的内部高度

Window.innerWidth-浏览器窗口的内部宽度

document.write("宽度："+window.innerWidth+"，高度："+window.innerHeight);

3.window方法：

Window.open()-打开新窗口

<button id="btn" οnclick="btnClicked()">按钮</button>
<script>
    function btnClicked() {
        window.open("index.html");
    }
</script>

Window.close()-关闭当前窗口

function btnClicked() {
    window.close();
}

十二、计时器

1.计时事件：

通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，二不是在函数被调用后立即执行，我们称之为计时事件。

2.计时方法:

（1）setInterval()-间隔指定的毫秒数不停地执行指定的代码

<body>
    <p id="ptime"></p>
    <script>
        var mytime = setInterval(function () {
            getTime();
        },1000);
        function getTime() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("ptime").innerHTML = t;
        }
    </script>
</body>

ClearInterval()方法用于停止setInterval()方法执行的函数代码

function stopTime() {
    clearInterval(mytime);
}

（2）setTimeout()-暂停指定的毫秒数后执行指定的代码

var win;
function myWin() {
    win = setTimeout(function () {alert("hello");},3000);
}

ClearTimeout()方法用于停止执行setTimeout()方法的函数代码

var win;
function myWin() {
    alert("hello");
    win = setTimeout(function () {myWin()},3000);
}
function stopWin() {
    clearTimeout(win);
}

十三、Histroy对象

1.history对象：

Window.history对象包含浏览器的历史(url)集合

2.History方法：

History.back()-与浏览器点击后退按钮相同

History.forward()-与在浏览器中点击按键向前相同

History.go()-进入历史中的某个页面

十四、Location对象

1.Location对象：window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面

2.Location对象的属性:

Location.hostname返回web主机的域名

Location.pathname返回当前页面的路径和文件名

Location.port返回web主机的端口

Location.protocol返回所使用的的web协议(http://或http://)

Location.href属性返回当前页面的URL

Location.assign()方法加载新的文档

<body>
    <button id="btn" οnclick="getLoc()">按钮</button>
    <p id="ptime"></p>
<script>
    function getLoc() {
        document.getElementById("ptime").innerHTML = window.location.hostname;
    }
</script>
</body>

十五、Screen对象

1.Screen对象：

Window.screen对象包含有关用户屏幕的信息

2.属性：

Screen.availWidth-可用的屏幕宽度

Screen.availHeight-可用的屏幕高度

Screen.Height-屏幕高度

Screen.Width-屏幕宽度