JS学习笔记day2

最新推荐文章于 2024-06-13 18:49:55 发布
最新推荐文章于 2024-06-13 18:49:55 发布
阅读量325 收藏
点赞数
分类专栏： 前端学习 文章标签： 文档 javascript 自学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alicelmx/article/details/78944542
版权

事件详解

  • 事件流
    1. 事件流：描述的是在页面中接收事件的顺序
    2. 事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的结点（文档）
    3. 事件捕获：最不具体的结点先接收事件，而最具体的结点应该是最后接收事件
  • 事件处理：1.HTML事件处理：直接添加到HTML结构中
<body>
    <div id="div">
        <button onclick="demo(this)">按钮</button>
    </div>
    <script>
        function demo() {
            alert("hello HTML事件处理");
        }
    </script>
</body>

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级事件处理

element.addEventListener(event, function, useCapture);
 - 第一个参数是事件的类型 (如 "click" 或 "mousedown").
 - 第二个参数是事件触发后调用的函数。
 - 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

例子：

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

4.IE事件处理程序(attachEvent\detachEvent)

  • 事件对象
    1. 事件对象：在触发DOM事件时都会产生一个对象
    2. 事件对象event：
      2.1. type：获取事件类型
      2.2. target：获取事件目标
      2.3. stopPropagation()：阻止事件冒泡
      2.4. preventDefault()：阻止事件默认行为
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <a href="http://www.baidu.com" id="aid">百度</a>
    <script>
       document.getElementById("btn1").addEventListener("click",showType);
       document.getElementById("div").addEventListener("click",showDiv);
       document.getElementById("aid").addEventListener("click",showA);
       function showType(event) {
           //alert(event.type);
           alert(event.target);
           event.stopPropagation(); //阻止事件的冒泡
       }

       function showDiv() {
           alert("div");

       }

       function showA(event) {
           event.stopPropagation();
           event.preventDefault(); //阻止默认事件

       }
    </script>
</body>

什么是对象

  • 什么是对象：JS中所有的事物都是对象：字符串、数值、函数等
    （每个对象都带有属性和方法）
  • 自定义对象：
    1. 定义并创建对象实例
    2. 使用函数来定义对象，然后创建新的对象

实例

<body>
    <!-- 创建对象 -->
    <script>
//        people = new Object();
//        people.name = "alicelmx";
//        people.age = "22";
//        document.write("name: "+people.name+" , age: "+people.age);
//        people = {name:"alicelmx",age:"22"};
//        document.write("name: "+people.name+" , age: "+people.age);
        function people(name,age) {
            this.name = name;
            this.age = age;
        }
        son = new people ("alicelmx",30);
        document.write("name: "+son.name+", age: "+son.age);
    </script>
</body>

String字符串对象

  • String对象：用于处理已有的字符串，其中字符串可以使用单引号或者双引号
  • 在字符串中查找字符串：indexOf()
<script>
    var str = "hello world";
    document.write(str.length);
    document.write((str.indexOf("oo")));
</script>
  • 内容匹配：match()
  • 替换内容：replace()
  • 字符串大小写转换：toUpperCase()/toLowerCase()
  • 把字符串分割为子字符串数组: split()

Date日期对象

  • Date对象：用于处理日期和时间。
  • 获得当日的日期
  • 常用方法：
    1. getFullYear() 获取年份。
    2. getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
    3. setFullYear() 设置具体的日期。
    4. toUTCString() 将当日的日期（根据 UTC）转换为字符串。
    5. getDay() 和数组来显示星期，而不仅仅是数字。
    6. Display a clock 在网页上显示一个钟表。
<script>
    var date = new Date();
    document.write(date);
    document.write(date.getFullYear());
    document.write(date.getTime());
</script>

Array数组对象

  • 数组的创建
var myArray = ["hello","lmx","ime"];
  • 数组的访问：通过指定数组名及索引号码，你可以访问某个特定的元素
  • 数组常用的方法：
    1. concat：合并数组
    2. sort：排序
    3. push：末尾追加元素
    4. reverse：数组元素翻转

Math对象

  • 用于执行常见的算数任务
  • 常用方法：
    1. round：四舍五入
    2. random：返回0～1之间的随机数
    3. max：返回最高值
    4. min：返回最低值
    5. abs：返回绝对值

DOM对象控制HTML

  • 方法
    1. getELementByName ——获取名字
    2. getELementByTagName ——获取元素
      等等
<body>
   <a id="aid" title="得到了a标签的属性">hello</a>
    <script>
       function getAttr() {
           var anode = document.getElementById("aid");
           var attr = anode.getAttribute("title");
           alert(attr);
       }
       getAttr();
   </script>
</body>

window对象

  • window对象

    1. 是BOM的核心，window对象指当前的浏览器窗口。
    2. 所有JS全局对象、函数以及变量均自动成为window对象的成员。
    3. 全局变量是window对象的属性，全局函数是window对象的方法
    4. 甚至HTML DOM的document也是window对象的属性之一

  • window尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
