JavaScript 2021-01-25

最新推荐文章于 2022-05-25 14:30:53 发布
最新推荐文章于 2022-05-25 14:30:53 发布
阅读量111 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43817549/article/details/113092208
版权

# JavaScript:

# BOM

    1. 概念：Browser Object Model 浏览器对象模型
        * 将浏览器的各个组成部分封装成对象。

    2. 组成：
        * Window：窗口对象
        * Navigator：浏览器对象
        * Screen：显示器屏幕对象
        * History：历史记录对象
        * Location：地址栏对象

    3. Window：窗口对象
        1. 创建
        2. 方法
             1. 与弹出框有关的方法：
                alert()    显示带有一段消息和一个确认按钮的警告框。
                confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
                    * 如果用户点击确定按钮，则方法返回true
                    * 如果用户点击取消按钮，则方法返回false
                prompt()    显示可提示用户输入的对话框。
                    * 返回值：获取用户输入的值
             2. 与打开关闭有关的方法：
                close()    关闭浏览器窗口。
                    * 谁调用我 ，我关谁
                open()    打开一个新的浏览器窗口
                    * 返回新的Window对象
             3. 与定时器有关的方式
                setTimeout()    在指定的毫秒数后调用函数或计算表达式。
                    * 参数：
                        1. js代码或者方法对象
                        2. 毫秒值
                    * 返回值：唯一标识，用于取消定时器
                clearTimeout()    取消由 setTimeout() 方法设置的 timeout。
    
                setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式。
                clearInterval()    取消由 setInterval() 设置的 timeout。
    
        3. 属性：
            1. 获取其他BOM对象：
                history
                location
                Navigator
                Screen:
            2. 获取DOM对象
                document
        4. 特点
            * Window对象不需要创建可以直接使用 window使用。 window.方法名();
            * window引用可以省略。  方法名();


    4. Location：地址栏对象
        1. 创建(获取)：
            1. window.location
            2. location

        2. 方法：
            * reload()    重新加载当前文档。刷新
        3. 属性
            * href    设置或返回完整的 URL。


    5. History：历史记录对象
        1. 创建(获取)：
            1. window.history
            2. history

        2. 方法：
            * back()    加载 history 列表中的前一个 URL。
            * forward()    加载 history 列表中的下一个 URL。
            * go(参数)    加载 history 列表中的某个具体页面。
                * 参数：
                    * 正数：前进几个历史记录
                    * 负数：后退几个历史记录
        3. 属性：
            * length    返回当前窗口历史列表中的 URL 数量。

 


## DOM：

    * 概念： Document Object Model 文档对象模型
        * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

    * W3C DOM 标准被分为 3 个不同的部分：

        * 核心 DOM - 针对任何结构化文档的标准模型
            * Document：文档对象
            * Element：元素对象
            * Attribute：属性对象
            * Text：文本对象
            * Comment:注释对象

            * Node：节点对象，其他5个的父对象

    * 核心DOM模型：

        * Document：文档对象
            1. 创建(获取)：在html dom模型中可以使用window对象来获取
                1. window.document
                2. document
            2. 方法：
                1. 获取Element对象：
                    1. getElementById()    ： 根据id属性值获取元素对象。id属性值一般唯一
                    2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                    3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                    4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
                2. 创建其他DOM对象：
                    createAttribute(name)
                    createComment()
                    createElement()：可以创建标签对象
                    createTextNode()
            3. 属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
</head>
<body>
<div></div>
<div></div>
<input class="cls">
<input class="cls">
<input name="nm">
<script>
  /*  * Document：文档对象
        直接用
    2. 方法：
	1. 获取Element对象：
	1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
    2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
    3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
    4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数
*/
  // 2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
 var div=document.getElementsByTagName("div");
  // 3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
    var cls = document.getElementsByClassName("cls");
  // 4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数*/
    var nm = document.getElementsByName("nm");
  // 创建Element对象
    var table = document.createElement("table");
    alert(table);
</script>
</body>
</html>

        * Element：元素对象
            1. 获取/创建：通过document来获取和创建
            2. 方法：
                1. removeAttribute()：删除属性
                2. setAttribute()：设置属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
    <style>
        div {
            float: right;
        }

        body {
            background-image: url("img/3.jpg");
        }

        .p1 {
            box-shadow: 0 0 10px 20px red,
            0 0 10px 5px black;
            width: 500px;
            padding: 5px;
            text-align: center;
            font-size: 20px;
            margin: 0 auto;
            color: #333333;

        }

        .p2 {
            text-align: center;
            margin: 0;
            padding: 50px;
            font-family: helvetica, arial, sans-serif;
            color: #999;
            font-size: 80px;
            font-weight: bold;
            text-shadow: 0.1em 0.1em #333;
        / / 右下角阴影
        }
    </style>
