JS进阶笔记

最新推荐文章于 2024-05-07 18:19:15 发布

夏来梦栀子

最新推荐文章于 2024-05-07 18:19:15 发布

阅读量102

点赞数 2

本文链接：https://blog.csdn.net/qq_52329552/article/details/118917203

版权

JS进阶

DOM简单学习

*功能:控制html文档内容

*代码：获取页面的标签(元素)对象Element

document.getElementById(“id值”)：通过元素的id获取元素的对象

操作Element对象：

1.修改属性值

1.明确获取的对象是哪一个?

2.查看文档,找其中有哪些属性可以设置

2.修改标签体内容：

属性：innerHTML

1.获取元素对象

2.使用innerHTML属性修改标签体内容

事件简单学习:

功能：某些组件被执行了某些操作后，触发某些代码执行

造句：XXX被XXX，我就XXX

如何绑定事件

1.直接在html标签上，指定事件属性，属性值就是js代码

1.事件：onclick单机事件

2.通过js获取元素对象指定事件属性，设置一个函数

<img  id="light" src="91526d27fc3de00e472aa1063946cea7.jpg" onclick=fun()>
<img  id="light2" src="91526d27fc3de00e472aa1063946cea7.jpg" >
<script>
    function fun() {
        alert("被点击");
    }
    
    function fun2() {
        alert("被1点击");
    }
    
    //获取light2对象
    var light2 = document.getElementById("light2");
    //2.绑定事件
    light2.onclick = fun2;
</script>

BOM：

1.概念：Browser Object Model 浏览器对象模型

将浏览器各个组成部分封装成对象了

2.组成

1Window：窗口对象

alert()		 显示带有一段消息和确认按钮的警告框
confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框
   					如果用户点击确定按钮则方法返回true
    				   反之false
 prompt()    显示可提示用户输入的对话框
    					返回值 获取用户输入的值

// alert("弹出");
// window.alert("弹出1");
// var flag = confirm("你确定要退出吗?");
// if (flag){
//     //退出操作
//     alert("再见");
// }else {
//     //提示
//     alert("手别动");
// }
//提示框
var result = prompt("请输入用户名");
alert(result);

2.打开与关闭

close():关闭浏览器窗口
open():打开一个新的浏览器窗口

var openBtn = document.getElementById("openBtn");
var newWindows;
openBtn.onclick = function(){
    newWindows = open("http://www.baidu.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
    newWindows.close();
}

3.定时器有关

setTimeout() 在等待指定的毫秒数后执行函数。

参数：

1.js代码或者方法对象

2.毫秒值

3.返回值返回唯一编号或参数值

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

setInterval(function, milliseconds) 等同于 setTimeout()，但持续重复执行该函数。

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

var timeout = setTimeout(f,3000);
clearTimeout(timeout);
function f() {
alert("boom")
}
//循环
var interval = setInterval(f,2000);
clearInterval(interval);

3.属性

1.获取其他BOM对象

history

back()方法:回退

forward()方法:前进

location

Navigator

Screen

2.获取DOM对象

document

<body> 
<input type="button" value="打开" id="openBtn">
<input type="button" value="关闭" id="closeBtn">
 <script>
  var h1 = window.history;
    var h2 = history;
    alert(h1);
    alert(h2);
    var openBtn = window.document.getElementById("openBtn");
    alert("openBtn");
</script>
</body>

4.特点

windows对象不需要创建可以直接使用 window使用。window.方法名();
windows引用可以省略。方法名();

Navigator：浏览器对象

Screen：显示器屏幕对象

History：历史记录对象

4.Location:地址栏对象

1.创建(获取)：

1.window.location

2.location

2.方法：

reload()重新加载当前文档。刷新

3.属性：

href()设置或返回完整的URL

<body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="btn1" value="去百度">
    <script>
        //reload方法，定义一个按钮，点击按钮刷新当前页面
        var btn = document.getElementById("btn");
        btn.onclick = function () {
        location.reload();
        }

        //获取href属性
        var href = location.href;
        alert(href)
        //reload方法，定义一个按钮，点击按钮刷新当前页面
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            location.href = "https://www.baidu.com";
        }

    </script>

5.History：历史几率方法

1.创建(获取):

1.windows.history

2.history

2.方法：

back(): 加载history列表中的前一个URL。

forword(): 加载history列表的下一个URL

go(): 加载history列表中的某个具体页面

参数：

正数：前进几个历史记录

负数：后退几个历史记录

3.属性

length 返回当前窗口历史列表的URL数量。

DOM：

概念：Document Object Model 文档对象模型

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

W3c DOM 标准被分为3个不同的部分

核心 DOM -针对任何结构化文档的标准模型

*Document：文档对象

*Element：元素对象

*Attribute：属性对象

*Text：文本对象

*Comment：注释对象

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

XML DOM -针对 XML 文档的标准模型

HTML DOM -针对 HTML 文档的标准模型

