JavaWeb--JavaScript高级

于 2020-02-26 22:00:44 发布
阅读量266 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pit3369/article/details/104526115
版权

文章目录

1-DOM简单学习：

1-1功能：

控制html文档的内容

1-1-1获取页面标签(元素)对象：Element

document.getElementById("id值"):通过元素的id获取元素对象

1-1-2操作Element对象：

  1. 修改属性值：

    明确获取的对象是哪一个？
查看API文档，找其中有哪些属性可以设置

img id="light" src="img/off.gif">
<script>
	//script语句定义在元素定义的body标签的后面
    //通过id获取元素对象
    var light = document.getElementById("light");
    alert("更换图片了！！！");
    light.src = "img/on.gif";//图片被更改了

</script>

  2. 修改标签体内容：

    /*
属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
*/
<h1 id="title">好好学习</h1>

<script>
//1.获取h1标签对象
var title = document.getElementById("title");
alert("我要换内容了。。。");
//2.修改内容
title.innerHTML = "天天向上！！！";
</script>

2-事件简单学习

2-1功能：

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

2-1-1造句：

  • 我方水晶被摧毁后，我就责备对友。
  • 敌方水晶被摧毁后，我就夸奖自己。

2-1-2如何绑定事件

  1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
	<!--事件：onclick--- 单击事件-->
	<img id="light" src="img/off.gif" onclick="fun();">
	
	<script>
	    function fun() {
	        alert('我被点了');
	        alert('我又被点了');
	    }
	</script>

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


<img id="light2" src="img/off.gif">

<script>
	function fun2() {
        alert('咋老点我？');
    }
    //1.获取light2对象
    var light2 = document.getElementById("light2");
    //2.绑定事件
    light2.onclick = fun2;
</script>

案例1：电灯开关

分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>

</head>
<body>

<img id="light" src="img/off.gif">
<script>
    //1.获取图片对象
    var light = document.getElementById("light");
    var flag = false;//代表灯是灭的 , off图片

    //2.绑定单击事件，匿名函数对象
    light.onclick = function(){
        if(flag){//判断如果灯是开的,flag为true，则灭掉
            light.src = "img/off.gif";
            flag = false;

        }else{
            //如果灯是灭的，flag=false，则打开
            light.src = "img/on.gif";
            flag = true;
        }
    }
</script>
</body>
</html>

​

3-BOM:

3-1概念：

Browser Object Model 浏览器对象模型

  • 将浏览器的各个组成部分封装成对象。

3-2组成：

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

3-2-1Window：窗口对象

  1. 方法

    //1. 与弹出框有关的方法：
alert("hello window");//alert()	显示带有一段消息和一个确认按钮的警告框。
window.alert("hello a")

//确认框
var flag = confirm("您确定要退出吗？");
//confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。

if (flag) {
    //确认=true=退出操作
    alert("欢迎再次光临！");
} else {
    //取消=false=提示：手别抖...
    alert("手别抖...");
}

//输入框，prompt()	显示可提示用户输入的对话框。