</head>
<body>
<div>

    <input id="create" type="button" value="添加段落">
    <input id="del" type="button" value="删除段落">
    <input id="removechild" type="button" value="删除儿子">
    <input id="setp" type="button" value="添加儿子内容">
</div>
<p id="p1"></p>
<script>
    /*    * Element：元素对象
        1. 获取/创建：通过document来获取和创建
        2. 方法：
                    1. removeAttribute()：删除属性
        2. setAttribute()：设置属性*/
    //获取绑定事件的标签对象
    //添加段落
    //给按钮添加点击事件
    document.getElementById("create").onclick = function () {
        var p1 = document.getElementById("p1");
        //给p1添加值
        p1.innerHTML = "人生若只如初见，何事秋风悲画扇。";
        //创造新段落并赋值给p2
        var p2 = document.createElement("p");
        //给p2设置属性
        p2.setAttribute("id", "p2");
        // 设置p2的class，便于设置css样式
        p1.className = "p1";
        //把p1添加到p2
        p1.appendChild(p2);
    }
    //添加删除段落
    document.getElementById("del").onclick = function () {
        var p1 = document.getElementById("p1");
        p1.innerHTML = "我被删除了";
    }
    //添加子属性
    document.getElementById("setp").onclick = function () {
        var p2 = document.getElementById("p2");
        p2.innerHTML = "等闲变却故人心，却道故人心易变";
        p2.className = "p2";
    }

    //删除儿子
    document.getElementById("removechild").onclick = function () {
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        p1.removeChild(p2);

    }
</script>
</body>

</html>

        * Node：节点对象，其他5个的父对象
            * 特点：所有dom对象都可以被认为是一个节点
            * 方法：
                * CRUD dom树：
                    * appendChild()：向节点的子节点列表的结尾添加新的子节点。
                    * removeChild()    ：删除（并返回）当前节点的指定子节点。
                    * replaceChild()：用新节点替换一个子节点。
            * 属性：
                * parentNode 返回节点的父节点。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
                height: 200px;
                width: 200px;
            }
        #div2{
            height: 100px;
            width: 100px;
        }
        #div3{
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">div2</div>
    div1
</div>
<a href="javascript:void(0);" id="a">删除div2</a>
<a href="javascript:void(0);" id="a1">增加div3</a>

<script>
   /* Node：节点对象，其他5个的父对象
    * 特点：所有dom对象都可以被认为是一个节点
    * 方法：
    * CRUD dom树：
    * appendChild()：向节点的子节点列表的结尾添加新的子节点。
    * removeChild()	：删除（并返回）当前节点的指定子节点。
    *
    * 属性：replaceChild()：用新节点替换一个子节点。
    * parentNode 返回节点的父节点。*/
   //获取绑定事件的标签对象
var a = document.getElementById("a");
//绑定事件
a.onclick=function () {
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    //输出子节点
    div1.removeChild(div2);
}
var a1 = document.getElementById("a1");
a1.onclick=function () {
    var div1 = document.getElementById("div1");
    //添加div元素对象
    var div3=document.createElement("div");
    //添加div3元素对象的id属性
    div3.setAttribute("id","div3");
    //添加div3到div中
    div1.appendChild(div3);

}
</script>
</body>
</html>

    * HTML DOM
        1. 标签体的设置和获取：innerHTML
        2. 使用html元素对象的属性
        3. 控制元素样式
            1. 使用元素的style属性来设置

            2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式控制</title>
    <style>
        .div1{
            border: 1px solid gold;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="div1">
    div1
</div>

<script>
        //提前定义好类选择器的样式，通过元素的className来C
        //类选择器名随便起
        div1.className="div1";
    }

</script>
</body>
</html>