1. window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
2. window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

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

对于 Internet Explorer 8、7、6、5：
1. document.documentElement.clientHeight
2. document.documentElement.clientWidth
或者
3. document.body.clientHeight
4. document.body.clientWidth

  • window方法
    1. window.open()——打开窗口
    2. window.close()——关闭当前窗口
<body>
    <button id="btn" onclick="btnClicked()">按钮</button>
    <script>
        function btnClicked() {
            window.open("framea.html")
        }
    </script>
</body>

计时器

  • 计时事件：通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
  • 计时方法
    1. setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

以下代码实现：点击按钮停止自动执行

<body>
    <button id="btn" onclick="stopTime()">按钮</button>
    <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;
        }

        function stopTime() {
            clearInterval(mytime);
        }
    </script>
</body>
  1. setTimeout() - 暂停指定的毫秒数后执行指定的代码

以下代码实现：三秒弹出一个hello对话框，当点击按钮时停止执行

<body onload="myWin()">
    <button id="btn" onclick="stopWin()">按钮</button>
    <p id="ptime"></p>
    <script>
       var win;
       function myWin() {
           alert("hello");
           win = setTimeout(function () {
               myWin();
           },3000)
       }

       function stopWin() {
           clearTimeout(win);
       }
    </script>
</body>

location对象

  • location对象：对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
  • 属性：
    1. location.hostname 返回 web 主机的域名
    2. location.pathname 返回当前页面的路径和文件名
    3. location.port 返回 web 主机的端口 （80 或 443）
    4. location.protocol 返回所使用的 web 协议（http:// 或 https://）
    5. Location Href
      location.href 属性返回当前页面的 URL。
<body>
    <button id="btn" onclick="getLoc()">按钮</button>
    <p id="ptime"></p>
    <script>
       function getLoc() {
           document.getElementById("ptime").innerHTML = window.location.href;
       }
    </script>
</body>
  1. Location Assign
    location.assign() 方法加载新的文档。
<html>
<head>
    <script>
        function newDoc(){
            window.location.assign("http://www.w3cschool.cc")
         }
    </script>
</head>
<body>
    <input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

Screen对象

  • 对象：window.screen对象包含有关用户屏幕的信息
  • 属性：
    1. screen.availWidth - 可用的屏幕宽度
    2. screen.availHeight - 可用的屏幕高度

认识面向对象

面向对象的概念：
1. 一切事物皆对象
2. 对象具有封装和继承特性
3. 信息隐藏

基本面向对象

var person = {
    name:"lmx",
    age:22,
    eat:function () {
        alert("能吃")
    }
}

函数构造器构造对象

function Person() {

}

Person.prototype={
    name:"lmx",
    age:22,
    eat:function () {
        alert("能吃")
    }
}

var p =new Person();
alert(p.age);

深入JS面向对象

// 封装
(function () {
    var n = ime;
    People(name){
        this._name = name;
    }

    //指定原型量
    People.prototype.say = function () {
        alert("peo-我能说"+this._name+n);
    };
    window.people = People;
}());

(function () {
    function Student(name) {
        this._name = name;
    }

    Student.prototype = new People();//实现继承
    var superSay = Student.prototype.say;
    Student.prototype.say = function () {
        superSay.call(this);
        alert("stu-我能说"+this._name);
    }
    window.Student = Student;
}());