//返回值：获取用户输入的值
var result = prompt(“请输入用户名”);
alert(result);

 //2. 与打开关闭有关的方法：
 ///打开新窗口
 // open()	打开一个新的浏览器窗口，返回新的Window对象
 /*
 <input id="openBtn" type="button" value="打开窗口">
 <input id="closeBtn" type="button" value="关闭窗口">
 */
 var openBtn = document.getElementById("openBtn");
 var newWindow;
 openBtn.onclick = function () {
     //打开新窗口
     newWindow = open("https://www.baidu.com");
 }
 
 
 //关闭新窗口，谁调用我，我关闭谁！F12在网页里调试html代码
 var closeBtn = document.getElementById("closeBtn");
 closeBtn.onclick = function () {
     // 关闭新窗口
     newWindow.close();
     //谁调用，我关谁
     window.close();
 }
 
 
 //3. 与定时器有关的方式
 //一次性定时器,setTimeout()在指定的毫秒数后调用函数或计算表达式。
 setTimeout("fun();", 2000);
 // 参数1=js代码或者方法对象；参数2=毫秒值
 //返回值：唯一标识，用于取消定时器
 var id = setTimeout(fun, 2000);
 clearTimeout(id);//取消由 setTimeout() 方法设置的 timeout。
 
 function fun() {
     alert('boom~~');
 }
 
 //循环定时器，按照指定的周期（以毫秒计）来调用函数或计算表达式。
 var id = setInterval(fun, 2000);
 clearInterval(id);
 ```

  1. 属性：

    //1.获取其他BOM对象：获取history
var h1 = window.history;//获取当前页面的历史记录！
var h2 = history;//作用同上！

alert(h1);
alert(h2);

//2. 获取DOM对象：document
var openBtn = window.document.getElementById("openBtn");
alert(openBtn);

  2. 特点

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

3-2-2Location：地址栏对象

  1. 创建(获取)：

    window.location

    location

  2. 方法：

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

    //reload方法，定义一个按钮，点击按钮，刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单击事件
btn.onclick = function(){
    //3.刷新页面
    location.reload();
}

  3. 属性

    href 设置或返回完整的 URL。

    //获取href
var href = location.href ;
alert(href);

//点击按钮，去访问www.itcast.cn官网
//1.获取按钮
var goItcast = document.getElementById("goItcast");
//2.绑定单击事件
goItcast.onclick = function(){
    //3.去访问www.itcast.cn官网
    location.href = "https://www.baidu.com";
}

3-2-3History：历史记录对象

  1. 创建(获取)：

    1. window.history
    2. history

  2. 方法：

    back()：加载 history 列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go(参数)：加载 history 列表中的某个具体页面。
-参数为正数：前进几个历史记录
-参数为负数：后退几个历史记录

//1.获取按钮
var forward = document.getElementById("forward");
//2.绑定单机事件
forward.onclick = function(){
   //前进1个历史记录
   // history.forward();//和下面语句作用相同
    history.go(1);
}

  3. 属性：

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

      //1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单机事件
btn.onclick = function(){
    //3.获取当前窗口历史记录个数
    var length = history.length;
    //length：返回当前窗口历史列表中的 URL 数量。
    alert(length);
}

4-DOM：

4-1概念：

Document Object Model 文档对象模型

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

4-2 W3C DOM 标准

被分为 3 个不同的部分：

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

  • Document：文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment:注释对象

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

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

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

4-2-2核心DOM模型：

Document：文档对象

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

    1. window.document
    2. document

  2. 方法：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
   
</head>
<body>
   <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>
   /*
   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. 属性
    */

   //2.根据元素名称获取元素对象们。返回值是一个数组
   var divs = document.getElementsByTagName("div");
   //alert(divs.length);
   //3.根据Class属性值获取元素对象们。返回值是一个数组
   var div_cls = document.getElementsByClassName("cls1");
  // alert(div_cls.length);
   //4.根据name属性值获取元素对象们。返回值是一个数组
   var ele_username = document.getElementsByName("username");
   //alert(ele_username.length);

   var table = document.createElement("table");
   alert(table);


</script>
</body>
</html>
Element：元素对象

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

  2. 方法：

    <body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">

<script>
    //获取btn
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        //setAttribute()：设置属性
        element_a.setAttribute("href","https://www.baidu.com");
    }

    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        //removeAttribute()：删除属性
        element_a.removeAttribute("href");
    }
</script>
</body>
Node：节点对象，其他5个的父对象

  • 特点：所有dom对象都可以被认为是一个节点

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div {
            border: 1px solid red;
        }
        #div1 {
            width: 200px;
            height: 200px;
        }
        #div2 {
            width: 100px;
            height: 100px;
        }
        #div3 {
            width: 100px;
            height: 100px;
        }
    </style>

</head>
<body>
<div id="div1">
    <div id="div2">div2</div>
    div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<!--<input type="button" id="del" value="删除子节点">-->
<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        //removeChild()	：删除（并返回）当前节点的指定子节点。
        div1.removeChild(div3);
    }

    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function () {
        var div1 = document.getElementById("div1");
        //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id", "div3");
        //appendChild()：向节点的子节点列表的结尾添加新的子节点。
        div1.appendChild(div3);
    }
    var div2 = document.getElementById("div2");
    //属性：parentNode 返回节点的父节点。
    var div1 = div2.parentNode;
    alert(div1);

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

4-2-3HTML DOM

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

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<body>
<div id="div1">
    div
</div>

<script>
    var div = document.getElementById("div1");
    var innerHTML = div.innerHTML;
    alert(innerHTML);//显示div
    //div标签中替换一个文本输入框
    div.innerHTML = "<input type='text'>";
    //div标签中再追加一个文本输入框
    div.innerHTML += "<input type='text'>";


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

  3. 控制元素样式

  4. 使用元素的style属性来设置

    如：
    //修改样式方式1
    div1.style.border = “1px solid red”;
    div1.style.width = “200px”;
    //font-size–> fontSize
    div1.style.fontSize = “20px”;

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

锅巴QAQ
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值