## 事件监听机制：
    * 概念：某些组件被执行了某些操作后，触发某些代码的执行。    
        * 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
        * 事件源：组件。如： 按钮 文本输入框...
        * 监听器：代码。
        * 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。


    * 常见的事件：
        1. 点击事件：
            1. onclick：单击事件
            2. ondblclick：双击事件
        2. 焦点事件
            1. onblur：失去焦点
            2. onfocus:元素获得焦点。

        3. 加载事件：
            1. onload：一张页面或一幅图像完成加载。

        4. 鼠标事件：
            1. onmousedown    鼠标按钮被按下。
            2. onmouseup    鼠标按键被松开。
            3. onmousemove    鼠标被移动。
            4. onmouseover    鼠标移到某元素之上。
            5. onmouseout    鼠标从某元素移开。
            
            
        5. 键盘事件：
            1. onkeydown    某个键盘按键被按下。    
            2. onkeyup        某个键盘按键被松开。
            3. onkeypress    某个键盘按键被按下并松开。

        6. 选择和改变
            1. onchange    域的内容被改变。
            2. onselect    文本被选中。        7. 表单事件：
            1. onsubmit    确认按钮被点击。
            2. onreset    重置按钮被点击。
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
            /*  //绑定鼠标事件
                document.getElementsByClassName("input")[0].onmouseover=function () {
                    alert("鼠标来了")*/

            //绑定鼠标点击事件
           document.getElementsByClassName("input")[0].onmousedown = function (event) {
                var btn = event.button;
                if (btn == 0) {
                    alert("鼠标左键被点击");
                } else if (btn == 1) {
                    alert("鼠标中键被点击");
                } else if (btn == 2) {
                    alert("鼠标右键被点击");
                } else {
                    alert("判断不了哪个鼠标键鼠标被点击")
                }
         /*  //键盘按键被按下事件
            document.getElementsByClassName("input")[0].onkeydown=function (event) {
                if(event.keyCode==13){
                    alert("提交表单");
                }}*/
            /*//选择和改变事件
            document.getElementById("city").onchange=function () {
                alert("改变了");
            }
*/
            //表单中使用注册事件
            document.getElementById("form").onsubmit=function () {
                var value = document.getElementById("input").value;
                var flag="大帅比刘宗";
                if (flag==value) {
                    return true;
                }else {
                    return false;
                }
            }

        }
    </script>
</head>
<body>
<form id="form" action="">
id:<input type="text" class="input" id="input">
<select id="city">
    <option>--请选择--</option>
    <option>北京</option>
    <option>上海</option>
    <option>南昌</option>
</select>
<input type="submit" id="btn">
</form>
</body>
</htm

：

 