var s = new Student("lmx");
s.say();
alicelmx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js滚动条操作（整理）
天马3798
12-10 4050
原理：body的scollHeight 如果大于浏览器的innerHeight 则就会出现滚动条。原理：设置div出现滚动条，滚动条的宽度= 元素的offsetWidth-clientWidth。
js中各种宽高
qq_42880714的博客
02-28 652
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括border); 网页可见区域高： document.body.offsetHeight (包括border); 1、clientWidth clientWidth = wid...
js学习笔记day2
ee22ee的博客
02-07 48
JS基础笔记
node.js学习笔记Day2
weixin_58747565的博客
05-13 2975
今天的学习笔记是在我的上一篇博客学习笔记的基础上进行的 学习的是nodejs之express框架。 有值得注意的地方，就是node安装在哪，你的项目也需要在node安装的文件夹内才能执行到node命令，不然就会报错node不是执行命令。 第一部分：用npm安装mysql模块 在集成终端中输入 卸载mysql模块命令：npm install mysql 卸载mysql模块命令：npm uninstallmysql 查看mysql现安装的版本信息命令：npm view mysql version.
JS学习笔记DAY2--运算
qq_52014772的博客
03-05 222
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> /* 1.算术运算： +:-可以对两值进行加法运算，并返回结果 -字符串与任何值相加（包括字符串）结果都转换成字符串 -可以利用此方法进行隐式类型转换原理和String()函数.
小兔鲜Vue3 项目学习笔记Day01
不被定义的程序媛写的博客儿
05-18 1475
vue3现在使用很广泛，必学！vue3项目，本文主要是学习项目功能实现并进行总结。配套资料的话去B站下方自己拿。持续更新…
HTML学习笔记Day2
primebrake的博客
05-10 1066
自定义列表-- 自定义列表一般用于对术语或名词进行解释和描述 -->-- 定义列表的列表项没有任何项目符号 -->-- dl只能放dt和dd -->-- 一般是一个dt和多个dd -->-- dt相当于大哥 -->-- dd相当于小弟 -->关注我们新浪微博官方微信联系我们
Three.js实现三角剖分学习笔记Day2
最新发布
weixin_63800850的博客
06-13 160
p2即第二个加入点，对Templist中的三个三角形分别作外接圆，判断p2与三个外接圆的位置关系，(1)若p2位于外接圆右侧，则将该外接圆所对应的三角形放入到Tlist中，是由于插入点是从左到右插入，此时的点已是在外接圆右侧，那么后面的插入点只会在更右的地方，此时的三角形是满足空圆性的，是Deluanay三角形定义的，也就不需要讨论。基本思路是将所有的散点放入同一个超级三角形T中，建立三角形列表Tlist，三点列表Plist，临时三角形列表Templist，边列表Elist。直至检测完所有的点。
小兔鲜Vue3 项目学习笔记 Day06
不被定义的程序媛写的博客儿
05-29 1629
文章目录购物车本地1. 列表购物车基础数据渲染2. 列表购物车单选功能3. 列表购物车全选功能4. 列表购物车统计列表实现5. 接口-加入购物车6. 接口-删除购物车7. 退出登录-清空购物车数据8. 合并购物车到服务器(重要)结算1. 路由配置和基础数据渲染2. 地址切换-打开弹框交互实现3. 切换地址-地址激活交互实现4. 生成订单功能实现支付1. 渲染基础数据2. 实现支付功能3. 支付结果展示4. 封装倒计数函数小结 购物车本地 1. 列表购物车基础数据渲染 模板 views/CartList
JavaScript学习笔记day01
kitty_Happy的博客
05-09 769
✨写在前面，喵~ 💖作者简介：大家好，我是 kitty_Happy。 😉正在学习的小白一名，很乐于与大家交流各种技术，共同进步！ 🎉点赞 ➕ 评论 ➕ 收藏 == 养成习惯😜 💬 总结：希望你看完之后，能对你有所帮助，不足请指正！共同学习交流 🖊 ✉️ 不要被任何人打乱自己的脚步，因为没有谁会像你一样清楚和在乎自己的梦想。♦ 文章目录1、JavaScript基础1.1、JavaScript概述(百度百科)1.2、JavaScript 的组成及其基本结构1.2.1、JavaScript 的组成1.2.
VUE-2.X学习笔记day8
04-30
在Vue 2.x的学习过程中，第八天的笔记主要聚焦于框架的核心特性和实践技巧，旨在深化开发者对Vue的理解和应用能力。以下是一些关键的知识点： 1. **组件化**：Vue的核心特性之一就是组件化，它允许我们将复杂的UI...
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
【前端学习笔记day09】2.5. html图像标签、绝对路径和相对路径
01-08
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。 绝对地址：相对于磁盘的位置去定位文件的地址 相对地址：相对于引用...
Python廖雪峰教程学习笔记：Day14
12-22
养成一个好的习惯只需要坚持21天，Day14 什是JSON？ JSON是轻量级的文本数据交换格式，指的是 JavaScript 对象表示法（JavaScript Object Notation），类似XML但又比 XML 更小、更快，更易解析。 JSON语法 JSON数据...
【vue 2.0 学习】杂记（CSS居中方式、template三种写法、组件基础）
热门推荐
alicelmx的博客
08-17 1万+
补漏洞。。。。。 漏洞还好大
【vue 2.0 学习】杂记（ES6模块化/箭头函数/vue组件的props）
alicelmx的博客
08-15 1964
整理了8月15日发现的三个问题～
【Vue 2.0学习】杂记（flex布局/dpr/stylus）
alicelmx的博客
08-21 1502
琐碎
设计小白的随笔
alicelmx的博客
12-12 597
我是一个设计小白呀，通过一个比赛开始接触设计，现在很有兴趣，还在学习中
HTML学习笔记day1
alicelmx的博客
11-29 348
HTML学习笔记
前端入门：HTML+CSS 学习笔记 Day01
"HTML和CSS是前端开发的基础，本笔记主要涵盖了HTML+CSS的学习目标、前端历史、网页组成、网页规范以及浏览器的介绍。" 在HTML和CSS的学习中，首先需要理解HTML（HyperText Markup Language）的基本概念。HTML是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值