JavaScript学习Day2

其他 2018-05-20 20:11:25 阅读次数: 2

一、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" onclick="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" onclick="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-屏幕宽度

猜你喜欢

转载自blog.csdn.net/weixin_38654336/article/details/80219594
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022