最强猛犸象
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 对象与数组的监听实例
06-07
打开就能运行，无任何依赖，简单的MVVM 的实例 。采用属性访问器来实现，需要浏览器较高的版本。最好使用chrome .代码仅提供给大家一个思路和技术交流
JavaScript总结_DOM和事件监听
weixin_42456748的博客
09-17 172
JavaScript总结_DOM和事件监听 一、DOM 1.1 概述 Document Object Model(文档对象模型)：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。 1.2 DOM模型分类 核心DOM：针对任何结构化文档的标准模型。 Document：文档对象 Element：元素对象 Attribute：属性对象 Text：文本对象 Comment：注释对象 Node：节点对象，其它5个的父对象 XML DOM：针对XML文档的标准模
2021 年 JavaScript 大事记
小生方勤
12-28 399
大家好，我是 ConardLi，不知不觉中，2021 年已经接近尾声了，不知道在 2021 这一年，你收获了什么？又失去了什么呢？又到了开始做年终总结的时候了，今天，我来给 JavaScr...
DOM事件监听器
dianlu5775的博客
05-17 159
DOM事件监听器，允许一个事件触发多个方法。在实际工作中应用比较多。 它的调用形式如下： <body> <div> DOM事件监听器，允许一个事件触发多个方法。 </div> <button id="an">按钮</button> <script> var elbtn=docu...
DOM常见事件的监听
m0_67302441的博客
05-25 1467
常见事件 一，鼠标事件 mouseenter：鼠标移动到元素上时出发（不支持冒泡），不能使用事件委托； 进入子元素依然属于在该元素内，没有任何反应。 mouseover：鼠标移到某元素之上（支持冒泡），先调用父元素的mouseout，再调用子元素的mouseover，因为支持冒泡，所以会将mouseover传递到父元素中； 二，常见的键盘事件 onkeydown：某个案件被被按下，事件先发生 onkeypress：发生在文本被输入 onkeyup：某个按键被松开，发生在文本输入完成 区分ev
-VincentRobert_5_25-01-2021-
02-12
【标题】"-VincentRobert_5_25-01-2021-"似乎是一个个人项目或课程的标识，日期部分"25-01-2021"指的是2021年1月25日。由于标签是"JavaScript"，我们可以推测这是一个与JavaScript编程相关的项目或学习资料。 在...
JavaScript日期库date-fn.js使用方法解析
10-14
const startDate = new Date('2020/01/01'); const endDate = new Date('2020/12/25'); const daysDiff = differenceInDays(endDate, startDate); const businessDaysDiff = differenceInBusinessDays(endDate, ...
Vue_ElementUI-ING-2021_01:Vue＆ElementUI
03-08
Vue_ElementUI 1_vue简介 2_第1个vue应用程序 3_vue实例对象和生命周期 4_vue生命周期 5_vue模板 ...25_作用域插槽 26_组件v-model绑定 27_动态组件和递归组件 28_组件实战练习（1） 29_组件实战练习（2）
LiuJiang-Blog:博客技术博客
03-09
2021-01-18 06:54:31 2021-01-06 10:16:04 2020-11-07 07:47:57 全部 2018-09-27 11:14:57 2018-09-27 11:14:10 2018-07-23 07:20:49 2021-01-06 10:16:04 2018-10-25 08:43:53 2019-09-10 02:14:20 2019-07...
imersao-react-next-alura
05-24
Alura在01/25/2021和01/02/2021之间发起的事件，目的是在React和Next.js中构建测验页面。 ; 使用的技术 ; ; ； ； ; 使用Next.js +样式化的组件 跑步 使用npm或Yarn create-next-app npm create-next-app ： ...
HTML5游戏_基于DOM平台跳跃小游戏开发_9.按键监听
03-04
源码
DOM事件监听方法
yunzhongxicao的博客
02-18 2055
1、使用事件处理器属性 var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor ...
HTML5新特性之Mutation Observer
weixin_30485799的博客
12-14 344
1、概述 Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。 要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，...
JavaScript 2021-01-24
weixin_43817549的博客
01-24 133
表格验证 分析： 1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。 如果都为true，则监听器方法返回true 如果有一个为false，则监听器方法返回false 2.定义一些方法分别校验各个表单项。 3.给各个表单项绑定onblur事件。 代码： <!DOCTYPE html> <html lang="en...
十五-垃圾回收相关算法
u014215131的博客
10-11 258
15.1 标记阶段：引用计数算法 引用计数算法(Reference Counting)比较简单，对每个对象保存一个整型的引用计数器属性，用于记录对象被引用的情况 对于一个对象A，只要有任何一个对象引用了A，则A的引用计数器就加1；当引用失效时，引用计数器就减1.只要对象A的引用计数器的值为0，则表示对象A不可能再被使用，可进行回收 优点：实现简单，便于辨识；判定效率高，没有延迟性 缺点：需要单独的字段存储计数器，增加了存储空间的开销 每次赋值都需要更新计数器，增加了时间开销 无法处理循环引用的情况，这是致
js的事件与监听器的问题
BeanModel的博客
04-19 230
今天遇到了一个特别特别坑的问题,写问以作记录.使用openlayers做了一个地图,添加了几个标记点,点击标记点弹出详情框.当功能完成后发现点击a图标弹出框正常,当再次点击b图标总是会去先加载a的数据再加载b的数据弹出.我就很郁闷.找了很久...后来想到可能是点击事件没有被清除,想着使用removeEventListener()方法先清除事件,再添加事件,发现根本不好用.再后来上网查了下docum...
angular4点击事件监听_DOM事件机制
weixin_39717443的博客
12-08 305
引言：对于以下代码<div class="爷爷"> <div class="爸爸"> <div class="儿子"> 文字 </div> </div> </div>同时在爷爷div, 爸爸div, 儿子div 上添加事件监听fn1, fn2, fn3提问1：点击文字，算不算点击儿子？点击文字，算不算点击爸爸...
【JS】ECMAScript 2021 新特征
qq_35724512的博客
01-28 333
ECMAScript 2021 新特征
Javascript-事件绑定与监听01-加法器
Void的博客
02-05 82
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
echart折线图怎么通过时间筛选实现x轴时间变化
最新发布
05-31
['2021-01-25', 250], ['2021-01-26', 260], ['2021-01-27', 270], ['2021-01-28', 280], ['2021-01-29', 290], ['2021-01-30', 300], ['2021-01-31', 310] ]; ``` 3. 配置图表选项 ```javascript var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值