JavaScript中面向对象编程、BOM、DOM以及JQuery详解

2022-12-06 20:25:02

1.继承

面向对象原型继承

JavaScript

类：模板

对象：基于的实例

 <script>
     var student={
         name:'xxh',
         age:3,
         run:function () {
             console.log(this.name+"run....")
         }
     };

     var xiaoming={
         name:'xiaoming'
     };

     xiaoming._proto_=student;

     var bird={
         fly:function () {
             console.log(this.name+"fly.....")
         }

     };

     
        xiaoming._proto_=bird;

    </script>

面向对象class继承

class关键字是在ES6引入的

1.义一个类，属性，方法

class Student{
        constructor(name){
            this.name=name;
        }

        hello(){
            console.log('hello')
        }
    }

    var xiaoming=new Student('xiaoming');
    xiaoming.hello()

2.继承

 <script>
    class Student{
        constructor(name){
            this.name=name;
        }

        hello(){
            console.log('hello')
        }
    }

    class XiaoStudent extends Student{
        constructor(name,grade){
            super(name);
            this.grade=grade;
        }

        myGrade(){
            alert("你是一个小学生！")
        }

    }

    var xiaoming=new Student();
    var xiaohong=new XiaoStudent();
    </script>

3.原型链

JavaScript中面向对象编程、BOM、DOM以及JQuery详解

2.操作BOM对象

浏览器介绍

JavaScript和浏览器关系：JavaScript诞生就是为了能够让它在浏览器中运行！

BOM:浏览器对象模型

  • IE6-11
  • Chrome
  • Safari
  • FireFox

第三方浏览器

  • QQ浏览器
  • 360浏览器

 

window

 window代表浏览器窗口

window.innerHeight
350
window.innerWidth
1511
window.outerHeight
728
window.outerWidth
1360

 Navigator

Navigator封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36"
navigator.platform
"Win32"

 注意：大多数时候，不会使用Navigator对象，因为可以被人为修改

screen

屏幕尺寸

screen.width
1360
screen.height
768

location

location代表当前页面的url信息

JavaScript中面向对象编程、BOM、DOM以及JQuery详解 

设置新地址：location.assign('https://blog.csdn.net/weixin_44364444?spm=1011.2124.3001.5113')

document

document代表当前的页面，HTML DOM文档数

document.title
"百度一下，你就知道"
document.title='xxh'
"xxh"

 获取具体的文档树节点

<dl id="app">
    < dt >Java < /dt>
    < dt >JavaSE < /dt>
    < dt >JavaEE < /dt>
    < /dl>
    <script>
        var dl=document.getElementById("app");

    </script>

获取cookie

document.cookie

劫持cookie原理---恶意获取你的cookie上传到他的服务器

<script src="aa.js">

</script>

服务端可以设置cookie.httpOnly

history

history.back() //后退

history.forward()//前进

3.操作DOM对象 

DOM:文档对象模型

浏览器网页就是一个DOM树形结构

  • 更新：更新DOM节点
  • 遍历DOM节点：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个DOM节点

 

<body>
<div id="father">
    <h1>标题</h1>
    <p id="p1"></p>
    <p class="p2"></p>
</div>

<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    //获取父节点下的所有子节点
    var childrens = father.children;

</script>

更新节点

<body>
    <div id="id1"></div>
<script>
    var id1=document.getElementById('id1');
</script>
</body>
 

innerText：修改文本的值

innerHTML：可以解析HTML文本标签

id1.innerText='123'
"123"
id1.innerHTML='<strong>123</strong>'
"<strong>123</strong>"

操作JS

id1.style.color='yellow'
"yellow"
id1.style.fontSize='20px'
"20px"
id1.style.padding='2em'
"2em"

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<body>
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

  father.removeChild(p1);
  
  //删除节点是一个动态的过程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);

</script>
</body>

 注意：删除多个节点时，children是一直在变化的，删除节点时一定要注意

插入节点

获得某个节点，如果这个节点是空的，可以通过InnerHTML增加一个元素，但是节点存在的话，就会产生覆盖

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p class="ee">JavaEE</p>
    <p class="me">JavaME</p>
</div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);
</script>
</body>

 创建一个新的标签，实现插入

 

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p class="ee">JavaEE</p>
    <p class="me">JavaME</p>
</div>

<script>
    var js=document.getElementById('js'); //已经存在的节点
    var list=document.getElementById('list');
    //通过js创建一个新的节点
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText='hello,xxh';

    //创建一个节点标签
    var mystyle=document.createElement('style');
    mystyle.setAttribute('type','text/css');
    mystyle.innerHTML='body{background-color:chartreuse;}'; //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(mystyle);


</script>
</body>

insertBefore

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p class="ee">JavaEE</p>
    <p class="me">JavaME</p>
</div>

<script>
    var ee=document.getElementById('ee');
    var js=document.getElementById('js'); //已经存在的节点
    var list=document.getElementById('list');
   list.insertBefore(js,ee);
</script>
</body>

4.操作表单

表单类型

  • 文本框 text
  • 下拉框 select
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password

表单目的：提交信息

<body>
<form action="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username">
    </p>

    <!--多选框的值，就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>


<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var gril_radio=document.getElementById('girl');

    //得到输入框的值
    input_text.value;
    input_text.value='212';

    //对于单选框，多选框等固定的值，boy_radio.value只能读到当前值
    //查看返回结果，是否为true，为true，则被选中
    boy_radio.checked;

</script>
</body>

 

5.JQuery

JQuery库存在大量的JavaScript函数

获取JQuery 

 

  1. 官网jquery压缩版引用地址:

　3.1.1版本:

　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

   3.0.0版本:

　　<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

　2.1.4版本:

　　<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

2.百度压缩版引用地址:

　　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

 

3.微软压缩版引用地址:

　　<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

 

<body>
    <a href="" id="test-jquery">点我</a>

<script>
   $('#test-jquery').click(function () {
       alert('hello jquery');
   })
</script>
</body>

 选择器

文档工具站：https://jquery.cuishifeng.cn/

JQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <style>
        #divMove {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
        })
    });
</script>
</body>
</html>

操作DOM

节点文本操作

  1. $('#test-ul li[name=python]').text();//获取值
  2. $('#test-ul li[name=python]').text('设置值');//设置值
  3. $('#test-ul').html();//获得值
  4. $('#test-ul').html('<strong>123</strong>')；设置值

css操作

  1. $('#test-ul li[name=python]').css('color','red');

元素的显示和隐藏：本质是display:none

  1. $('#test-ul li[name=python]').show();
  2. $('#test-ul li[name=python]').hide();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


</head>
<body>
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="python">Python</li>
    </ul>

<script>
   $('#test-ul li[name=python]').css('color','red');
</script>
</body>
</html>

 

6.总结

  1. 巩固JS,(看JQuery源代码，游戏代码)
  2. 巩固HTML,CSS(扒网站，down下来，对应修改看效果)
上一篇：并查集


下一篇：vue-父组件向子组件传递参数