*核心DOM模型：

*Document：文档对象

1.创建(获取)：在html模型中可以使用windows对象来获取

1.window.document

2.document

2.方法

1.获取Element对象:

1.getElementById():根据id属性值获取元素对象。id属性值一般唯一

2.getElementsByTagName():根据元素名称获取元素对象，返回值是一个数组

3.getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组

4.getElementsByName():根据name属性值获取元素对象们

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>
    获取所有div标签数组
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    var cls = document.getElementsByClassName("cls1");
    alert(cls.length)
    var ele_username = document.getElementsByName("username");
    alert(ele_username.length)
</script>

2.创建其他DOM对象：

1.方法

createAttribute(name):创建有指定名称的属性节点，并返回新的Attr对象

createComment():创建注释节点

createElement():创建元素节点

createTextNode():创建文本节点

3.属性

*Element：元素对象

1.获取通过document来获取和创建

2.方法

1.removeAttribute():删除属性

2.setAttribute():设置属性

<body>
<a>点我</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="set_reomve" value="一次">
<script>
    //获取htn
    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function () {
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https:www.baidu.com");
    }
    var set_remove = document.getElementById("set_reomve");
    set_remove.onclick = function () {
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
</script>

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

HTML DOM

1.标签体的设置和获取：innerHTML

2.使用html元素对象的属性

3.控制元素样式

1.使用元素的style属性

如：

//修改样式方式：

<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function () {
        //修改样式
        div1.style.border = "1px solid red"
        div1.style.width = "2000px";
        //font-size  -->fontSize
        div1.style.fontSize = "20px";
    }
</script>

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

<style>
    .d1{
        border: 1px solid red;
        width: 200px;
        height: 200px;
    }
    .d2{
        border: 1px solid blue;
        width: 200px;
        height: 200px;
    }
</style>

事件：

概念：某些组件被执行了某些操作后，触发某些代码的执行

事件：某些事件如：单击点击双击键盘按下了，鼠标移动了

事件源：组件如：按钮文本输入框…

监听器：代码。

注册监听：将事件事件源和和监听器组合在一起，当事件源上发生了某些事件，则触发执行某个监听代码

常见事件

1.点击事件

1.onclick 单击事件

2.ondblclick 双击事件

2.焦点事件

1.onblur：失去焦点

<script>
    //失去焦点用于表单效验
    document.getElementById("username").onblur = function () {
    alert("失去焦点")
    }
</script>

2.onfocus：获得焦点

3.加载事件

1.onlode：加载事件

<script>
    //加载事件
    window.onload = function () {
        //失去焦点用于表单效验
        document.getElementById("username").onblur = function () {
            alert("失去焦点")
        }
    }
</script>

4.鼠标事件

1.onmousedown:鼠标按钮被按下

定义方法时，定义一个形参，接受event对象

event对象的button属性key可以获取鼠标哪个键被点击了

2.onmouseup:鼠标按键被松开

3.onmousemove：鼠标被移动

//3.绑定鼠标事件
document.getElementById("username").onmouseover = function () {
    alert("鼠标来了")
}

4.onmouseout：鼠标从某元素移开

document.getElementById("username").onmousedown = function (event) {
    // alert("鼠标来了")
    alert(event.button)
}

5.键盘事件

1.onkeydown：鼠标按钮被按下

document.getElementById("username").onkeydown = function (event) {
    // alert("鼠标来了")
    // alert(event.keyCode)
    if (event.keyCode == 32) {
        alert("提交")
    }
}

2.onkeyup：某个键盘松开

3.onkeypress：按下并松开。

6.选中和改变

1.onchange：域的内容被改变。

<script>
// 4.绑定鼠标点击事件
document.getElementById("city").onchange = function () {
    alert("改变")
}

document.getElementById("form").onsubmit = function () {
            //效验用户名是否正确
            var flag = false;

            return flag;
        }
</script>
<body
<form action="#" id="form" onclick="return checkForm();">
    <input name="username" id="username1">
</form>
<!--<input id="username">-->
<select id="city">
    <option>请选择</option>
    <option>北京</option>
    <option>上海</option>
    <option>西安</option>
</select>
<input type="submit" value="提交">
</body>

2.onselect：文本被选中

7.表单事件

1.onsubmit：确认按钮被点击

可以组织表单的提交

方法返回false表单被阻止提交

2.onreset：重置按钮别点击

夏来梦栀子

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS进阶笔记

JS进阶DOM简单学习*功能:控制html文档内容*代码：获取页面的标签(元素)对象Element document.getElementById(“id值”)：通过元素的id获取元素的对象操作Element对象：1.修改属性值1.明确获取的对象是哪一个?2.查看文档,找其中有哪些属性可以设置2.修改标签体内容：属性：innerHTML1.获取元素对象2.使用innerHTML属性修改标签体内容事件简单学习:功能：某些组件被执行了某些操作后，触发某些代码执行造
复制链接

扫一扫